/**
 * Shared section layout system — width, grid, spacing, and surface rhythm
 * for About / Attorneys template pages and reusable content blocks.
 */

/* ── Inner container ─────────────────────────────────────── */
.section-inner,
.intro-section__inner,
.team-grid__inner,
.timeline__inner,
.values-cards__inner,
.stats-row__inner,
.testimonial-carousel__inner,
.faq-accordion__inner,
.cta-section__inner,
.practice-areas__inner,
.services-carousel__inner,
.profile-detail__inner,
.page-hero__inner,
.team-highlight__inner,
.cta-banner__inner,
.site-footer .footer__cta-band-inner,
.site-footer .footer__main-inner,
.site-footer .footer__bar-inner,
.site-header__inner {
  width: min(var(--section-width-default), calc(100% - (var(--section-padding-x) * 2)));
  max-width: none;
  margin-inline: auto;
}

.intro-section__inner,
.team-grid__inner,
.timeline__inner,
.values-cards__inner,
.stats-row__inner,
.testimonial-carousel__inner,
.faq-accordion__inner,
.practice-areas__inner,
.services-carousel__inner,
.profile-detail__inner,
.team-highlight__inner,
.cta-banner__inner {
  padding-inline: 0;
}

.page-hero__inner {
  padding-block: var(--section-padding-y);
  padding-inline: 0;
}

/* ── Section vertical rhythm ─────────────────────────────── */
.intro-section,
.team-grid,
.timeline,
.values-cards,
.stats-row,
.testimonial-carousel,
.faq-accordion,
.cta-section,
.practice-areas,
.services-carousel,
.profile-detail,
.team-highlight,
.cta-banner {
  padding-block: var(--section-padding-y);
}

/* ── Shared section header ───────────────────────────────── */
.section-header {
  margin-bottom: var(--section-block-gap);
}

.section-header__title {
  margin: 0 0 var(--section-header-gap);
  text-wrap: balance;
}

.section-header__intro {
  max-width: var(--section-intro-max);
  margin: 0;
  line-height: 1.75;
}

.section-header__intro:not(:first-child) {
  margin-top: var(--section-header-gap);
}

.section-header--center {
  text-align: center;
}

.section-header--center .section-header__intro {
  margin-inline: auto;
}

/* Gold accent bar on section titles (dark surfaces) */
.team-grid__title,
.stats-row__title,
.testimonial-carousel__title,
.faq-accordion__title,
.practice-areas__title,
.services-carousel__title,
.profile-detail__title,
.team-highlight__name {
  position: relative;
  padding-top: calc(var(--section-header-gap) + 6px);
}

.team-grid__title::before,
.stats-row__title::before,
.testimonial-carousel__title::before,
.faq-accordion__title::before,
.practice-areas__title::before,
.services-carousel__title::before,
.profile-detail__title::before,
.team-highlight__name::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-brand-gold), rgba(215, 166, 66, 0.35));
}

.stats-row__title::before,
.testimonial-carousel__title::before,
.faq-accordion__title::before,
.services-carousel__title::before {
  left: 50%;
  transform: translateX(-50%);
}

.team-grid__intro,
.stats-row__intro,
.testimonial-carousel__intro,
.faq-accordion__intro,
.practice-areas__intro,
.services-carousel__intro {
  max-width: 100%;
  margin-bottom: var(--section-block-gap);
  line-height: 1.75;
}

.stats-row__intro,
.testimonial-carousel__intro,
.faq-accordion__intro,
.services-carousel__intro {
  margin-inline: auto;
}

/* ── Shared card grid ────────────────────────────────────── */
.section-grid,
.team-grid__grid,
.practice-areas__grid,
.values-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--section-card-min), 1fr));
  gap: clamp(var(--space-md), 2.5vw, var(--space-xl));
}

/* ── Shared surface card (values-style) ──────────────────── */
.section-card,
.team-grid__card,
.practice-areas__card,
.services-carousel__card,
.values-cards__card,
.testimonial-carousel__slide,
.faq-accordion__item,
.stats-row__item,
.profile-detail__credentials,
.commitment-section__card,
.land-use-section__card,
.scroll-section__card,
.utilities-finance-section__card,
.homepage-stats__card,
.expertise-section__col {
  background: var(--section-card-bg);
  border: 1px solid var(--section-card-border);
  border-radius: var(--section-card-radius);
  box-shadow: var(--section-card-shadow-inset);
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    border-color var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-expo),
    background-color var(--duration-normal) var(--ease-out-expo);
}

.team-grid__card,
.practice-areas__card,
.services-carousel__card,
.values-cards__card,
.testimonial-carousel__slide,
.stats-row__item,
.profile-detail__credentials,
.land-use-section__card,
.utilities-finance-section__card,
.expertise-section__col {
  padding: var(--section-card-padding-fluid);
}

.section-card:hover,
.team-grid__card:hover,
.practice-areas__card:hover,
.services-carousel__card:hover,
.values-cards__card:hover,
.testimonial-carousel__slide:hover,
.faq-accordion__item:hover,
.stats-row__item:hover,
.commitment-section__card:hover,
.land-use-section__card:hover,
.utilities-finance-section__card:hover,
.homepage-stats__card:hover,
.expertise-section__col:hover {
  transform: translateY(-4px);
  border-color: var(--section-card-border-hover);
  box-shadow: var(--section-card-shadow-hover);
}

