/* Home component: corporate entity - machined editorial edition.
   One solid entity slab on the blueprint grid; the spec desk is the fixed
   deep-teal machined panel (announcement-bar language). */

.corporate-section {
  position: relative;
  padding: var(--space-16) 0;
  background: var(--ds-bg);
  border-bottom: 1px solid var(--ds-border);
}

/* ---- fixed production-hall backdrop, veiled per theme (same concept as
   the finishes and rituals bands) ---- */
.corporate-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../../../images/lifestyle/corporate-backdrop.jpg') center / cover fixed;
}

/* veil lives on its own layer so brightness/contrast tuning applies to the
   photograph only - filtering a combined layer also lightens the veil and
   cancels itself out */
.corporate-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ds-bg) 34%, transparent),
    color-mix(in srgb, var(--ds-bg) 22%, transparent));
}

[data-theme="light"] .corporate-section::before {
  /* the source photo is dark; lift it so it reads on a pale page without
     blowing out the detail (the veil above is now light, so a gentler
     lift is enough) */
  filter: brightness(1.55) contrast(0.92) saturate(0.85);
}

[data-theme="light"] .corporate-section::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ds-bg) 30%, transparent),
    color-mix(in srgb, var(--ds-bg) 18%, transparent));
}


.corporate-section > .container { position: relative; z-index: 1; }

@media (hover: none) {
  .corporate-section::before,
  [data-theme="light"] .corporate-section::before { background-attachment: scroll; }
}

.corporate-box {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  box-shadow: var(--shadow-1);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-10);
  align-items: center;
}

.corporate-info h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--ds-text);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.15;
}

.corporate-legal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ds-primary);
  background: var(--ds-primary-soft);
  border: 1px solid color-mix(in srgb, var(--ds-primary) 26%, transparent);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: var(--space-4);
}

.corporate-info p {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ds-text-muted);
  margin: 0 0 var(--space-6) 0;
}

.corporate-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ds-border);
}

.corporate-details-list li {
  padding: 10px 2px;
  border-bottom: 1px dashed var(--ds-border);
  font-size: var(--text-sm);
  color: var(--ds-text);
}

.corporate-details-list b {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-text-muted);
  margin-inline-end: 6px;
}

/* machined spec desk (fixed brand palette) */
.spec-desk {
  position: relative;
  overflow: hidden;
  padding: var(--space-7);
  border-radius: var(--radius-md);
  color: var(--lu-neutral-0);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lu-neutral-0) 8%, transparent) 0%, transparent 46%),
    linear-gradient(135deg, var(--lu-deep-teal) 0%, var(--lu-teal-700) 100%);
  border: 1px solid color-mix(in srgb, var(--lu-mint) 28%, transparent);
  box-shadow: var(--shadow-1);
}

.spec-desk::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lu-mint) 70%, transparent), transparent);
}

.spec-desk-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--lu-mint);
  border: 1px solid color-mix(in srgb, var(--lu-mint) 42%, transparent);
  background: color-mix(in srgb, var(--lu-neutral-0) 8%, transparent);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: var(--space-4);
}

.spec-desk-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--lu-neutral-0);
  margin: 0 0 var(--space-3) 0;
  line-height: 1.15;
}

.spec-desk-text {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: color-mix(in srgb, var(--lu-neutral-0) 78%, transparent);
  margin: 0 0 var(--space-6) 0;
}

.spec-desk-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--lu-mint);
  color: var(--lu-deep-teal);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.spec-desk-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--lu-mint) 30%, transparent);
}

@media (max-width: 1024px) {
  .corporate-box { grid-template-columns: 1fr; padding: var(--space-7); gap: var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  .spec-desk-cta { transition: none; }
}

/* ---- responsive backdrop -------------------------------------------------
   The full-size photograph is 1584 px wide to cover a desktop viewport, but a
   phone was downloading all of it for a ~390 px screen. tools/media_audit/
   optimize_images.py writes downscaled JPEG renditions; naming a JPEG (not a
   WebP) here keeps the rule working for every browser, because .htaccess
   serves the matching .jpg.webp twin when one exists. */
@media (max-width: 760px) {
  .corporate-section::before {
    background-image: url('../../../images/lifestyle/corporate-backdrop.jpg@760w.jpg');
  }
}