/* ═══════════════════════════════════════════════════════════════════════════
   Sosoares manufacturer overview — additive layer
   ---------------------------------------------------------------------------
   Loaded by index.html for the #sosoares-overview route only. Adds the three
   components the Sosoares manufacturer page needs that the Schüco and Renson
   overview pages never used:

     .sos-solution-tiles   the "In KR Solutions" tile row that lands on the
                           current Windows & Doors sections
     .sos-fam-grid         the wider Sosoares product-family reference list
     .sos-accred-list      the accreditation list inside the dark band

   Every other component on that page reuses the existing Schüco overview
   classes (.sch-intro, .sch-solution-groups, .sch-hybrid-card, .wd-sci-tiles,
   .energy-stats) unchanged, so the two manufacturer pages stay identical in
   structure and look. Nothing here overrides an existing rule.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── In KR Solutions ──────────────────────────────────────────────────────── */
.sos-solution-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-5);
}
.sos-solution-tile {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sos-solution-tile:hover,
.sos-solution-tile:focus-visible {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.sos-solution-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.sos-solution-tile-icon { color: var(--color-accent); line-height: 0; }
.sos-solution-tile-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--color-text);
}
.sos-solution-tile-text {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.sos-solution-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── Accreditation list inside the dark sustainability band ───────────────── */
.sos-accred-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.sos-accred-list li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.92rem;
  line-height: 1.6;
}
.sos-accred-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--color-accent);
}

/* ── Wider Sosoares product families ──────────────────────────────────────── */
.sos-fam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-8) var(--space-10);
}
.sos-fam-heading {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.sos-fam-list { margin: 0; display: grid; gap: var(--space-3); }
.sos-fam-row {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.sos-fam-row dt {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.sos-fam-row dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  #page-sosoares-overview .sos-sustain-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-10) !important;
  }
}
@media (max-width: 700px) {
  .sos-solution-tiles { gap: var(--space-4); }
  .sos-solution-tile { padding: var(--space-5); }
  .sos-fam-grid { gap: var(--space-6); }
}
@media (max-width: 380px) {
  .sos-fam-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Brand mark in the intro band ─────────────────────────────────────────────
   The supplied logo-sosoares.png is white artwork, the same as logo-schueco.png.
   Use the identical treatment the product pages apply via .tp-sch-logo so the
   mark reads correctly in both themes without touching the pinned asset. */
.sos-brand-logo {
  width: 150px;
  height: auto;
  filter: brightness(0.17);   /* supplied mark is white artwork; unmodified file */
}
[data-theme='dark'] .sos-brand-logo { filter: none; opacity: 0.88; }

/* ── Hero legibility ──────────────────────────────────────────────────────────
   The Casa Santa Pola dusk frame is bright across the upper band, so the shared
   hero wash is deepened for this route only to keep the breadcrumb and title at
   WCAG AA against the sky. */
#page-sosoares-overview .page-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(20, 18, 16, 0.62) 0%,
    rgba(20, 18, 16, 0.38) 45%,
    rgba(20, 18, 16, 0.68) 100%
  );
}
#page-sosoares-overview .page-hero-breadcrumb,
#page-sosoares-overview .page-hero-breadcrumb a {
  color: rgba(232, 228, 220, 0.86) !important;
}
#page-sosoares-overview .page-hero-breadcrumb a:hover { color: #E8E4DC !important; }

/* ── Line-drawing plate treatment ─────────────────────────────────────────────
   The Sosoares catalogue supplies cross-sections and jamb details as tall,
   narrow line drawings on white. The shared `.tp-shot--tech` / `.tp-gal-fig`
   rules `object-fit: cover`, which is right for the Schüco studio renders but
   would slice a 466 × 912 section into an unreadable strip. Drawings therefore
   get their own plated modifier: contained, padded, on a light plate in both
   themes so the linework keeps its contrast. Nothing here changes the Schüco
   pages — both selectors require the `--dwg` class this build only emits for
   assets the manifest marks `kind: drawing`. */
.tp-shots .tp-shot--dwg img,
.tp-gal-fig--dwg img {
  object-fit: contain;
  padding: var(--space-4);
  background: #FFFFFF;
  border: 1px solid var(--color-divider);
}
[data-theme='dark'] .tp-shots .tp-shot--dwg img,
[data-theme='dark'] .tp-gal-fig--dwg img {
  /* Keep the white plate: the drawings are black-line artwork with no alpha, so
     inverting them would misrepresent the supplied asset. A slightly dimmed
     plate stops it glaring against the dark page. */
  background: #F2F0EC;
  opacity: 0.94;
  border-color: var(--color-divider);
}