/* ==========================================================================
   site-theme.css — RossCo Plumbing additions, layered on top of
   global.css + home.css. Keeps the core design system intact; only adds the
   plumbing-specific pieces (services grid, customer reviews, location card,
   after-hours band).
   ========================================================================== */

/* ---- Gold star rating glyphs (shared) ---- */
.stars { color: #E4C173; letter-spacing: .04em; white-space: nowrap; }

/* ---- Hero award medallion → Google reviews badge ---- */
.award-card__stars { font-size: 1.05rem; letter-spacing: .16em; }

/* ---- Hero title: a clean brand-red accent word, solid gradient fill (no
   -webkit-text-stroke, which left a miter artifact on sharp inner corners). ---- */
.hero__title { font-size: clamp(2.5rem, 1rem + 5.8vw, 5rem); }
.hero__title-accent {
  display: inline;
  color: var(--accent-300);              /* fallback if background-clip:text is unsupported */
  background: linear-gradient(180deg, #E0685C 0%, var(--accent) 55%, var(--accent-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;                /* kill the outline (and its triangle artifact) */
  paint-order: normal;
}

/* ---- "Google Rated" reviews badge — 25% larger overall ---- */
.hero__award { width: min(428px, 100%); }                 /* 342 → 428 */
.award-card { padding: 2rem 1.9rem 1.7rem; }
.award-card__eyebrow { font-size: .81rem; }
.award-card__eyebrow .ic { width: 18px; height: 18px; }
.award-card .laurel { width: 38px; height: 92px; }
.award-card__best { font-size: .85rem; }
.award-card__year b { font-size: 3.9rem; }
.award-card__city { font-size: 1.25rem; }
.award-card__stars { font-size: 1.31rem; letter-spacing: .16em; }
.award-card__title { font-size: 1.45rem; }
.award-card__pill { font-size: .85rem; }
.award-card__pill .ic { width: 16px; height: 16px; }
.award-card__cat { font-size: 1.06rem; }
.award-card__by { font-size: .75rem; }
/* With the larger badge, stack hero a touch earlier so the one-line title never crowds it */
@media (max-width: 1080px){
  .hero__inner { grid-template-columns: 1fr; }
  .hero__award { justify-self: center; }
}
/* Pull the badge left a touch on the side-by-side layout to tighten the gap to the hero text */
@media (min-width: 1081px){
  .hero__award { margin-right: clamp(.5rem, 1.2vw, 1.5rem); }
}

/* ---- "Why RossCo" section: darkened copper-pipe backdrop — warm, on-brand,
   and distinct from the hero's pipe-on-brick wall; same #0E1418 cinematic
   tint as the hero so the two dark bands read as a family. ---- */
/* Condensed banner: trim the tall section padding (was clamp(3.6rem,7vw,7rem))
   and the heading→cards gap, keeping card padding comfortable so it stays pro. */
#why { position: relative; overflow: hidden; padding-block: clamp(2rem, 3.8vw, 3.5rem); }
#why .section-head { margin-bottom: clamp(1.2rem, 2.8vw, 1.9rem); }
#why::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("https://images.unsplash.com/photo-1673870861507-d72aa6855d89?auto=format&fit=crop&w=1600&q=70") center / cover no-repeat, var(--bg-3);
}
#why::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg,
    rgba(14,20,24,.85) 0%,
    rgba(14,20,24,.78) 50%,
    rgba(14,20,24,.93) 100%);
}
#why > .container { position: relative; z-index: 1; }

/* ---- Services grid (icon cards) ---- */
.svc-grid { margin-top: .2rem; }
.svc-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .55rem;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.svc-card:hover { border-color: rgba(160,44,37,.4); transform: translateY(-3px); box-shadow: var(--shadow-2); }
/* Custom 3D product-icon tile (self-contained dark render — no inner padding/glow needed) */
.svc-card__icon {
  width: 80px; height: 80px; border-radius: 16px; overflow: hidden;
  display: block; padding: 0; background: var(--bg-inset);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.75);
  transition: transform .3s, box-shadow .3s;
}
.svc-card__icon picture, .svc-card__icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-card:hover .svc-card__icon {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -12px rgba(0,0,0,.82), 0 0 0 1px rgba(160,44,37,.28);
}
.svc-card h3 { font-size: 1.12rem; }
.svc-card p { font-size: .88rem; color: var(--ink-2); }
.svc-more { margin-top: 1.5rem; text-align: center; color: var(--ink-3); font-size: .92rem; }
/* Mobile: on the HOME page's featured grid only — center the tiles and show the top 4.
   The full services page (.svc-grid without [data-featured]) keeps ALL services. */
