/* ==========================================================================
   Top Sydney Cleaners - homepage template styles   (Stage 7)
   Loaded only on the custom homepage (tsc_use_new_home). Consumes the tokens
   and components from style.css + components.css; adds hero / trustbar /
   feature / steps / faq / reviews / quote layout only.
   ========================================================================== */

/* Let the custom homepage sections run full-bleed inside Astra's wrappers. */
body.home .site-content > .ast-container{ max-width:none; padding-left:0; padding-right:0; }
body.home #primary{ width:100%; max-width:none; margin:0; padding:0; }
body.home #content .ast-container{ width:100%; }

.tsc-home{ font-family:var(--tsc-font); color:var(--tsc-color-text); }
.tsc-home .tsc-section:first-child{ padding-top:0; }
/* sentence case - override any inherited capitalize/uppercase on headings */
.tsc-home h1, .tsc-home h2, .tsc-home h3, .tsc-home h4,
.tsc-home .tsc-section__title, .tsc-home .tsc-hero__title,
.tsc-home .tsc-card__title, .tsc-home .tsc-cta-band__title,
.tsc-home .tsc-steps__title, .tsc-home .tsc-feature__title{ text-transform:none; }

/* 3-up grid for the service cards */
.tsc-grid--3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Service cards (S3): pin the "Most requested" badge to the card's top-right so
   the icon / title baseline stays aligned across the whole row. */
.tsc-home .tsc-card{ position:relative; }
.tsc-home .tsc-card--featured .tsc-badge{
  position:absolute;
  top:var(--tsc-space-4);
  right:var(--tsc-space-4);
  margin:0;
}
.tsc-home .tsc-card--featured .tsc-card__icon{ margin-top:0; }

/* --------------------------------------------------------------------------
   S1 - HERO
   -------------------------------------------------------------------------- */
.tsc-hero{
  background:var(--tsc-color-primary-soft);
  padding-block:clamp(32px, 5vw, 72px) clamp(40px, 6vw, 88px);
}
.tsc-hero__inner{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items:center;
  gap:clamp(28px, 5vw, 64px);
}
.tsc-hero__copy{ max-width:34rem; }
.tsc-hero__title{
  margin:.35rem 0 .75rem;
  /* Slightly more restrained than the global --tsc-h1 (max 48px vs 52px) so the
     hero reads premium, not shouty (Prompt 3 - "avoid giant text"). */
  font-size:clamp(2rem, 1.5rem + 2.1vw, 3rem);
  line-height:var(--tsc-leading-tight);
  font-weight:700;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--tsc-color-text);
}
.tsc-hero__lead{
  margin:0 0 var(--tsc-space-6);
  font-size:var(--tsc-text-md);
  line-height:var(--tsc-leading-normal);
  color:var(--tsc-color-text-muted);
}
.tsc-hero .tsc-cta-group{ margin-bottom:var(--tsc-space-4); }
.tsc-hero__phone{ color:var(--tsc-color-text-muted); }
.tsc-hero__trust{
  list-style:none;
  margin:var(--tsc-space-6) 0 0;
  padding:var(--tsc-space-4) 0 0;
  border-top:1px solid var(--tsc-color-border);
  display:flex;
  flex-wrap:wrap;
  gap:var(--tsc-space-2) var(--tsc-space-5);
  font-size:var(--tsc-text-sm);
  font-weight:600;
  color:var(--tsc-color-text-muted);
}
.tsc-hero__trust li{ display:flex; align-items:center; gap:.4em; }
.tsc-hero__trust li::before{
  content:"";
  width:.5rem; height:.5rem; flex:none;
  border-radius:50%;
  background:var(--tsc-color-primary);
}
.tsc-hero__frame{ box-shadow:var(--tsc-shadow-lg); }

@media (max-width:860px){
  .tsc-hero__inner{ grid-template-columns:1fr; }
  .tsc-hero__copy{ max-width:none; order:1; }
  .tsc-hero__media{ order:2; }
  .tsc-hero .tsc-cta-group > .tsc-btn{ flex:1 1 100%; }
}

/* --------------------------------------------------------------------------
   S2 - TRUST BAR
   -------------------------------------------------------------------------- */
