/* =========================================================================
   Front page (Home-v2 comp)
   Every block below maps 1:1 to a section of the future front-page.php.
   Loaded last, after main.css and components.css.
   Measurements in the comments are read off Home-v2.jpg at its 1366px width.
   ========================================================================= */

/* The v2 comp stacks its sections much closer than v1 did — between the
   reviews and the practice grid it leaves barely 55px. Halving the token
   rather than matching it keeps the page from reading as one dense slab. */
.page--home {
  --space-section: clamp(2.25rem, 4.4vw, 3.75rem);
}


/* -------------------------------------------------------------------------
   Hero — black copy panel beside a full-bleed photograph
   The comp splits the band 534/832 at 1366 (39.1% / 60.9%) and runs it
   609px tall, i.e. 44.6vw.
   ------------------------------------------------------------------------- */

.hero {
  background: var(--color-black);
  color: var(--color-white);

  .hero__inner {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "panel";
  }

  .hero__media {
    grid-area: media;
    /* Stacked, the photo is a band rather than a column; the comp's crop is
       only meaningful once it sits beside the copy. */
    aspect-ratio: 16 / 9;
  }

  .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
  }

  .hero__panel {
    grid-area: panel;
    display: grid;
    align-content: center;
    gap: clamp(1.25rem, 2.4vw, 2rem);
    /* 61/1366 = 4.47vw — the comp indents the hero copy slightly tighter
       than the header container, and holds that indent as the panel narrows. */
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.125rem, 4.47vw, 3.8125rem);
  }

  .hero__title {
    max-width: 12em;
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: clamp(1.875rem, 2.93vw, 2.75rem);
    font-weight: 700;
    line-height: 1.08;
  }

  .hero__subtitle {
    max-width: 15em;
    font-size: clamp(1.25rem, 1.98vw, 1.6875rem);
    font-weight: 700;
    line-height: 1.18;
  }

  .hero__text {
    max-width: 18em;
    font-size: clamp(1.0625rem, 1.68vw, 1.4375rem);
    font-weight: 600;
    line-height: 1.35;
  }

  .hero__cta {
    justify-self: start;
    /* 434px at 1366 — the comp's pill is wider than its label needs. */
    min-width: min(100%, 27.125rem);
    margin-top: clamp(0.5rem, 1.5vw, 1rem);
  }

  @media (min-width: 60rem) {
    .hero__inner {
      grid-template-columns: 39.1fr 60.9fr;
      grid-template-areas: "panel media";
      min-height: clamp(24rem, 44.6vw, 42rem);
    }

    .hero__media {
      aspect-ratio: auto;
    }
  }
}


/* -------------------------------------------------------------------------
   Attorney introduction — portrait and awards beside the biography
   Comp: portrait 376px, gutter 100px, copy 732px, the three summing to the
   1200px container.
   ------------------------------------------------------------------------- */

.attorney {
  .attorney__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(1.75rem, 4vw, 3rem);

    @media (min-width: 55rem) {
      grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr);
      gap: clamp(2rem, 7.3vw, 6.25rem);
    }
  }

  .attorney__aside {
    display: grid;
    gap: clamp(1rem, 2vw, 1.5rem);
    justify-items: center;

    @media (min-width: 55rem) {
      justify-items: stretch;
    }
  }

  .attorney__portrait {
    width: 100%;
    max-width: 23.5rem;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .attorney__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  .attorney__badge {
    width: auto;
    height: clamp(3.75rem, 6vw, 5.375rem);
  }

  .attorney__name {
    color: var(--color-black);
    font-size: clamp(1.75rem, 2.93vw, 2.5rem);
    font-weight: 400;
  }

  .attorney__bio {
    margin-top: clamp(1.25rem, 2.6vw, 2.25rem);
    color: var(--color-ink);
    font-size: clamp(1.0625rem, 1.39vw, 1.1875rem);
    line-height: 1.65;
  }

  /* The four outlined pills are shortcuts into the practice-area cards, so
     they are links rather than decoration. */
  .attorney__tags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: clamp(0.75rem, 1.3vw, 1.125rem);
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
  }

  .attorney__tag {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--color-black);
    border-radius: 0.625rem;
    color: var(--color-black);
    font-size: clamp(1rem, 1.39vw, 1.1875rem);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background: var(--color-black);
      color: var(--color-white);
    }
  }
}


/* -------------------------------------------------------------------------
   Firm summary — heading over three credentials
   ------------------------------------------------------------------------- */

