/* ============================================================
   ILX SERVICE AREAS - hub / index page
   Loaded only on the /service-areas/ page (see inc/enqueue.php).
   Scoped under .sa-page. Uses Coastal Estate tokens.
   ============================================================ */

.sa-page .sa-hero{ padding-top:clamp(26px,3.5vw,46px); padding-bottom:clamp(20px,2.5vw,34px); }

/* ---- Hero ------------------------------------------------- */
.sa-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.sa-hero__text .eyebrow{ margin-bottom:14px; }
.sa-hero__title{
  font-family:var(--ilx-serif);
  font-size:var(--ilx-fs-h1);
  line-height:1.04; letter-spacing:-.015em;
  color:var(--ilx-forest-deep);
  margin:0 0 16px;
}
.sa-hero__lead{ font-size:var(--ilx-fs-lead); color:var(--ilx-muted); line-height:1.65; margin:0 0 26px; max-width:54ch; }
.sa-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.sa-hero__media{
  margin:0; border-radius:var(--ilx-r-lg); overflow:hidden;
  box-shadow:var(--ilx-shadow-lg); border:1px solid var(--ilx-line);
  aspect-ratio:3 / 2; background:var(--ilx-forest-ghost);
}
.sa-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- Intro ------------------------------------------------ */
.sa-intro{ padding-top:0; padding-bottom:clamp(10px,1.5vw,20px); }
.sa-intro__lead{
  max-width:760px;
  font-family:var(--ilx-serif);
  font-size:var(--ilx-fs-h4);
  line-height:1.55;
  color:var(--ilx-forest);
  margin:0;
}

/* ---- Town grid -------------------------------------------- */
.sa-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:clamp(18px,2.2vw,28px);
  margin-top:28px;
}
.area-card{
  display:flex; flex-direction:column;
  background:var(--ilx-white);
  border:1px solid var(--ilx-line);
  border-radius:var(--ilx-r-lg);
  overflow:hidden;
  box-shadow:var(--ilx-shadow-sm);
  text-decoration:none; color:inherit;
  transition:transform var(--ilx-dur-fast) var(--ilx-ease), box-shadow var(--ilx-dur-fast) var(--ilx-ease), border-color var(--ilx-dur-fast) var(--ilx-ease);
}
.area-card:hover{ transform:translateY(-4px); box-shadow:var(--ilx-shadow); border-color:var(--ilx-sage); }
.area-card__media{
  display:block; position:relative;
  aspect-ratio:3 / 2; overflow:hidden;
  background:linear-gradient(135deg,var(--ilx-forest),var(--ilx-forest-deep));
}
.area-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--ilx-dur) var(--ilx-ease); }
.area-card:hover .area-card__media img{ transform:scale(1.04); }
.area-card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,31,20,.28), transparent 45%);
}
.area-card__body{ display:flex; flex-direction:column; gap:8px; padding:22px 24px 22px; flex:1; }
.area-card__name{ font-family:var(--ilx-serif); font-size:var(--ilx-fs-h3); color:var(--ilx-forest-deep); line-height:1.1; }
.area-card__desc{ font-size:var(--ilx-fs-sm); color:var(--ilx-muted); line-height:1.6; }
.area-card__more{
  margin-top:6px; display:inline-flex; align-items:center; gap:7px;
  font-size:var(--ilx-fs-sm); font-weight:700; color:var(--ilx-orange);
}
.area-card__more svg{ width:16px; height:16px; transition:transform var(--ilx-dur-fast) var(--ilx-ease); }
.area-card:hover .area-card__more svg{ transform:translateX(4px); }

/* ---- Project gallery (horizontal scroll) ------------------ */
.sa-gallery .sec-head{ margin-bottom:22px; }
.ilx-hscroll{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--ilx-sage) transparent;
  padding-bottom:10px;
}
.ilx-hscroll::-webkit-scrollbar{ height:8px; }
.ilx-hscroll::-webkit-scrollbar-thumb{ background:var(--ilx-sage); border-radius:var(--ilx-pill); }
.ilx-hscroll::-webkit-scrollbar-track{ background:transparent; }
.ilx-hscroll__track{
  display:flex; gap:clamp(14px,1.6vw,20px);
  list-style:none; margin:0;
  padding-inline:max(var(--ilx-gutter), calc((100% - var(--ilx-wide)) / 2 + var(--ilx-gutter)));
}
.hshot{
  flex:0 0 auto;
  width:clamp(260px,72vw,380px);
  aspect-ratio:4 / 3;
  border-radius:var(--ilx-r-md);
  overflow:hidden;
  border:1px solid var(--ilx-line);
  box-shadow:var(--ilx-shadow-sm);
  scroll-snap-align:start;
  background:var(--ilx-forest-ghost);
}
.hshot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--ilx-dur) var(--ilx-ease); }
.hshot:hover img{ transform:scale(1.04); }
.ilx-hscroll__hint{ font-size:var(--ilx-fs-sm); color:var(--ilx-muted); margin:14px 0 0; }

/* ---- Responsive ------------------------------------------- */
@media (max-width:880px){
  .sa-hero__grid{ grid-template-columns:1fr; gap:30px; }
  .sa-hero__media{ order:-1; }
}
@media (prefers-reduced-motion:reduce){
  .ilx-hscroll{ scroll-behavior:auto; }
  .hshot img{ transition:none; }
}
@media (max-width:560px){
  .sa-grid{ grid-template-columns:1fr; }
  .sa-hero__cta .ilx-btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .area-card,
  .area-card__media img{ transition:none; }
}