/* =========================================================
   EAA Advocacy / Topic Grid / Search Hero – Mobile-first

   ========================================================= */

/* Container */
.eaa-advocacy .container{
  width:clamp(320px, 92vw, 1280px);
  padding-inline:20px;
  margin-inline:auto;
}

/* ---------- Hero ---------- */
.adv-hero{
  padding-top: clamp(20px,4vw,32px);
  padding-bottom: clamp(10px,3vw,16px);
}
.adv-breadcrumb{
  display:flex; gap:8px; align-items:center;
  font-size:.8rem; opacity:.8; margin-bottom:.75rem;
}
.adv-title{
  font-weight:600;
  line-height:1.1;
  font-size:clamp(28px,6vw,50px);
  letter-spacing:-.01em;
}
.adv-lead{
  color:#242424;
  font-size:20px;
  line-height: 160%;
  max-width: 48rem;
}

/* ---------- Topic Grid ---------- */
.topic-grid{ margin: clamp(32px,8vw,80px) 0; }
.topic-grid .tg-heading{
  margin:0 0 40px 0;
  font-weight:600;
  font-size:clamp(18px,4.8vw,36px);
  text-transform:uppercase;
  letter-spacing:.08em;
  color: black;
  opacity:.85;
}

.topic-grid .tg-wrap{
  display:grid;
  gap:0; /* visual tiles meet edge-to-edge */
  grid-template-columns: repeat(1, 1fr); /* mobile default */
}

/* tablet (attribute-driven) */
@media (min-width:640px) and (max-width:1023.98px){
  .topic-grid[data-cols-tablet="2"] .tg-wrap{ grid-template-columns:repeat(2,1fr); }
  .topic-grid[data-cols-tablet="3"] .tg-wrap{ grid-template-columns:repeat(3,1fr); }
}

/* desktop (attribute-driven) */
@media (min-width:1024px){
  .topic-grid[data-cols-desktop="3"] .tg-wrap{ grid-template-columns:repeat(3,1fr); }
  .topic-grid[data-cols-desktop="4"] .tg-wrap{ grid-template-columns:repeat(4,1fr); }
  .topic-grid[data-cols-desktop="5"] .tg-wrap{ grid-template-columns:repeat(5,1fr); }
}

/* optional tighter mobile grid via data-attr */
@media (max-width:639.98px){
  .topic-grid[data-cols-mobile="1"] .tg-wrap{ grid-template-columns:1fr; }
  .topic-grid[data-cols-mobile="2"] .tg-wrap{ grid-template-columns:repeat(2,1fr); }
  .adv-lead{

  max-width:25ch !important; /* fallback below */
 
}
}

/* ---------- Tile Card ---------- */
.tg-card{
  position:relative; display:block; overflow:hidden;
  border-radius:0; min-height:160px; aspect-ratio:16/11;
  isolation:isolate; /* keeps overlays inside */
}
.tg-card:focus-visible{
  outline:3px solid #B25293; outline-offset:-3px;
}

/* Media */
.tg-media,
.tg-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:translateZ(0); /* crisper on mobile */
}

/* Placeholder (when no image) */
.tg-placeholder{ background:#e9eef4; width:100%; height:100%; }

/* Gradient overlay tones */
.tg-overlay{
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:multiply; opacity:.9; transition:opacity .25s ease;
}
.tone-purple .tg-overlay{ background:linear-gradient(180deg,rgba(77,74,164,.7),rgba(201,112,148,.7)); }
.tone-blue   .tg-overlay{ background:linear-gradient(180deg,rgba(62,120,179,.7),rgba(87,144,211,.7)); }
.tone-teal   .tg-overlay{ background:linear-gradient(180deg,rgba(43,147,150,.7),rgba(120,174,178,.7)); }
.tone-pink   .tg-overlay{ background:linear-gradient(180deg,rgba(179,62,138,.7),rgba(211,87,144,.7)); }

/* Content */
.tg-content{
  position:absolute; inset:auto 12px 12px 12px; color:#fff; z-index:2;
  display:flex; align-items:flex-end; justify-content:center; text-align:center;
  min-height:calc(32px + 1lh); 
  margin-bottom: 30px;
}
.tg-sub{
  display:none;
  font-size:.7rem;
  background:rgba(255,255,255,.18);
  padding:4px 8px; border-radius:999px; margin-bottom:6px;
  backdrop-filter:blur(2px);
}
.tg-title{
  margin:0; font-weight:600; line-height:1.3;
  font-size:clamp(16px,4.5vw,30px);
  width: 80%;
}

.tg-card:hover .tg-overlay,
.tg-card:focus-visible .tg-overlay{ opacity:.75; }
.tg-card:hover img,
.tg-card:focus-visible img{ transform:scale(1.035); transition:transform .35s ease; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  .tg-card:hover img,
  .tg-card:focus-visible img{ transform:none; }
  .tg-overlay{ transition:none; }
}

.topic-grid + .topic-grid{ margin-top: clamp(20px,4vw,32px); }

/* ---------- Search Hero ---------- */
.search-hero{
  position:relative; color:#fff; text-align:left;
  background-size:cover; background-position:center;
padding:170px 0 80px 0;
}
.search-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
}
.search-hero .search-hero-inner{
  position:relative; z-index:1;
  max-width: var(--container-width, 1280px);
  margin:0 auto; padding:0 16px;
}
/* ===== Extra mobile polish (phones) ===== */
@media (max-width:480px){

  /* container breathing + safe areas (iOS notches) */
  .eaa-advocacy .container{
    padding-inline: max(16px, env(safe-area-inset-left));
    padding-right:  max(16px, env(safe-area-inset-right));
  }

  /* hero spacing & type */
  .adv-hero{
    padding-top: 18px;
    padding-bottom: 10px;
  }
  .adv-title{
    font-size: clamp(24px, 8vw, 32px);
    line-height: 1.15;
    word-wrap: anywhere;
  }
  .adv-lead{
    font-size: 15px;
    max-width: 28ch;    
    opacity: .95;
  }

  .topic-grid .tg-wrap{ grid-template-columns: 1fr; }
  .topic-grid[data-cols-mobile="2"] .tg-wrap{ grid-template-columns: repeat(2,1fr); }

  .tg-card{
    aspect-ratio: 4 / 3;        
    min-height: 150px;
   
  }
  .tg-content{
    inset: auto 10px 10px 10px;
    text-align: center;
    align-items: flex-end;
    min-height: 44px;            /* keep space for title */
  }
  .tg-title{ font-size: clamp(20px, 4.6vw, 20px); }

  .tg-sub{
    display: none;
   
  }
  .topic-grid .tg-heading{
    margin:0 0;
  }

  .tg-overlay{ opacity: .95; }
  .tg-card:hover .tg-overlay,
  .tg-card:focus-visible .tg-overlay{ opacity: .9; } /* safe for touch */

  @media (prefers-reduced-motion:no-preference){
    .tg-media img{ transition: transform .25s ease; }
    .tg-card:hover img, .tg-card:focus-visible img{ transform: scale(1.02); }
  }

  /* breadcrumb wraps nicely */
  .adv-breadcrumb{ flex-wrap: wrap; row-gap: 4px; }
}

/* ===== Tiny phones (≤360px) – extra guards ===== */
@media (max-width:360px){
  .adv-title{ font-size: 22px; }
  .adv-lead{ font-size: 14px; max-width: 26ch; }
  .tg-title{ font-size: 14px; }
}