.firm {
  text-align: center;

  .firm__title {
    color: var(--color-black);
    font-size: clamp(1.75rem, 2.93vw, 2.5rem);
    font-weight: 400;
  }

  .firm__stats {
    display: grid;
    /* Stacked rather than auto-fit: two columns strand the third credential
       under the first, which reads as a mistake rather than a row. */
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 4vw, 2.5rem);
    margin-top: clamp(2rem, 5vw, 4rem);

    /* Equal thirds break "New York • Washington, D.C. • Maryland" onto two
       lines; the comp keeps it whole, so the columns take their own width. */
    @media (min-width: 62rem) {
      grid-template-columns: repeat(3, auto);
      justify-content: space-between;
    }
  }
}

.stat {
  display: grid;
  gap: 0.5rem;

  .stat__value {
    color: var(--color-black);
    font-size: clamp(1.0625rem, 1.54vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.3;
  }

  /* The comp sets only this sub-label in the serif — it reads as a caption
     under the sans figure above it. */
  .stat__label {
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: clamp(0.9375rem, 1.17vw, 1rem);
    line-height: 1.4;
  }
}


/* -------------------------------------------------------------------------
   "Speak With a Family Law Attorney" band
   Replaces the v1 .callout on this template; .callout stays in
   components.css because the interior pages still use it.
   ------------------------------------------------------------------------- */

.speak-band {
  padding-block: clamp(2rem, 4.4vw, 3.75rem);
  background: var(--color-black);
  color: var(--color-white);

  .speak-band__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);

    @media (min-width: 48rem) {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .speak-band__copy {
    max-width: 20em;
    font-size: clamp(1.25rem, 2.2vw, 1.875rem);
    /* 53px leading on 30px type in the comp. */
    line-height: 1.75;
  }

  .speak-band__title {
    font-weight: 700;
  }

  .speak-band__actions {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }

  .speak-band__action {
    display: grid;
    place-items: center;
    /* The glyphs are the tap target, so they carry the 44px minimum
       themselves rather than relying on a padded wrapper. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--color-white);
    transition: opacity 0.2s ease;

    svg {
      width: clamp(3.25rem, 8.4vw, 7.1875rem);
      height: clamp(3.25rem, 8.4vw, 7.1875rem);
    }

    &:hover {
      opacity: 0.75;
    }
  }
}


/* -------------------------------------------------------------------------
   Google reviews
   A static reproduction of the widget in the comp — no third-party embed, so
   the block styles and ports cleanly. Copy is editable in the markup.
   ------------------------------------------------------------------------- */

.reviews {
  .reviews__head {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);

    @media (min-width: 48rem) {
      grid-template-columns: minmax(0, 1fr) auto;
    }
  }

  .reviews__title {
    color: var(--color-black);
    font-size: clamp(1.75rem, 2.93vw, 2.5rem);
    font-weight: 400;
  }

  .reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
  }

  .reviews__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(0.875rem, 1.2vw, 1rem);
  }
}

.review-score {
  display: grid;
  justify-items: end;
  gap: 0.125rem;

  .review-score__value {
    color: var(--color-black);
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.34vw, 2rem);
    font-weight: 700;
    line-height: 1;
  }

  .review-score__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-ink-soft);
    font-size: 0.875rem;
  }

  .review-score__count {
    padding-inline-start: 0.5rem;
    border-inline-start: 1px solid var(--color-rule);
  }
}

.stars {
  display: inline-flex;
  gap: 0.0625rem;
  color: var(--color-gold);

  svg {
    width: 1rem;
    height: 1rem;
  }
}

.review-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.875rem;
  padding: clamp(1rem, 1.7vw, 1.4375rem);
  border: 1px solid var(--color-rule);
  border-radius: 0.5rem;
  background: var(--color-white);

  .review-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .review-card__rating {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--color-gold);
    font-size: 0.9375rem;
    font-weight: 500;
  }

  .review-card__date {
    color: var(--color-ink-soft);
    font-size: 0.875rem;
  }

  .review-card__text {
    color: var(--color-ink);
    font-size: 0.875rem;
    line-height: 1.6;
  }

  .review-card__more {
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
  }

  .review-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.75rem;
  }

  .review-card__author {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--color-ink-soft);
    font-size: 0.875rem;
  }

  .review-card__avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #9aa0a6;
    color: var(--color-white);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .review-card__source {
    width: 1.25rem;
    height: 1.25rem;
  }
}


