/**
 * PLGC "The Grass Really is Greener Here" Section — greener-section.css
 *
 * Figma measurements (canvas = 1440 px wide):
 *   Section bg:    #567915 → #2D5032 gradient (180°)
 *   Tiles:         338 × 453 px each, gap = 30px (4 cols), flush to edges
 *   Tile radius:   5px on outer corners
 *   Overlay:       bottom 39% transparent → rgba(0,0,0,0.82)
 *   Link label:    Open Sans SemiBold 20px, white, underlined, bottom of tile
 *   Testimonial:   Open Sans Italic 32px / 48px, white, centered
 *   Attribution:   Open Sans Regular 24px / 36px, white, centered
 *
 * Changes in 1.6.0:
 *   - Entire tile is a clickable <a> block (not just the label)
 *   - Feather decorative image added (top-right)
 *   - Background image layer support (.plgc-greener--has-bg)
 *   - Testimonial slider styles + WCAG controls
 *
 * @package PLGC
 * @since   1.6.0
 */

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener {
    background: linear-gradient(180deg, #567915 41.83%, #2D5032 100%);
    /* Vertical rhythm: 73px top matches the 73px grid-to-testimonial gap,
       giving the whole section a consistent internal cadence.            */
    padding: 73px 0 79px;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* No transform — transform + overflow:hidden on the same element
       causes child images to go invisible on real iOS Safari (WebKit bug).
       position:relative provides the stacking context we need. */
}

/* Optional background image layer — blended over the gradient */
.plgc-greener--has-bg {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.plgc-greener--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(86,121,21,0.88) 41.83%, rgba(45,80,50,0.92) 100%);
    pointer-events: none;
    z-index: 0;
}
.plgc-greener--has-bg > * {
    position: relative;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATHER ACCENT (decorative, bottom-right)
   Figma node 42551:9351: width 705px, height 509px, opacity 17%, bottom-right of section
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener__feather {
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(320px, 49%, 705px);
    height: auto;
    opacity: 0.55;
    mix-blend-mode: soft-light;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener__header {
    max-width: 1202px;
    /* 73px below matches the 73px grid-to-testimonial gap — creates a
       uniform internal spacing rhythm throughout the section.           */
    margin: 0 auto 73px;
    padding: 0 40px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.plgc-greener__title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 2.25rem;     /* 36px */
    line-height: 3rem;      /* 48px */
    color: #FFFFFF;
    margin: 0 0 20px;
}

.plgc-greener__subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;      /* 24px */
    line-height: 2rem;      /* 32px */
    color: #FFFFFF;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TILE GRID
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener__grid {
    display: flex;
    flex-direction: row;
    gap: 30px;
    list-style: none;
    margin: 0 auto 73px;
    padding: 0;
    width: 100%;
    /* Cap grid width so tiles don't stretch into extreme landscape on ultrawide
       monitors (2560px+). 1800px accommodates growth beyond the 1440px Figma
       frame without distorting image composition. The green gradient background
       still fills edge-to-edge behind the capped grid. */
    max-width: 1800px;
    position: relative;
    z-index: 2;
}

/* ─────────────────────────────────────────────────────────────────────────────
   INDIVIDUAL TILE
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener__tile {
    flex: 1 1 0;
    min-width: 0;
    /* Use aspect-ratio instead of a fixed height so tiles grow taller as they
       grow wider — keeps image composition intact on wider viewports.
       338 × 453 px (Figma) ≈ 3:4 ratio. min-height prevents tiles from
       collapsing if aspect-ratio isn't supported. */
    aspect-ratio: 3 / 4;
    min-height: 400px;
    max-height: 600px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: #233C26;
    /* No transform on overflow:hidden tiles — iOS Safari invisible-content bug.
       Hover scale on the img child still works; browser composites as needed. */
}

/* Outer corner radius matching Figma — flush edges at viewport width */
.plgc-greener__grid li:first-child { border-radius: 0 5px 5px 0; }
.plgc-greener__grid li:last-child  { border-radius: 5px 0 0 5px; }
.plgc-greener__grid li:not(:first-child):not(:last-child) { border-radius: 5px; }

/* When the grid is centered (wider than max-width), tiles no longer touch the
   viewport edges — give all tiles uniform rounded corners */
@media (min-width: 1801px) {
    .plgc-greener__grid li:first-child,
    .plgc-greener__grid li:last-child {
        border-radius: 5px;
    }
}

.plgc-greener__tile--placeholder {
    background: #2D5032;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TILE LINK — entire tile is clickable
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener__tile-link {
    display: block;
    position: absolute;
    inset: 0;
    text-decoration: none;
    color: #FFFFFF;
    /* Ensure at least 44px touch target — tile height far exceeds this */
}

/* Tile photo */
.plgc-greener__tile-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    inset: 0;
    /* No base transform — transform: scale(1) forced a GPU compositing layer
       on this element, which made it invisible on iOS Safari when the parent
       overflow:hidden container was NOT also GPU composited.
       The hover scale still works because transform only applies on :hover. */
    transform-origin: center center;
    transition: transform 0.5s ease;
}

/* Subtle scale on hover so users can tell the tile is clickable */
.plgc-greener__tile-link:hover .plgc-greener__tile-img,
.plgc-greener__tile-link:focus-visible .plgc-greener__tile-img {
    transform: scale(1.04);
}

/* Gradient overlay — darker bottom for WCAG text legibility */
.plgc-greener__tile-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(0, 0, 0, 0.88) 100%
    );
    pointer-events: none;
    z-index: 1;
    transition: background 0.5s ease;
}