@media (max-width: 600px){
  .svc-grid[data-featured] > .svc-card { align-items: center; text-align: center; }
  .svc-grid[data-featured] > .svc-card:nth-child(n+5) { display: none; }
}

/* ---- Get-a-quote band: two call cards (re-uses .find-band layout) ---- */
.quote-card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px){ .quote-card { grid-template-columns: 1fr; } }
.quote-call {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: 1.3rem 1.25rem; display: grid; gap: .45rem; box-shadow: var(--shadow-2);
}
.quote-call__label {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--ink-3);
}
.quote-call__label .ic { width: 15px; height: 15px; color: var(--accent-300); }
.quote-call__num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: #fff; letter-spacing: .01em; transition: color .2s;
}
.quote-call__num:hover { color: var(--accent-300); }
.quote-call__rev { font-size: .82rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: .45rem; }

/* ---- Location cards ---- */
.loc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); }
@media (max-width: 760px){ .loc-grid { grid-template-columns: 1fr; } }
.loc-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.loc-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.loc-card__map { aspect-ratio: 16 / 8; background: var(--bg-3); }
.loc-card__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.35) contrast(1.05) brightness(.9); }
.loc-card__body { padding: 1.4rem; display: grid; gap: .6rem; }
.loc-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.loc-card__top h3 { font-size: 1.45rem; }
.loc-rating { font-family: var(--font-mono); font-size: .8rem; color: var(--ink-3); display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.loc-rating b { color: #fff; }
.loc-line { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .94rem; transition: color .2s; }
.loc-line .ic { width: 17px; height: 17px; color: var(--accent-300); flex-shrink: 0; }
a.loc-line:hover { color: #fff; }
.loc-card__btns { display: flex; gap: .6rem; margin-top: .5rem; flex-wrap: wrap; }

/* ---- Single-location card: map + details side by side ---- */
.loc-single {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
  max-width: 980px; margin: 0 auto; overflow: hidden;
}
.loc-single .loc-card__map { aspect-ratio: auto; min-height: 100%; }
.loc-single .loc-card__body { padding: clamp(1.4rem, 3vw, 2.2rem); align-content: center; }
@media (max-width: 720px){
  .loc-single { grid-template-columns: 1fr; }
  .loc-single .loc-card__map { aspect-ratio: 16 / 9; min-height: 0; }
}

/* ---- Customer reviews (real Google reviews) ---- */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
/* Mobile: reviews become a swipeable slider (scroll-snap) — RossCo card style kept */
@media (max-width: 640px){
  .reviews-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    gap: .9rem; padding-bottom: .5rem; scroll-padding-left: 2px; scrollbar-width: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .reviews-grid > .review-card {
    flex: 0 0 88%; scroll-snap-align: center; margin: 0;
    opacity: 1 !important; transform: none !important;
  }
}
.review-card {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; display: grid; gap: .85rem; margin: 0;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.review-card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.review-card__stars { font-size: 1.02rem; letter-spacing: .12em; }
.review-card blockquote {
  margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--ink);
}
.review-card figcaption { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.review-card__avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-600)); }
.review-card__who { display: flex; flex-direction: column; line-height: 1.35; }
.review-card__who b { font-family: var(--font-body); font-weight: 600; color: var(--ink); font-size: .94rem; }
.review-card__who > span { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.review-card__who .ic { width: 14px; height: 14px; color: var(--accent-300); flex-shrink: 0; }
/* Reviews slider prev/next controls (mobile only) */
.reviews-nav { display: none; justify-content: center; gap: .8rem; margin-top: 1.3rem; }
.reviews-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.reviews-nav button:hover, .reviews-nav button:focus-visible { border-color: var(--accent-300); color: var(--accent-300); background: var(--accent-soft); }
.reviews-nav .ic { width: 20px; height: 20px; }
.reviews-nav .reviews-prev .ic { transform: rotate(180deg); }
@media (max-width: 640px){ .reviews-nav { display: flex; } }

/* ---- After-hours band ---- */
.emergency-band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent) 60%, #6E1812 100%);
  border-top: 1px solid rgba(0,0,0,.25); border-bottom: 1px solid rgba(0,0,0,.25);
}
.emergency-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.35) 0 10px, transparent 10px 20px);
  background-size: 28px 28px; opacity: .5;
}
.emergency-band__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  flex-wrap: wrap; padding-block: clamp(1.4rem, 3vw, 2rem);
}
.emergency-band__text { display: flex; align-items: center; gap: 1rem; }
.emergency-band__icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff;
}
.emergency-band__icon .ic { width: 28px; height: 28px; }
.emergency-band__copy b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); color: #fff; line-height: 1.1; letter-spacing: -.01em;
}
.emergency-band__copy span { font-size: .95rem; color: rgba(255,255,255,.88); }
.emergency-band__btns { display: flex; gap: .7rem; flex-wrap: wrap; }
.emergency-band .btn-light { background: #fff; color: var(--accent-600); }
.emergency-band .btn-light:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); }
.emergency-band .btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.emergency-band .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 600px){ .emergency-band__btns .btn { flex: 1 1 0; } }