/* -------------------------------------------------------------------------
   Quote band
   Same block as components.css, re-pointed at the v2 photograph. The comp
   sets white type straight onto a pale image; the scrim below is added so the
   text clears WCAG AA — remove it only if the photograph is darkened first.
   ------------------------------------------------------------------------- */

.quote--hands {
  /* 56vw in the comp; the base block is set for the shallower v1 photograph. */
  min-height: clamp(16rem, 47vw, 40rem);
  background-image:
    linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)),
    url("../img/quote-hands-800.jpg");
  background-position: center 45%;

  .quote__text {
    max-width: 16em;
    margin-bottom: 0;
    color: var(--color-white);
    font-size: clamp(1.5rem, 2.93vw, 2.5rem);
    line-height: 1.3;
  }

  @media (min-width: 50rem) {
    background-image:
      linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)),
      url("../img/quote-hands.jpg");
  }
}


/* -------------------------------------------------------------------------
   High-asset divorce — long-form copy
   .prose lives in components.css; the comp runs a wider measure here than the
   interior pages do, but not the full 1125px it draws.
   ------------------------------------------------------------------------- */

.high-asset {
  .prose {
    max-width: 56rem;

    h2 {
      font-weight: 400;
    }

    /* The comp drops the H3 onto DM Sans at almost the H2's size — it reads
       as a deck under the heading rather than a subordinate heading. */
    h3 {
      margin-top: 0;
      font-family: var(--font-sans);
      font-size: clamp(1.25rem, 2.2vw, 1.875rem);
      font-weight: 400;
    }
  }
}


/* -------------------------------------------------------------------------
   Contact — the lead form beside the call/text panel
   ------------------------------------------------------------------------- */

.contact {
  .contact__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: clamp(2rem, 5vw, 4rem);

    @media (min-width: 60rem) {
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
  }

  .contact__title {
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
    color: var(--color-black);
    font-size: clamp(1.75rem, 2.64vw, 2.25rem);
    font-weight: 700;
    text-align: center;
  }

  .contact__aside {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);

    /* Aligned to the form's first field rather than the column top, which is
       where the comp sits it. */
    @media (min-width: 60rem) {
      margin-block-start: clamp(2rem, 5vw, 4.5rem);
    }
  }

  .contact__aside-copy {
    max-width: 14em;
    font-size: clamp(1.25rem, 2.2vw, 1.875rem);
    line-height: 1.4;
  }

  .contact__aside-title {
    display: block;
    font-weight: 700;
  }

  .contact__channels,
  .contact__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 2.6vw, 2.25rem);
  }

  .contact__channel,
  .contact__social-link {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--color-black);
    transition: opacity 0.2s ease;

    &:hover {
      opacity: 0.7;
    }
  }

  .contact__channel svg {
    width: clamp(3.25rem, 8.1vw, 6.875rem);
    height: clamp(3.25rem, 8.1vw, 6.875rem);
  }

  .contact__social-link svg {
    width: clamp(2.5rem, 5.3vw, 4.5rem);
    height: clamp(2.5rem, 5.3vw, 4.5rem);
  }
}


/* -------------------------------------------------------------------------
   FAQ
   <details> rather than scripted panels: it keeps the block dependency-free
   and survives the move into a WordPress block template.
   ------------------------------------------------------------------------- */

.faq {
  .faq__title {
    color: var(--color-black);
    font-size: clamp(1.75rem, 2.93vw, 2.5rem);
    font-weight: 400;
    text-align: center;
  }

  .faq__list {
    display: grid;
    gap: 0.75rem;
    max-width: 52rem;
    margin: clamp(1.75rem, 4vw, 3rem) auto 0;
  }
}

.faq-item {
  border: 1px solid var(--color-rule);
  border-radius: 0.75rem;

  .faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 1rem clamp(1rem, 2vw, 1.5rem);
    color: var(--color-black);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.39vw, 1.1875rem);
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;

    /* Safari still paints the disclosure triangle without this. */
    &::-webkit-details-marker {
      display: none;
    }
  }

  .faq-item__marker {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
  }

  .faq-item__answer {
    padding: 0 clamp(1rem, 2vw, 1.5rem) 1.25rem;
    color: var(--color-ink-soft);
    font-size: clamp(1rem, 1.3vw, 1.0625rem);
    line-height: 1.7;
  }

  &[open] .faq-item__marker {
    transform: rotate(45deg);
  }
}