/* =============================================================================
   Avielon Studio · page-patterns.css
   Shared large-scale composition for public marketing pages.

   Load order:
     tokens.css -> site.css -> components.css -> page-patterns.css -> page CSS

   This file owns page/section composition that can recur on the homepage,
   service pages and other marketing pages. Content-specific visuals and one-off
   section treatments stay in the page stylesheet.
============================================================================= */

/* ---- Page shell + section rhythm ----------------------------------------- */
.studio-page { overflow: clip; }
.studio-page section { position: relative; }
.studio-page p { text-wrap: pretty; }
.page-section { border-top: 1px solid var(--color-border); }

/* Components define the section-head structure; page-patterns owns the larger
   vertical spacing between the heading block and the section body. */
.section-head { margin-bottom: clamp(2.6rem, 5vw, 4.5rem); }
.section-head--split { margin-bottom: clamp(2.8rem, 6vw, 5rem); }

/* ---- Hero ---------------------------------------------------------------- */
.hero-section {
  padding-block: clamp(2rem, 4vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
  background: var(--gradient-hero-glow);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(22rem, .84fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}
.hero-grid.alt--columns { grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr); }
.hero-content { display: grid; gap: 1.55rem; min-width: 0; }
.hero-content .eyebrow { margin-bottom: .2rem; }
.hero-title {
  max-width: 15ch;
  font-size: clamp(3.15rem, 2rem + 4.8vw, 6.2rem);
  line-height: .99;
  letter-spacing: -.035em;
}
.hero-lead { margin: 0; max-width: 61ch; }
.hero-visual { min-width: 0; }
.hero-panel {
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  padding: clamp(1.5rem, 4vw, 2.3rem);
  box-shadow: var(--shadow-elevated);
}
.hero-note {
  margin: .2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: .9rem;
  line-height: 1.55;
  max-width: 64ch;
}
.hero-meta {
  list-style: none;
  margin: 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.2rem;
}
.hero-meta li {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);

  display: inline-flex;
    align-items: center;
    gap: .55rem;
}
/*.hero-meta li + li::before {
  content: '·';
  margin-right: .65rem;
  color: var(--color-border);
}*/
.hero-meta li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* ---- Reusable action groups ---------------------------------------------- */
.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: .15rem;
}
.response-note {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--color-text-secondary);
  letter-spacing: .05em;
}

/* ---- Mid-page CTA band ---------------------------------------------------- */
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}
.cta-band__copy { display: grid; gap: 1rem; }
.cta-band__copy h2 { max-width: 16ch; }
.cta-band__aside { display: grid; gap: 1.2rem; }
.cta-band__aside p { margin: 0; color: var(--color-text-secondary); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
  gap: clamp(3rem, 7vw, 7rem);
}
.faq-layout .section-head { margin-bottom: 0; max-width: 34ch; }

/* ---- Related content ------------------------------------------------------ */
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.related-card .card__foot { margin-top: 1.1rem; }

/* ---- Closing CTA ---------------------------------------------------------- */
.closing-cta {
  padding-block: clamp(5rem, 11vw, 9.5rem);
  background: var(--gradient-hero);
}
.closing-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}
.closing-cta__title {
  font-size: clamp(3rem, 2rem + 4vw, 5.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  max-width: 14ch;
}
.closing-cta__aside { display: grid; gap: 1.3rem; }
.closing-cta__aside p { margin: 0; color: var(--color-text-secondary); }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid,
  .hero-grid.alt--columns,
  .cta-band__inner,
  .faq-layout,
  .closing-cta__inner { grid-template-columns: 1fr; }

  .related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero-title { font-size: clamp(2.8rem, 13vw, 4.6rem); }
  .action-group .cta { width: 100%; }
  .hero-meta { display: grid; gap: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-page * { scroll-behavior: auto; }
}




.page-section-nav { position: sticky; top: 68px; z-index: 80; background: color-mix(in srgb, var(--color-background) 90%, transparent); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(10px); }
.page-section-nav__inner { min-height: 48px; display: flex; align-items: center; gap: 2rem; overflow-x: auto; scrollbar-width: none; }
.page-section-nav__inner::-webkit-scrollbar { display: none; }
.page-section-nav__label { flex: none; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
.page-section-nav__links { display: flex; align-items: center; gap: 1.5rem; }
.page-section-nav__links a { position: relative; flex: none; padding: 14px 0 13px; font-size: .78rem; font-weight: 600; color: var(--color-text-secondary); }
.page-section-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.page-section-nav__links a:hover, .page-section-nav__links a[aria-current="location"] { color: var(--color-text-primary); }
.page-section-nav__links a[aria-current="location"]::after { transform: scaleX(1); }

@media (max-width: 820px) {
    .page-section-nav { top: 68px; }
    .page-section-nav__label { display: none; }
}