.tsc-trustbar{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:var(--tsc-space-5) var(--tsc-space-8);
}
.tsc-trustbar li{
  display:grid;
  grid-template-columns:1.6rem 1fr;
  column-gap:.7rem;
  row-gap:1px;
  align-items:start;
}
.tsc-trustbar__ico{
  grid-row:1 / span 2;
  width:1.6rem; height:1.6rem;
  margin-top:1px;
  padding:.28rem;
  box-sizing:border-box;
  border-radius:var(--tsc-radius-pill);
  background:var(--tsc-color-primary-soft);
  color:var(--tsc-color-primary-strong);
}
.tsc-trustbar strong{ font-size:var(--tsc-text-sm); font-weight:700; color:var(--tsc-color-text); }
.tsc-trustbar span{ font-size:var(--tsc-text-xs); color:var(--tsc-color-text-muted); }

/* --------------------------------------------------------------------------
   S4 - FEATURE GRID (Why choose us)   icon -> title -> short text
   -------------------------------------------------------------------------- */
.tsc-feature{ display:flex; flex-direction:column; gap:var(--tsc-space-2); }
.tsc-feature__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:var(--tsc-space-3);
  border-radius:var(--tsc-radius-md);
  background:var(--tsc-color-primary-soft);
  color:var(--tsc-color-primary);
}
.tsc-feature__icon svg{ width:22px; height:22px; }
.tsc-feature__title{
  margin:0;
  font-size:var(--tsc-text-md);
  font-weight:700;
  line-height:var(--tsc-leading-snug);
  color:var(--tsc-color-text);
}
.tsc-feature__text{
  margin:0;
  font-size:var(--tsc-text-sm);
  line-height:var(--tsc-leading-normal);
  color:var(--tsc-color-text-muted);
}

/* --------------------------------------------------------------------------
   Service checklist (S5/S6/S7 spotlights) - factual inclusions, not claims
   -------------------------------------------------------------------------- */
.tsc-checklist{
  list-style:none; margin:0 0 var(--tsc-space-7); padding:0;
  display:grid; gap:var(--tsc-space-3);
}
.tsc-checklist li{
  display:grid; grid-template-columns:1.4rem 1fr; gap:.6rem; align-items:start;
  font-size:var(--tsc-text-sm); line-height:var(--tsc-leading-snug);
  color:var(--tsc-color-text);
}
.tsc-checklist__ico{
  width:1.4rem; height:1.4rem; flex:none; box-sizing:border-box;
  padding:.24rem; border-radius:var(--tsc-radius-pill);
  background:var(--tsc-color-primary-soft);
  color:var(--tsc-color-primary-strong);
}

/* --------------------------------------------------------------------------
   S8 - STEPS (How it works)
   -------------------------------------------------------------------------- */
.tsc-steps{
  list-style:none; margin:0; padding:0;
  counter-reset:tsc-step;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap:var(--tsc-space-6);
}
.tsc-steps__item{
  position:relative;
  background:var(--tsc-color-surface);
  border:1px solid var(--tsc-color-border);
  border-radius:var(--tsc-radius-lg);
  padding:var(--tsc-space-6);
  display:flex; flex-direction:column; gap:var(--tsc-space-2);
}
.tsc-steps__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:var(--tsc-radius-md);
  background:var(--tsc-color-primary-soft);
  color:var(--tsc-color-primary);
}
.tsc-steps__icon svg{ width:22px; height:22px; }
.tsc-steps__num{
  margin-top:var(--tsc-space-3);
  font-size:var(--tsc-text-xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tsc-color-text-subtle);
}
.tsc-steps__title{ margin:0; font-size:var(--tsc-text-md); font-weight:700; line-height:var(--tsc-leading-snug); }
.tsc-steps__text{ margin:0; font-size:var(--tsc-text-sm); line-height:var(--tsc-leading-normal); color:var(--tsc-color-text-muted); }

/* --------------------------------------------------------------------------
   S9 - REVIEWS / PROOF   (genuine Google data - see tsc_google_rating/reviews)
   -------------------------------------------------------------------------- */
/* 5-star rating row - one accessible unit, filled stars only get colour. */
.tsc-stars{ display:inline-flex; align-items:center; gap:1px; vertical-align:-3px; }
.tsc-stars__s{ fill:var(--tsc-color-border-strong); }
.tsc-stars__s.is-on{ fill:var(--tsc-amber); }

.tsc-rating{
  margin:var(--tsc-space-2) 0 0;
  display:inline-flex; align-items:center; gap:.5em;
  font-size:var(--tsc-text-md);
  color:var(--tsc-color-text-muted);
}
.tsc-rating strong{ color:var(--tsc-color-text); font-weight:700; }

