/* =============================================================================
   SUVA — Home page sections (loaded on /). Uses tokens from styles.css.
   ========================================================================== */

/* Clinic introduction ------------------------------------------------------- */
.home-intro__points { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; margin-top: 1.75rem; }
.home-intro__points li { display: flex; align-items: center; gap: .6rem; font-weight: 500; color: var(--ink); }
.home-intro__points .ic { width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; flex: none; }
.home-intro__points .ic svg { width: 1.15rem; height: 1.15rem; }

/* Featured services --------------------------------------------------------- */
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.featured-card {
    display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem;
    background: #fff; border: 1px solid var(--border); border-radius: var(--r-card);
    box-shadow: var(--shadow-xs); color: var(--ink);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.featured-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: var(--ink); }
.featured-card--pink:hover { border-color: #f6c9df; }
.featured-card--teal:hover { border-color: #b8e6e1; }
.featured-card .ic { width: 3rem; height: 3rem; border-radius: 12px; display: grid; place-items: center; flex: none; }
.featured-card .ic svg { width: 1.5rem; height: 1.5rem; }
.featured-card b { display: block; font-size: calc(1.02rem + 1px); }
.featured-card span { font-size: calc(.82rem + 1px); color: var(--muted); }
.featured-card .go { margin-left: auto; color: var(--muted); flex: none; }
.featured-card .go svg { width: 1.15rem; height: 1.15rem; }
.featured-card--pink:hover .go { color: var(--pink-ink); }
.featured-card--teal:hover .go { color: var(--teal-ink); }

/* Testimonials -------------------------------------------------------------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.testi-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
    border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 1.6rem;
}
.testi-stars { display: flex; gap: .15rem; color: #F5A623; margin-bottom: .9rem; }
.testi-stars svg { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke: none; }
.testi-text { color: var(--text); font-size: calc(.96rem + 1px); margin-bottom: 1.4rem; flex: 1; }
.testi-foot { display: flex; align-items: center; gap: .8rem; }
.testi-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--soft-teal); color: var(--teal-ink); font-weight: 700; flex: none; }
.testi-meta b { display: block; color: var(--ink); font-size: calc(.95rem + 1px); line-height: 1.2; }
.testi-meta span { font-size: calc(.8rem + 1px); color: var(--muted); }
.testi-google { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-size: calc(.72rem + 1px);
    font-weight: 600; color: var(--muted); }
.testi-google svg { width: 1rem; height: 1rem; }

/* Gallery preview ----------------------------------------------------------- */
/* Before/after teasers — graphic cases blurred until the viewer opts in. */
.home-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.home-gallery-item {
    margin: 0; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border);
    background: #fff; box-shadow: var(--shadow-xs);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.home-gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.home-gallery-item__media { position: relative; line-height: 0; background: var(--bg-alt); }
.home-gallery-item__media.is-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--border); }
.home-gallery-item__media img { width: 100%; height: auto; display: block; }
.home-gallery-item__media.is-pair img { aspect-ratio: 1/1; object-fit: cover; height: 100%; }
.home-gallery-item figcaption {
    padding: .7rem .85rem; font-size: calc(.8rem + 1px); font-weight: 600; color: var(--ink);
    line-height: 1.35; text-align: center;
}
/* Blur gate */
.home-gallery-item.is-sensitive .home-gallery-item__media img {
    filter: blur(14px) saturate(.55);
    transition: filter .35s var(--ease);
}
.home-gallery-item.is-sensitive.is-revealed .home-gallery-item__media img { filter: blur(0) saturate(.9); }
.home-gallery-item__reveal {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .25rem; cursor: pointer;
    background: rgba(26,43,60,.45); border: 0; color: #fff; padding: .5rem;
    font-size: calc(.72rem + 1px); font-weight: 600; text-align: center;
    line-height: 1.3; /* parent sets line-height:0 for the image; reset it here */
    transition: opacity .3s var(--ease), visibility .3s;
}
.home-gallery-item__reveal svg { width: 1.25rem; height: 1.25rem; }
.home-gallery-item__reveal:hover { background: rgba(26,43,60,.55); }
.home-gallery-item.is-revealed .home-gallery-item__reveal { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    .home-gallery-item.is-sensitive .home-gallery-item__media img { transition: none; }
}
.home-gallery-cta { text-align: center; margin-top: 2rem; }

/* Location ------------------------------------------------------------------ */
.home-location { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; align-items: stretch; }
.home-map { border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-height: 340px; }
.home-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.home-loc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-panel);
    box-shadow: var(--shadow-sm); padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; }
.home-loc-card h3 { font-size: calc(1.3rem + 1px); margin-bottom: 1.1rem; }
.home-loc-list { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.home-loc-list li { display: flex; gap: .8rem; align-items: flex-start; }
.home-loc-list .ic { width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; flex: none; }
.home-loc-list .ic svg { width: 1.2rem; height: 1.2rem; }
.home-loc-list b { display: block; color: var(--ink); font-size: calc(.95rem + 1px); }
.home-loc-list a, .home-loc-list span { color: var(--text); font-size: calc(.92rem + 1px); }
.home-loc-list a:hover { color: var(--teal-ink); }
.home-loc-actions { margin-top: auto; display: flex; gap: .6rem; flex-wrap: wrap; }

/* Responsive ---------------------------------------------------------------- */
@media (max-width: 900px) {
    .featured-grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: 1fr; }
    .home-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .home-location { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .featured-grid { grid-template-columns: 1fr; }
    .home-loc-actions .btn { flex: 1 1 auto; }
}