/* ===== Homepage-only styles (loaded after style.css; uses its design tokens) ===== */

/* Hero: popular searches */
.hero-chips{margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; max-width:none; font-size:.88rem; color:var(--stone-light);}
.hero-chips a{padding:4px 12px; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius); color:var(--warm-white); transition:border-color .15s ease, color .15s ease;}
.hero-chips a:hover{border-color:var(--gold); color:#D9B77C;}

/* 2. Stats strip */
.stats-strip{background:var(--off-white); border-bottom:1px solid var(--border);}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-top:28px; padding-bottom:28px; text-align:center;}
.stats strong{display:block; font-family:var(--font-display); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600; color:var(--charcoal); line-height:1.1;}
.stats span{display:block; margin-top:4px; font-size:.82rem; color:var(--stone); text-transform:uppercase; letter-spacing:.06em;}

/* 5. Legal situations */
.sit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.sit-card{display:flex; flex-direction:column; gap:6px; padding:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--warm-white); transition:border-color .15s ease, background .15s ease;}
.sit-card:hover{border-color:var(--gold); background:var(--off-white);}
.sit-card strong{font-family:var(--font-display); font-size:1.02rem; font-weight:600; color:var(--charcoal); line-height:1.25;}
.sit-card span{font-size:.85rem; color:var(--stone);}

/* 11. Why this directory */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.why-item{border-top:2px solid var(--gold); padding-top:16px;}
.why-item h3{font-size:1.08rem; margin-bottom:6px;}
.why-item p{margin:0; color:var(--stone); font-size:.92rem;}
.fine-note{margin:28px 0 0; font-size:.88rem; color:var(--stone);}
.fine-note a{text-decoration:underline;}

/* 12. Save and compare */
.tick-list{list-style:none; margin:0; padding:24px 28px; border:1px solid var(--border); border-radius:var(--radius); background:var(--warm-white);}
.tick-list li{position:relative; padding:10px 0 10px 28px; border-bottom:1px solid var(--border); font-size:.95rem;}
.tick-list li:last-child{border-bottom:0;}
.tick-list li::before{content:""; position:absolute; left:2px; top:50%; width:6px; height:11px; margin-top:-8px; border:solid var(--green-verify); border-width:0 2px 2px 0; transform:rotate(45deg);}

/* 13. Know before you hire */
.check-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.check-card{display:block; padding:22px; border:1px solid var(--border); border-radius:var(--radius); background:var(--warm-white); transition:border-color .15s ease;}
.check-card:hover{border-color:var(--gold);}
.check-num{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-bottom:12px; border:1px solid var(--gold); border-radius:50%; color:var(--gold-deep); font-weight:700; font-size:.82rem;}
.check-card h3{font-size:1.05rem; margin-bottom:6px;}
.check-card p{margin:0; color:var(--stone); font-size:.88rem;}

/* 14. Latest articles */
.home-art-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.home-art{display:flex; flex-direction:column; padding:24px; border:1px solid var(--border); border-radius:var(--radius); background:var(--warm-white); transition:border-color .15s ease;}
.home-art:hover{border-color:var(--gold);}
.home-art-img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius); margin-bottom:14px; background:var(--off-white);}
.home-art time{font-size:.78rem; color:var(--stone); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px;}
.home-art h3{font-size:1.15rem; margin-bottom:8px;}
.home-art p{color:var(--stone); font-size:.9rem; margin-bottom:14px;}
.home-art .read-more{margin-top:auto; font-size:.85rem; font-weight:600; color:var(--gold-deep);}

/* Responsive */
@media (max-width:1000px){
  .sit-grid,.check-grid,.why-grid{grid-template-columns:repeat(2,1fr);}
  .home-art-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr); row-gap:20px;}
  .sit-grid,.check-grid,.why-grid,.home-art-grid{grid-template-columns:1fr;}
  .hero-chips{font-size:.84rem;}
}


/* ===================================================================
   Mobile polish (phones and small tablets)
   Goals: shorter page, even spacing, symmetric grids, full-width tap targets.
   =================================================================== */

/* All screen sizes: the footer's top margin left a stray light stripe under the last section. */
.site-footer{margin-top:0;}

@media (max-width:900px){
  .container{padding-left:20px; padding-right:20px;}
}