/* Subtle dark tint on hover to reinforce clickability */
.plgc-greener__tile-link:hover .plgc-greener__tile-overlay,
.plgc-greener__tile-link:focus-visible .plgc-greener__tile-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.12) 0%,
        rgba(0, 0, 0, 0.92) 100%
    );
}

/* Tile label — underlined, anchored to bottom of tile */
.plgc-greener__tile-label {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;     /* 20px */
    line-height: 1.6875rem; /* 27px */
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 12px 16px;
    display: block;
    z-index: 2;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.plgc-greener__tile-link:hover .plgc-greener__tile-label,
.plgc-greener__tile-link:focus-visible .plgc-greener__tile-label {
    color: #FFAE40;
    text-decoration-color: #FFAE40;
}

/* WCAG 2.4.7 — visible focus ring on the full tile link */
.plgc-greener__tile-link:focus-visible {
    outline: 3px solid #FFAE40;
    outline-offset: -4px;
    border-radius: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TESTIMONIAL — single
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener__testimonial-wrap {
    max-width: 1192px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.plgc-greener__testimonial {
    /* single testimonial, no extra wrapper needed */
}

.plgc-greener__quote {
    margin: 0;
    padding: 0;
    border: none;
}

.plgc-greener__quote p {
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 2rem;        /* 32px */
    line-height: 3rem;      /* 48px */
    color: #FFFFFF;
    margin: 0 0 20px;
}

.plgc-greener__cite {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1.5rem;      /* 24px */
    line-height: 2.25rem;   /* 36px */
    color: #FFFFFF;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TESTIMONIAL SLIDER
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-greener__testimonial-slider {
    position: relative;
}

/* Visually hidden live region for screen reader announcements */
.plgc-greener__sr-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Arrows flank the quote on the same row */
.plgc-greener__slider-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.plgc-greener__slides-track {
    flex: 1;
    min-width: 0;
}

.plgc-greener__slide {
    display: none;
    animation: plgc-slide-fade 0.3s ease;
}

.plgc-greener__slide.is-active {
    display: block;
}

@keyframes plgc-slide-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Prev / Next arrow buttons */
.plgc-greener__slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;   /* 44px min touch target */
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.plgc-greener__slider-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #FFAE40;
    color: #FFAE40;
}

.plgc-greener__slider-btn:focus-visible {
    outline: 3px solid #FFAE40;
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — TABLET (≤ 1024px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .plgc-greener__grid {
        flex-wrap: wrap;
        padding: 0 20px;
    }

    /* 2×2 grid: each tile is exactly half width minus half the gap.
       Use aspect-ratio (4:3) instead of a fixed pixel height so tiles scale
       proportionally at every screen width — avoids the "awkward bottom" issue
       where a 360px tile on a 500px-wide screen looks portrait-cropped. */
    .plgc-greener__tile {
        flex: 1 1 calc(50% - 15px);
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 4 / 3;
    }

    /* Tile image must fill the aspect-ratio container */
    .plgc-greener__tile-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    /* Reset corner radii for wrapped layout */
    .plgc-greener__grid li:first-child,
    .plgc-greener__grid li:last-child,
    .plgc-greener__grid li:not(:first-child):not(:last-child) {
        border-radius: 5px;
    }

    .plgc-greener__header {
        margin-bottom: 60px;
    }

    .plgc-greener__quote p {
        font-size: 1.5rem;
        line-height: 2.25rem;
    }

    .plgc-greener__cite {
        font-size: 1.25rem;
    }

    .plgc-greener__feather {
        width: 180px;
        opacity: 0.35;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE (≤ 767px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .plgc-greener {
        padding: 40px 0 60px;
    }

    /* Feather: sits at the bottom-right corner (matching desktop intent) within
       the section bounds. Must explicitly set top:auto to cancel the base rule's
       bottom:0 — if both top and bottom are set on a height:auto element, the
       browser stretches it and the image looks distorted/invisible.
       Width increased to clamp(260px, 70vw, 380px) so the feather is clearly
       visible at phone sizes — the previous 160px was too subtle. */
    .plgc-greener__feather {
        width: clamp(260px, 70vw, 380px);
        bottom: 0;
        top: auto;
        right: 0;
        opacity: 0.50;
    }

    .plgc-greener__header {
        padding: 0 24px;
        margin-bottom: 40px;
    }

    .plgc-greener__title {
        font-size: 1.75rem;
        line-height: 2.5rem;
    }

    .plgc-greener__subtitle {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    /* Single column on mobile. Use the same portrait ratio as the desktop
       tiles (338 × 453 px ≈ 3:4) so images don't crop awkwardly and the
       dark gradient at the bottom covers enough of the tile for WCAG-compliant
       text contrast. 16:9 landscape was too wide/squat on a narrow screen. */
    .plgc-greener__grid {
        flex-direction: column;
        gap: 16px;
        padding: 0 24px;
        margin-bottom: 48px;
    }

    .plgc-greener__tile {
        flex: none;
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: none;
        aspect-ratio: 3 / 4;
        border-radius: 5px !important;
        /* No transform or isolation — these trigger the iOS Safari
           invisible-content bug when combined with overflow:hidden. */
    }

    /* No transform on images inside overflow:hidden — resolved iOS Safari issue */

    /* Strengthen the bottom gradient at mobile so white link text always
       passes WCAG AA 4.5:1 regardless of image brightness. */
    .plgc-greener__tile .plgc-greener__tile-overlay {
        background: linear-gradient(
            to bottom,
            transparent 40%,
            rgba(0, 0, 0, 0.92) 100%
        );
    }

    .plgc-greener__testimonial-wrap {
        padding: 0 24px;
    }

    .plgc-greener__quote p {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

    .plgc-greener__cite {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .plgc-greener__slider-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .plgc-greener__slider-row {
        gap: 0.75rem;
    }

} /* end @media (max-width: 767px) */

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .plgc-greener__tile-img {
        transition: none;
    }
    .plgc-greener__tile-overlay {
        transition: none;
    }
    .plgc-greener__tile-label {
        transition: none;
    }
    .plgc-greener__slider-btn {
        transition: none;
    }
    .plgc-greener__slide {
        animation: none;
    }
}