/* Card typography on light surfaces */
.team-grid__card-name,
.practice-areas__card-title,
.services-carousel__card-title,
.values-cards__card-title,
.commitment-section__card-title,
.land-use-section__card-title,
.scroll-section__card-title,
.utilities-finance-section__card-title,
.expertise-section__col-title,
.faq-accordion__trigger,
.testimonial-carousel__quote-name,
.stats-row__label,
.homepage-stats__label {
  color: var(--color-brand-black);
}

.team-grid__card-copy,
.practice-areas__card-copy,
.services-carousel__card-copy,
.values-cards__card-copy,
.commitment-section__card-copy,
.land-use-section__card-copy,
.scroll-section__card-copy,
.utilities-finance-section__card-copy,
.expertise-section__col-copy,
.faq-accordion__panel-content,
.testimonial-carousel__quote-text,
.stats-row__suffix {
  color: var(--color-text-secondary);
}

.testimonial-carousel__quote-role,
.faq-accordion__panel-subtitle {
  color: var(--color-text-secondary);
}

.faq-accordion__panel-subtext,
.practice-areas__card-list-item,
.services-carousel__card-list-item {
  color: var(--color-text-muted);
}

/* ── Template page rhythm ────────────────────────────────── */
.template-sections--about,
.template-sections--attorneys,
.template-sections--services {
  display: flex;
  flex-direction: column;
}

.template-sections--about > :not(.intro-section):not(.cta-section),
.template-sections--attorneys > :not(.intro-section):not(.cta-section),
.template-sections--services > :not(.intro-section):not(.cta-section) {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.template-sections--about .intro-section,
.template-sections--attorneys .intro-section,
.template-sections--services .intro-section {
  background:
    linear-gradient(180deg, var(--color-warm-paper) 0%, var(--color-surface) 100%);
}

.template-sections--services .services-carousel {
  background: var(--section-surface-dark-alt);
  min-height: 100svh;
}

.template-sections--about .timeline,
.template-sections--attorneys .profile-detail,
.template-sections--about .testimonial-carousel {
  background: var(--section-surface-dark-alt);
}

.template-sections--about .stats-row,
.template-sections--attorneys .stats-row {
  background: var(--section-surface-brand);
}

/* Split layouts */
.intro-section--has-media .intro-section__inner,
.profile-detail__inner,
.team-highlight__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  gap: var(--section-grid-gap);
  align-items: start;
}

.profile-detail__inner,
.team-highlight__inner {
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.profile-detail__media {
  position: sticky;
  top: calc(var(--space-2xl) + 80px);
}

.profile-detail__credentials {
  padding: var(--section-card-padding-fluid);
}

.profile-detail__credential-label {
  color: var(--color-brand-green);
}

.profile-detail__credential-value,
.profile-detail__item-value {
  color: var(--color-text-secondary);
}

.profile-detail__item-label {
  color: var(--color-brand-black);
}

.profile-detail__credential {
  border-bottom-color: rgba(46, 56, 53, 0.08);
}

/* Stats cards */
.stats-row__grid {
  gap: clamp(var(--space-md), 2.5vw, var(--space-xl));
}

/* Testimonial track */
.testimonial-carousel__track {
  max-width: 52rem;
  margin-inline: auto;
}

/* FAQ spacing */
.faq-accordion__list {
  gap: var(--space-md);
}

.faq-accordion__item.is-active {
  border-color: var(--section-card-border-hover);
}

/* CTA banner alignment */
.cta-banner__inner {
  text-align: center;
}

.cta-banner__heading {
  text-wrap: balance;
}

@media (max-width: 768px) {
  .section-grid,
  .team-grid__grid,
  .practice-areas__grid,
  .stats-row__grid {
    grid-template-columns: 1fr;
  }

  .profile-detail__inner,
  .team-highlight__inner {
    grid-template-columns: 1fr;
  }

  .profile-detail__media {
    position: static;
    max-width: 320px;
    margin-inline: auto;
  }

  .team-highlight__media {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-card,
  .team-grid__card,
  .practice-areas__card,
  .services-carousel__card,
  .values-cards__card,
  .testimonial-carousel__slide,
  .faq-accordion__item,
  .stats-row__item,
  .commitment-section__card,
  .land-use-section__card,
  .utilities-finance-section__card,
  .homepage-stats__card,
  .expertise-section__col {
    transition: none;
  }

  .section-card:hover,
  .team-grid__card:hover,
  .practice-areas__card:hover,
  .services-carousel__card:hover,
  .values-cards__card:hover,
  .testimonial-carousel__slide:hover,
  .faq-accordion__item:hover,
  .stats-row__item:hover,
  .commitment-section__card:hover,
  .land-use-section__card:hover,
  .utilities-finance-section__card:hover,
  .homepage-stats__card:hover,
  .expertise-section__col:hover {
    transform: none;
  }
}