/*
 * Homepage (_pages/front-page.html, pasted into a Custom HTML block).
 *
 * Loaded whenever is_front_page() is true, whatever that page's real slug is
 * (see fast_custom_theme_page_style_slugs() in inc/enqueue.php).
 *
 * Section grounds alternate white / --color-bg-muted so the page reads as
 * distinct bands without needing borders. Nothing here hardcodes a colour:
 * every value is a :root token from main.css.
 *
 * Contrast notes (WCAG 2.1 AA), because the muted ground is not white:
 *   --color-accent      is 2.80:1 on --color-bg-muted — never used there.
 *   --color-accent-dark is 5.05:1 on --color-bg-muted and 5.53:1 on white,
 *                       so it is the only accent used for text and icons.
 */


/*#region Hero*/
/*
 * Full-bleed photo band: the image is a real <img> (media library, srcset)
 * stretched behind the copy rather than a CSS background, so it stays
 * swappable from wp-admin and still gets responsive sources. Its wrapper is
 * aria-hidden — it is decoration, and the message is in the text on top.
 *
 * Contrast: the scrim is --color-bg-inverse at 72% opacity. Even over a pure
 * white photo that composites to ~#666d71, which is 5.26:1 against white text
 * — AA at any photo. Anything lighter than white text (e.g.
 * --color-accent-light, 3.15:1 worst case) is NOT safe in here.
 *
 * From 1200px up the scrim becomes a left-to-right gradient so the photo shows
 * through on the right. The fade is masked rather than expressed as an rgba()
 * gradient, which keeps --color-bg-inverse the single source of the colour; a
 * browser without mask-image simply keeps a flat scrim. Below 1200px the copy
 * spans almost the whole band, so there is no room to fade without dropping
 * text onto a bright photo — the flat scrim stays.
 */

.home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 320px;
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    overflow: hidden;
}

.home-hero__media {
    position: absolute;
    inset: 0;
    line-height: 0;
}

.home-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-bg-inverse);
    opacity: 0.72;
}

.home-hero__inner {
    position: relative;
    max-width: 900px;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em;
    margin-top: 1.5em;
}

/*#endregion*/


/*#region Why choose us*/
/*
 * One .split row (main.css) with the photo on the right. Only the band's own
 * ground and heading spacing live here; the layout is the shared component's.
 */

.home-trust {
    background: var(--color-bg-muted);
}

.home-trust h2 {
    margin-top: 0;
    margin-bottom: 0.4em;
}
/*#endregion*/


/*#region Specialties*/
/*
 * Title-only photo tiles, reusing the .service-card component from main.css
 * (the same one [service_cards] renders), so the homepage and the Services
 * section stay visually identical. Nothing to add here yet — the section keeps
 * its own region so a homepage-only tweak has somewhere to go.
 */
/*#endregion*/


/*#region Doctors*/

/* Muted ground so the bands keep alternating now that Why Choose Us sits above
   Specialties: hero (dark) - trust (muted) - specialties (white) - doctors
   (muted) - reviews (white) - CTA (dark). Without it three white sections run
   together. The review cards are muted-on-white, so reviews stays white. */
.home-doctors {
    background: var(--color-bg-muted);
}

/* auto-fit rather than a fixed track count: the roster changes, and a hardcoded
   column count leaves a leftover doctor stranded alone in half a row. The three
   specialists fill the wrapper's three tracks exactly; it degrades to two
   columns on tablet and one on phones without a media query. A fourth doctor
   still lands in one row, but a fifth would sit alone under four — cap the grid
   (~1310px) and drop minmax to 220px if the roster ever gets there. */
.home-doctors__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 32px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.home-doctor {
    text-align: center;
}

.home-doctor__photo {
    margin-bottom: 18px;
    line-height: 0;
}

/*
 * 5:6 on every portrait, whatever the source crop. The four inherited headshots
 * are already 1000x1200; the two specialists are not (678x829 and 709x793), so
 * cover trims ~2% off one and ~7% off the sides of the other — both well short
 * of touching a face. The placeholder standing in for a missing headshot gets
 * the same ratio, or it would fall back to the global 3:4 and sit taller than
 * the cards beside it.
 */
.home-doctor__photo img,
.home-doctor__photo .image-placeholder {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 5 / 6;
    object-fit: cover;
}

.home-doctor__name {
    margin: 0 0 0.2em;
    font-size: 1.4em;
}

.home-doctor__credentials {
    margin: 0;
    font-size: 1.1em;
    letter-spacing: 0.04em;
    color: var(--color-accent-dark);
    font-weight: 700;
}

/* The specialty sits a step below the credentials it follows: smaller, quieter
   and unbolded, so the card reads name → letters → what they actually do
   instead of two competing accent lines. */
.home-doctor__role {
    margin: 0.25em 0 0;
    font-size: 0.95em;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/*#endregion*/


/*#region Reviews*/
/*
 * Patient reviews in the shared slider component (main.css #region Slider,
 * behaviour in main.js). Only the card skin lives here — the track, slide
 * widths and controls are generic and reused by any other [data-slider].
 *
 * The slides are flex children of the track, so they already stretch to the
 * tallest card in view; the card fills that height and pushes its byline to
 * the bottom, keeping the bylines on one line across the row.
 */

.review {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 28px;
    background: var(--color-bg-muted);
    border-top: 3px solid var(--color-accent);
}

.review__quote {
    margin: 0;
    flex: 1 1 auto;
}

.review__quote p {
    margin: 0;
}

.review__author {
    margin-top: 18px;
    color: var(--color-accent-dark);
    font-weight: 700;
    font-style: normal;
}

/*#endregion*/