@media (max-width:640px){
  /* --- Rhythm: one spacing scale for every section --- */
  .section{padding:44px 0;}
  .section-head{flex-direction:column; align-items:flex-start; gap:14px; margin-bottom:22px; padding-bottom:16px;}
  .section-head h2{margin-bottom:6px;}
  .section-head p{font-size:.92rem;}
  .section-head .btn{align-self:flex-start; min-height:40px;}
  .btn{min-height:44px;}
  .btn-sm{min-height:40px;}

  /* --- 1. Hero --- */
  .hero{padding:36px 0 40px;}
  .hero h1{max-width:none; font-size:clamp(1.85rem,8vw,2.3rem);}
  .hero .lede{font-size:1rem; margin-bottom:0;}
  .search-panel{padding:18px; margin-top:22px;}
  .search-grid{gap:14px;}
  .hero-chips{
    flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; gap:8px;
    margin:16px -20px 0; padding:2px 20px 6px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .hero-chips::-webkit-scrollbar{display:none;}
  .hero-chips span{flex:0 0 auto;}
  .hero-chips a{flex:0 0 auto; padding:7px 14px;}

  /* --- 2. Stats: even 2 x 2 with hairline dividers --- */
  .stats{gap:0; padding-top:0; padding-bottom:0;}
  .stats > div{padding:18px 8px; border-bottom:1px solid var(--border);}
  .stats > div:nth-child(odd){border-right:1px solid var(--border);}
  .stats > div:nth-last-child(-n+2){border-bottom:0;}
  .stats strong{font-size:1.6rem;}
  .stats span{font-size:.7rem; letter-spacing:.05em;}

  /* --- 3. Steps: number beside the text instead of stacked above it --- */
  .steps{gap:12px;}
  .step{display:grid; grid-template-columns:36px 1fr; column-gap:14px; padding:18px;}
  .step .num{grid-row:1 / span 2; margin:0;}
  .step h3{margin:0 0 4px; align-self:end;}
  .step p{font-size:.9rem;}

  /* --- 4. Practice areas: compact 2-up tiles --- */
  .pa-grid{grid-template-columns:repeat(2,1fr);}
  .pa-card{padding:16px 14px; display:flex; flex-direction:column; justify-content:space-between; gap:6px; min-height:88px;}
  .pa-card h3{font-size:.98rem; margin:0;}
  .pa-card p{display:none;}
  .pa-card .count{font-size:.76rem;}

  /* --- 5. Situations: tidy tappable rows --- */
  .sit-grid{grid-template-columns:1fr; gap:8px;}
  .sit-card{flex-direction:row; align-items:center; justify-content:space-between; padding:14px 16px; min-height:52px;}
  .sit-card strong{font-size:.98rem;}
  .sit-card span{display:none;}
  .sit-card::after{content:"\203A"; font-size:1.4rem; line-height:1; color:var(--gold-deep); flex:0 0 auto; margin-left:12px;}

  /* --- 6. Lawyer cards: photo beside details, not a full-width square --- */
  .lawyer-grid{gap:14px;}
  .lawyer-card{flex-direction:row; align-items:stretch;}
  .lawyer-card .photo{
    flex:0 0 108px; aspect-ratio:auto; min-height:150px;
    border-bottom:0; border-right:1px solid var(--border);
  }
  .lawyer-card .body{padding:14px 14px 14px; gap:4px; min-width:0;}
  .lawyer-card .name{font-size:1.05rem; line-height:1.2; overflow-wrap:anywhere;}
  .lawyer-card .bio{-webkit-line-clamp:2; font-size:.82rem;}
  .lawyer-card .card-actions{padding-top:10px;}

  /* --- 7 and 8. State and city tiles: always two even columns --- */
  .loc-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .loc-card{padding:12px 14px; font-size:.92rem; align-items:center; min-height:48px;}

  /* --- 9, 12, 16. Split sections: stacked, equal-width buttons --- */
  .split{gap:20px;}
  .split .actions{flex-direction:column; align-items:stretch; gap:10px;}
  .split .actions .btn{width:100%;}
  .tick-list{padding:10px 18px;}

  /* --- 10. Verified band --- */
  .trust-grid{gap:18px; margin-top:24px;}
  .trust-item{padding-top:14px;}
  .trust-band .fine{margin-top:20px;}

  /* --- 11 and 13. Two-up cards, matching heights --- */
  .why-grid{grid-template-columns:repeat(2,1fr); gap:20px 16px;}
  .why-item h3{font-size:1rem;}
  .why-item p{font-size:.86rem;}
  .check-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .check-card{padding:16px 14px;}
  .check-num{margin-bottom:8px;}
  .check-card h3{font-size:.98rem;}
  .check-card p{font-size:.84rem;}
  .fine-note{margin-top:20px;}

  /* --- 14. Articles --- */
  .home-art-grid{gap:12px;}
  .home-art{padding:18px;}
  .home-art h3{font-size:1.05rem;}
  .home-art p{font-size:.88rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

  /* --- 15. FAQ --- */
  .faq details{padding:14px 0;}
  .faq summary{font-size:1rem; line-height:1.3;}
  .faq .more .btn{width:100%;}

  /* --- Footer: brand across the top, link columns in even pairs --- */
  .site-footer{padding:36px 0 20px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px 20px;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  .footer-desc{max-width:none;}
  .footer-bottom{margin-top:32px; flex-direction:column; gap:12px;}
}

/* Very small phones: keep two columns, but tighten further */
@media (max-width:380px){
  .loc-grid{grid-template-columns:repeat(2,1fr);}
  .lawyer-card .photo{flex-basis:92px;}
  .why-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; }
}