/* Page CSS for About, Contact and the legal pages (Fair Housing, Accessibility, Privacy). */
@layer page {

  /* ===================== About ===================== */

  /* How it started: story + framed photo of Odis and Brad */
  .about-story__grid { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 900px) {
    .about-story__grid { grid-template-columns: 1.1fr .9fr; gap: var(--space-8); }
  }
  .about-story__text h2 { max-width: 20ch; }
  .about-story__tagline {
    font-family: var(--font-script);
    color: var(--color-brand);
    font-size: 1.15em;
    white-space: nowrap;
  }

  .about-frame { margin: 0; max-width: 480px; justify-self: center; width: 100%; }
  /* White "print" border around the 4:3 family photo, tilted slightly like a framed snapshot. */
  .about-frame__card {
    position: relative;
    margin: 0;
    background: var(--color-surface);
    border: 10px solid var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--color-line), var(--shadow-lg);
    transform: rotate(-1.5deg);
  }
  .about-frame__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 516 / 387;
    object-fit: cover;
    border-radius: 6px;
  }
  .about-frame__caption {
    margin-top: var(--space-5);
    font-size: .875rem;
    color: var(--color-muted);
    text-align: center;
  }
  @media (prefers-reduced-motion: no-preference) {
    .about-frame__card { transition: transform .4s var(--ease); }
    .about-frame:hover .about-frame__card { transform: rotate(0deg); }
  }

  /* A new generation: Brad's portrait on the left (the story section above has its photo on the
     right, so the page alternates); stacked, photo first, on mobile. */
  .about-generation__grid { display: grid; gap: var(--space-7); align-items: center; }
  @media (min-width: 900px) {
    .about-generation__grid { grid-template-columns: .8fr 1.2fr; gap: var(--space-8); }
  }
  .about-frame--portrait { max-width: 400px; }
  @media (max-width: 599px) { .about-frame--portrait { max-width: 300px; } }
  .about-frame--portrait .about-frame__card { transform: rotate(1.5deg); }
  .about-frame--portrait .about-frame__photo { aspect-ratio: 4 / 5; object-position: 50% 12%; }
  .about-generation__inner { min-width: 0; }
  .about-generation__inner {
    position: relative;
    padding-left: var(--space-5);
    border-left: 3px solid var(--color-honey);
  }
  @media (min-width: 768px) { .about-generation__inner { padding-left: var(--space-7); } }

  /* Values */
  .about-values__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  }
  .about-value { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
  .about-value__title { font-size: var(--step-2); margin: var(--space-2) 0 0; }
  .about-value p { margin: 0; color: var(--color-muted); }

  /* Team */
  .about-team__grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
  .about-team .agent-card { overflow-wrap: anywhere; }

  /* Tribute */
  .about-tribute__inner { padding-block: var(--space-2); }
  .about-tribute .roof-divider { margin-top: 0; }
  /* Low-res (200x250) client portrait: never shown wider than its native 200px. */
  .about-tribute__portrait {
    display: block;
    width: 160px;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin: 0 auto var(--space-5);
    border: 6px solid var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--color-line), var(--shadow);
  }
  @media (min-width: 768px) { .about-tribute__portrait { width: 180px; } }
  .about-tribute__heading { font-size: var(--step-3); max-width: 24ch; margin-inline: auto; }
  .about-tribute p { max-width: 58ch; margin-inline: auto; }
  .about-tribute__tagline { font-size: var(--step-2); margin-top: var(--space-4); }
  .about-tribute__confirm { font-size: .875rem; }

  /* ===================== Contact ===================== */
  .contact-page__grid { display: grid; gap: var(--space-6); align-items: start; }
  @media (min-width: 960px) {
    .contact-page__grid { grid-template-columns: .9fr 1.1fr; gap: var(--space-7); }
  }
  .contact-page__info { display: grid; gap: var(--space-5); min-width: 0; }
  .contact-page__form { min-width: 0; }

  .contact-card__heading { font-size: var(--step-3); margin: 0; }
  .contact-card__sub { margin: .25rem 0 var(--space-5); color: var(--color-sage-text); font-weight: 700; }
  .contact-card__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
  .contact-card__list li { display: flex; align-items: flex-start; gap: var(--space-4); margin: 0; min-width: 0; }
  .contact-card__list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .contact-card__label { display: block; font-size: .875rem; font-weight: 700; color: var(--color-muted); }
  .contact-card__list a {
    display: inline-block;
    padding-block: .15rem;
    font-weight: 800;
    font-size: var(--step-1);
    color: var(--color-ink);
    text-decoration-color: rgb(142 0 0 / .35);
  }
  .contact-card__list a:hover { color: var(--color-brand); }
  .contact-card__addr { display: inline-block; line-height: 1.35; }
  .contact-card__text { display: block; font-weight: 700; }

  .map-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
    padding: var(--space-5);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-sage-tint);
    color: var(--color-sage);
  }
  .map-placeholder__art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .45; }
  .map-placeholder__road { stroke: var(--color-surface); opacity: 1; }
  .map-placeholder__pin {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    max-width: 300px;
    padding: var(--space-5);
    text-align: center;
    color: var(--color-ink);
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .map-placeholder__place { margin: 0; font-weight: 800; line-height: 1.35; }
  .map-placeholder__place span { font-weight: 600; font-size: .875rem; color: var(--color-muted); }

  /* ===================== Legal pages ===================== */
  .legal__body h2 { margin-top: var(--space-7); font-size: var(--step-3); }
  .legal__body h2:first-child { margin-top: 0; }
  .legal__body ul:not([role]) { padding-left: 1.25rem; }
  .legal__body ul:not([role]) li { margin-bottom: var(--space-2); }
  .legal__meta { color: var(--color-muted); font-size: .9375rem; }
  .legal__confirm { margin-top: 0; }

  .legal__eho {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    background: var(--color-cream);
    border-radius: var(--radius);
    border: 1px solid var(--color-line);
  }
  .legal__eho p { margin: 0; }
  .legal__eho-logo { flex-shrink: 0; color: var(--color-ink); }
  .legal__eho-logo .eho__bar { fill: var(--color-surface); }
  @media (max-width: 479px) { .legal__eho { flex-direction: column; } }

  .legal__classes {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  }
  .legal__classes li {
    margin: 0;
    padding: .6rem .9rem .6rem 2.1rem;
    position: relative;
    background: var(--color-sage-tint);
    border-radius: 8px;
    font-weight: 700;
    line-height: 1.4;
  }
  .legal__classes li::before {
    content: "";
    position: absolute;
    left: .85rem;
    top: 1.05rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-sage-text);
  }
  .legal__classes .legal__wide { grid-column: 1 / -1; }
  .legal__classes--ohio li { background: var(--color-honey-tint); }
  .legal__classes--ohio li::before { background: var(--color-brand); }

  .legal__contacts {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  }
  .legal__contact h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
  .legal__contact p { margin: 0 0 var(--space-2); }
  .legal__contact a { display: inline-block; padding-block: .2rem; font-weight: 700; }

  .legal__plain { list-style: none; padding: 0; }
  .legal__plain li { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
  .legal__plain a { display: inline-block; padding-block: .2rem; font-weight: 700; }
}