/* ---- Utility-bar "Se habla español" item ---- */
.utility-bar__item--es .ic { width: 15px; height: 15px; color: var(--accent-300); }
@media (max-width: 1080px){ .utility-bar__item--es { display: none; } }

/* ---- Heritage medallion (hero) — reuses .award-card styling as a credential seal ---- */
.award-card__est { font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .26em; color: var(--ink-2); margin-bottom: .12rem; }
.award-card__since { font-size: 1.18rem; letter-spacing: .16em; }

/* ---- Service-area block (town chips + counties, no private address) ---- */
.area-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; }
.area-towns { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.2rem; }
.area-towns li { display: flex; align-items: center; gap: .55rem; color: var(--ink); font-weight: 500; font-size: 1rem; }
.area-towns .ic { width: 16px; height: 16px; color: var(--accent-300); flex-shrink: 0; }
.area-counties { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .94rem; }
.area-counties .ic { width: 18px; height: 18px; color: var(--accent-300); flex-shrink: 0; }
.area-counties b { color: #fff; font-weight: 600; }
.area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: stretch; }
/* let .area-card be the direct grid child so it stretches to match the map height */
.area-grid > [data-mount="servicearea"] { display: contents; }
.area-grid .map-embed { width: 100%; height: 100%; min-height: 340px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.area-grid .map-embed iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: grayscale(.35) contrast(1.05) brightness(.92); }
@media (max-width: 860px){ .area-grid { grid-template-columns: 1fr; } .area-grid .map-embed, .area-grid .map-embed iframe { min-height: 300px; height: 340px; } }

/* ---- Credentials list (about + trust blocks) ---- */
.cred-list { list-style: none; padding: 0; display: grid; gap: .8rem; }
.cred-list li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-2); font-size: .96rem; }
.cred-list .ic { width: 20px; height: 20px; color: #69DB7C; flex-shrink: 0; margin-top: 2px; }
.cred-list b { color: #fff; }

/* ---- Footer service-area column ---- */
.footer-area .footer-map { margin-top: 0; }
.footer-area .footer-map iframe { height: 150px; }
.footer-towns { margin-top: .8rem; font-size: .8rem; color: var(--ink-3); line-height: 1.6; }

/* ---- Hours-card emergency note ---- */
.hours-card__note { display: flex; align-items: center; gap: .55rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-2); }
.hours-card__note .ic { width: 18px; height: 18px; color: var(--accent-300); flex-shrink: 0; }
.section--paper .hours-card__note { border-color: var(--paper-line); color: var(--paper-ink-2); }