/**
 * practice-area-page.css — deltas on top of home.css for the Practice Area Page
 * template. home.css supplies the shared section styles (hero shell + skyline,
 * proof-bar, brand-intro, results, bullseye, origin, testimonials, faq). These
 * rules add: a shorter hero, the team card grid, the 3-column reviews layout,
 * the navy CTA copy colors, and the mobile above-the-fold treatment.
 */

/* ===== HERO: shorter than the homepage; photo fills + flush bottom ===== */
.hero, .hero-inner { min-height: 84vh; }
.hero-content { padding-top: 96px; padding-bottom: 64px; }
.hero-img { align-items: flex-end; justify-content: center; }
.hero-img img { height: 66vh; object-position: bottom center; }
/* Smaller eyebrow + a tighter tagline cap than the homepage (4rem vs 4.8rem). */
.hero-h1-kw { font-size: 18px; }
.hero-h1-tagline { font-size: clamp(3rem, 5vw, 4rem); }

/* ===== TEAM: white in light mode, navy in dark; hero-width container ===== */
.team { background: #fff; }
[data-theme="dark"] .team { background: var(--navy); }
.team .team-intro { max-width: 1800px; margin-left: auto; margin-right: auto; padding: 0 48px; }
.team .team-intro .eyebrow { color: var(--fire); }
.pa-team-title { color: var(--ink); }
.team .team-intro-sub { color: rgba(0,0,0,0.6); }
[data-theme="dark"] .team .team-intro-sub { color: var(--smoke); }

.pa-team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px; max-width: 1800px; margin: 52px auto 0; padding: 0 48px; }
.pa-card { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; transition: transform .3s, box-shadow .3s; background: #fff; border: 1px solid rgba(0,0,0,0.07); box-shadow: 0 14px 38px rgba(20,30,50,0.08); }
.pa-card:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(20,30,50,0.14); }
.pa-card-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; padding-top: 16px; background: linear-gradient(180deg,#ece6db 0%,#f7f3ed 100%); }
.pa-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.pa-card-photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(to top,#fff,transparent); }
.pa-card-body { padding: 22px 18px 26px; text-align: center; display: flex; flex-direction: column; flex: 1; }
.pa-card-name { font-family: var(--display); font-size: 1.18rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pa-card-role { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--fire); margin-top: 8px; }
.pa-card-bio { font-size: .9rem; font-style: italic; color: rgba(0,0,0,0.6); line-height: 1.6; margin-top: 14px; }
[data-theme="dark"] .pa-card { background: linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
[data-theme="dark"] .pa-card-photo { background: linear-gradient(180deg,#22324f 0%,#0f1b30 100%); }
[data-theme="dark"] .pa-card-photo::after { background: linear-gradient(to top,rgba(15,27,48,0.9),transparent); }
[data-theme="dark"] .pa-card-name { color: #fff; }
[data-theme="dark"] .pa-card-bio { color: var(--smoke); }
@media (max-width: 1500px) { .pa-team-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 1100px) { .pa-team-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 820px)  { .pa-team-grid { grid-template-columns: repeat(2,1fr); padding: 0 24px; } .team .team-intro { padding: 0 24px; } }
@media (max-width: 520px)  { .pa-team-grid { grid-template-columns: 1fr; } }

/* REVIEWS: .pa-reviews-grid now lives in home.css (shared) so the homepage
   reviews section renders identically to the practice-area pages. */

/* ===== MIDSECTION CTA: dark blue (navy) bg, light copy ===== */
.pa-midcta h2 { color: #fff; }
.pa-midcta-copy { color: rgba(255,255,255,0.72); }
.pa-midcta-copy strong { color: #fff; }
@media (max-width: 900px) { .pa-midcta .container { grid-template-columns: 1fr !important; } }

/* ===== MOBILE: hide the attorney photo, keep a strong above-the-fold ===== */
@media (max-width: 768px) {
  .hero-img { display: none !important; }
  .hero, .hero-inner { min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-content { padding: 92px 0 28px; }
  .hero-h1-kw { font-size: 13px; letter-spacing: 3px; margin-bottom: 16px; }
  .hero-h1-tagline { font-size: 2.3rem; line-height: 1.12; }
  .hero-trust { min-height: auto; padding: 10px 0 6px; }
  .hero-sub { font-size: 1.02rem; margin-bottom: 24px; }
  .hero-stats { margin-bottom: 0; }
  /* Hero buttons hidden on mobile — the sticky phone bar carries the CTA. */
  .hero-actions { display: none; }
}