/* Codex 48 — presentation confined to the eleven Applications pages. */
.c48-applications {
  --application-sky: linear-gradient(90deg, #dff4fa 0%, #f9fdfe 34%, #fff 50%, #f9fdfe 66%, #dff4fa 100%);
  background: var(--application-sky);
}

/* The page-wide gradient stays continuous across the former light sections.
   Existing dark proof/CTA bands and individual readable cards are retained. */
.c48-applications :is(.application-breadcrumb, .application-hero, .application-guides, .application-faq,
  .product-hero, .product-intro, .product-section-tinted, .product-faq, .product-related,
  .technical-hero, .technical-overview, .technical-section, .technical-faq, .technical-related,
  .hub-breadcrumb, .hub-hero, .hub-intro, .hub-matrix, .hub-projects-exterior,
  .hub-materials, .hub-support, .hub-process, .hub-faq) {
  background: transparent;
}

/* Same framed, numbered, three-column principle as the existing Interior TOC. */
.c48-applications .c48-toc-shell { padding-block: 30px 44px; }
.c48-applications .application-toc {
  position: static;
  padding: 26px 30px;
  border: 1px solid #dfe8eb;
  background: #fff;
  box-shadow: 0 16px 44px rgb(30 55 63 / 8%);
  scroll-margin-top: 118px;
}
.c48-applications .application-toc > span { margin-bottom: 18px; color: #536168; }
.c48-applications .application-toc nav {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 26px;
}
.c48-applications .application-toc nav a {
  grid-template-columns: 25px minmax(0, 1fr);
  padding: 8px 0;
  border: 0;
  color: #344249;
  font-size: .79rem;
}
.c48-applications .application-toc-cta { margin-top: 18px; font-size: .79rem; }
.c48-applications .c48-horizontal-toc {
  padding: 30px 0 44px;
  background: transparent;
  color: #10171b;
}
.c48-applications .c48-horizontal-toc .technical-toc-grid {
  display: block;
  box-sizing: border-box;
  padding: 26px 30px;
  border: 1px solid #dfe8eb;
  background: #fff;
  box-shadow: 0 16px 44px rgb(30 55 63 / 8%);
}
.c48-applications .c48-horizontal-toc .technical-eyebrow { color: #536168; margin-bottom: 10px; }
.c48-applications .c48-horizontal-toc h2 { font-size: 1.05rem; margin-bottom: 18px; }
.c48-applications .c48-horizontal-toc ol {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px 26px;
  border: 0;
  background: transparent;
}
.c48-applications .c48-horizontal-toc a {
  grid-template-columns: 25px minmax(0, 1fr) 16px;
  min-height: 0;
  padding: 8px 0;
  background: transparent;
  color: #344249;
  font-size: .79rem;
}
.c48-applications .c48-horizontal-toc a :is(b, i) { color: #0c789c; }
.c48-applications :is(.application-toc, .c48-horizontal-toc) a:hover { color: #087fa7; }
.c48-applications :is(.application-toc, .c48-horizontal-toc) a:focus-visible {
  outline: 3px solid #087fa7;
  outline-offset: 4px;
  border-radius: 2px;
}

/* Free the old sidebar width, keeping paragraphs comfortable to read. */
.c48-applications .application-reading-grid { display: block; padding-top: 64px; }
.c48-applications .application-section { scroll-margin-top: 118px; }
.c48-applications .application-section-heading { max-width: 900px; margin-inline: auto; }
.c48-applications .application-section-body { padding-left: 0; }
.c48-applications .application-section-body > :is(p, h3, ul, .application-callout) {
  max-width: 840px;
  margin-inline: auto;
}
.c48-applications .product-section { padding-inline: 0; }
.c48-applications .product-toc { box-sizing: border-box; }
.c48-applications .technical-section { display: block; padding-inline: 0; }
.c48-applications .technical-section-heading { position: static; max-width: 840px; margin: 0 auto 32px; }
.c48-applications .technical-section-body > :not(.section-photos) { max-width: 840px; margin-inline: auto; }

/* Large edge-to-edge photographs. Natural aspect ratios avoid any distortion
   or loss of important railing details, including portrait stair/landing views. */
.c48-applications .section-photos.section-photos {
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  width: 100%;
  margin-top: 38px;
}
.c48-applications .section-photos .section-photo,
.c48-applications .application-inline-media,
.c48-applications :is(.product-gallery-grid, .technical-gallery-grid) figure {
  box-sizing: border-box;
  width: min(75%, var(--application-photo-max, 1000px));
  max-width: 100%;
  margin-inline: auto !important;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 3px;
}
.c48-applications .section-photo .section-photo-link {
  display: block;
  flex: none;
  padding: 0;
  overflow: hidden;
  background: transparent;
}
.c48-applications .section-photos .section-photo .section-photo-link img,
.c48-applications .application-inline-media img,
.c48-applications :is(.product-gallery-grid, .technical-gallery-grid) img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
}
.c48-applications .application-inline-media { margin-block: 42px 4px; background: #fff; }
.c48-applications .section-photos .section-photo .section-photo-link img {
  aspect-ratio: var(--application-photo-ratio, auto);
  object-position: var(--application-photo-position, center);
  transform: scale(var(--application-photo-zoom, 1));
  transform-origin: var(--application-photo-origin, center);
}
.c48-applications .application-inline-media figcaption { padding: 16px 18px; }
.c48-applications :is(.product-gallery-grid, .technical-gallery-grid) {
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
}
.c48-applications .technical-gallery-grid figure > div { display: block; min-height: 0; }
.c48-applications :is(.product-gallery-grid, .technical-gallery-grid) figcaption { padding: 18px 20px; }

/* The Applications hub gives each project a broad photograph beside its copy. */
.c48-applications .hub-card-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.c48-applications .hub-project-card,
.c48-applications .hub-card-grid-interior .hub-project-card:first-child {
  display: grid;
  grid-column: auto;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  align-items: stretch;
}
.c48-applications .hub-project-card figure,
.c48-applications .hub-card-grid-interior .hub-project-card:first-child figure {
  aspect-ratio: auto;
  height: auto;
  min-width: 0;
}
.c48-applications .hub-project-card figure img {
  height: 100%;
  min-height: 340px;
  aspect-ratio: 1.65;
  object-fit: cover;
  object-position: center;
}
.c48-applications .hub-project-card-copy { justify-content: center; padding: 28px; }
.c48-applications .hub-project-card-copy > b { margin-top: 0; }
.c48-applications .hub-project-card.c48-hub-panorama { grid-template-columns: minmax(0, 1fr); }
.c48-applications .hub-project-card.c48-hub-portrait { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); max-width: 1000px; margin-inline: auto; }
.c48-applications .hub-project-card:is(.c48-hub-panorama, .c48-hub-portrait) figure img { height: auto; min-height: 0; aspect-ratio: auto; }
.c48-applications .hub-project-card.c48-hub-portrait figure { align-self: start; }
.c48-applications .hub-project-card.c48-hub-panorama .hub-project-card-copy { padding: 28px 34px; }
.c48-applications .hub-support-grid { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 36px; }
.c48-applications .hub-support figure { padding: 0; overflow: hidden; }
.c48-applications .hub-support figure img { height: auto; aspect-ratio: auto; }
.c48-applications .hub-support figcaption { padding: 16px 18px; }

@media (max-width: 980px) {
  .c48-applications :is(.application-section, .technical-section, .product-section, .application-toc, .technical-toc) { scroll-margin-top: 190px; }
  .c48-applications .application-toc nav,
  .c48-applications .c48-horizontal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c48-applications .section-photos .section-photo,
  .c48-applications .application-inline-media,
  .c48-applications :is(.product-gallery-grid, .technical-gallery-grid) figure { width: min(100%, var(--application-photo-max, 1000px)); }
  .c48-applications .hub-project-card,
  .c48-applications .hub-project-card.c48-hub-portrait,
  .c48-applications .hub-card-grid-interior .hub-project-card:first-child,
  .c48-applications .hub-support-grid { grid-template-columns: minmax(0, 1fr); }
  .c48-applications .hub-project-card figure img { height: auto; min-height: 0; aspect-ratio: auto; }
}
@media (max-width: 680px) {
  .c48-applications .c48-toc-shell { padding-block: 24px 30px; }
  .c48-applications .application-toc,
  .c48-applications .c48-horizontal-toc .technical-toc-grid { padding: 22px 18px; }
  .c48-applications .application-toc nav,
  .c48-applications .c48-horizontal-toc ol { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .c48-applications .application-toc nav a,
  .c48-applications .c48-horizontal-toc a { padding-block: 12px; }
  .c48-applications .section-photos { gap: 24px; }
}