.tsc-reviews{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap:var(--tsc-space-6);
  margin-top:var(--tsc-space-8);
}
.tsc-review{ gap:var(--tsc-space-4); }
.tsc-review__stars{ margin-bottom:var(--tsc-space-1); }
.tsc-review__stars .tsc-stars__s{ width:14px; height:14px; }
.tsc-review__text{
  margin:0;
  font-size:var(--tsc-text-base);
  line-height:var(--tsc-leading-normal);
  color:var(--tsc-color-text);
}
.tsc-review__meta{
  margin-top:auto; padding-top:var(--tsc-space-4);
  display:flex; align-items:center; gap:var(--tsc-space-3);
}
.tsc-review__avatar{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:var(--tsc-radius-pill);
  background:var(--tsc-color-primary-soft);
  color:var(--tsc-color-primary-strong);
  font-size:var(--tsc-text-xs);
  font-weight:700;
}
.tsc-review__name{ display:block; font-size:var(--tsc-text-sm); font-weight:700; color:var(--tsc-color-text); }
.tsc-review__src{ display:block; font-size:var(--tsc-text-xs); color:var(--tsc-color-text-subtle); }

/* --------------------------------------------------------------------------
   S12 - BLOG PREVIEW   (renders only when real posts exist)
   -------------------------------------------------------------------------- */
.tsc-blog__item{ gap:var(--tsc-space-3); }
.tsc-blog__media{
  display:block;
  margin:calc(var(--tsc-space-6) * -1) calc(var(--tsc-space-6) * -1) var(--tsc-space-4);
  border-radius:var(--tsc-radius-lg) var(--tsc-radius-lg) 0 0;
  overflow:hidden;
}
.tsc-blog__media img{ display:block; width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.tsc-blog__title{
  margin:0;
  font-size:var(--tsc-text-md);
  font-weight:700;
  line-height:var(--tsc-leading-snug);
}
.tsc-blog__link{ color:var(--tsc-color-text); text-decoration:none; }
.tsc-blog__link:hover{ color:var(--tsc-color-primary); }
.tsc-blog__link:focus-visible{ outline:2px solid var(--tsc-color-primary); outline-offset:2px; border-radius:2px; }
.tsc-blog__excerpt{
  margin:0;
  font-size:var(--tsc-text-sm);
  line-height:var(--tsc-leading-normal);
  color:var(--tsc-color-text-muted);
}

/* --------------------------------------------------------------------------
   S11 - FAQ (native <details>)
   -------------------------------------------------------------------------- */
.tsc-faq{
  border:1px solid var(--tsc-color-border);
  border-radius:var(--tsc-radius-lg);
  overflow:hidden;
  background:var(--tsc-color-surface);
}
.tsc-faq__item + .tsc-faq__item{ border-top:1px solid var(--tsc-color-border); }
.tsc-faq__q{
  cursor:pointer;
  list-style:none;
  padding:var(--tsc-space-4) var(--tsc-space-5);
  padding-right:2.75rem;
  position:relative;
  font-weight:600;
  font-size:var(--tsc-text-base);
  color:var(--tsc-color-text);
}
.tsc-faq__q::-webkit-details-marker{ display:none; }
.tsc-faq__q::after{
  content:"";
  position:absolute; right:var(--tsc-space-5); top:50%;
  width:.7rem; height:.7rem;
  margin-top:-.45rem;
  border-right:2px solid var(--tsc-color-primary);
  border-bottom:2px solid var(--tsc-color-primary);
  transform:rotate(45deg);
  transition:transform var(--tsc-dur) var(--tsc-ease);
}
.tsc-faq__item[open] .tsc-faq__q::after{ transform:rotate(-135deg); }
.tsc-faq__q:focus-visible{ outline:2px solid var(--tsc-color-primary); outline-offset:-2px; }
.tsc-faq__a{
  padding:0 var(--tsc-space-5) var(--tsc-space-4);
  font-size:var(--tsc-text-sm);
  line-height:var(--tsc-leading-normal);
  color:var(--tsc-color-text-muted);
}
.tsc-faq__a p{ margin:0; }

/* --------------------------------------------------------------------------
   S13 - QUICK QUOTE
   -------------------------------------------------------------------------- */
.tsc-quote{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
  gap:clamp(24px, 4vw, 56px);
  align-items:start;
}
.tsc-quote__intro .tsc-section__title{ margin-bottom:var(--tsc-space-3); }
.tsc-quote__intro .tsc-cta-phone{ font-size:var(--tsc-text-base); }
.tsc-quote__alt{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--tsc-space-4);
  margin-top:var(--tsc-space-5);
}
.tsc-quote__form{ width:100%; box-sizing:border-box; }

@media (max-width:820px){
  .tsc-quote{ grid-template-columns:1fr; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .tsc-faq__q::after{ transition:none !important; }
}