/**
 * PLGC Gallery Sections — gallery-sections.css
 *
 * Implements the exact Figma overlapping-card layout for the three
 * homepage gallery sections:  Golf Outings, Weddings & Events, McChesney's.
 *
 * Key measurements (from Figma, canvas = 1440 px):
 *   Image column : 1116 / 1440 = 77.5 %
 *   Card column  :  708 / 1440 = 49.167 %
 *   Card overlap :  384 / 1440 = 26.667 %  (image width + card width - 100%)
 *   Section height: 609 px (min-height)
 *   Card height   : 368 px  →  centred via align-self: center
 *   Card radius   : 10 px on the two corners facing the image
 *   Yellow accent : 3 px wide vertical line, 233 px tall, 39 px from card left
 *                   (Weddings: 37 px from card RIGHT edge)
 *   Dots          : top-left for left-image sections, top-right for Weddings
 *   Dot size      : ~18 px diameter, active = filled #567915, inactive = white outline
 *
 * @package PLGC
 * @since   1.5.0
 */

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION WRAPPER
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs {
    display: flex;
    flex-direction: row;
    align-items: center;        /* vertically centres the card */
    /* Height tracks 16:9 ratio at the image column's width (77.5vw).
       77.5vw ÷ (16/9) ≈ 43.6vw. Clamp keeps it sane at extremes.
       Result: 1600×900 flyer images show with zero crop at most widths. */
    --gs-height: clamp(500px, 43.6vw, 750px);
    min-height: var(--gs-height);
    overflow: hidden;           /* prevents the negative-margin card bleeding out */
    position: relative;
    width: 100%;
    /* No transform here — transform + overflow:hidden on the same element
       causes absolutely-positioned children to go invisible on real iOS Safari.
       position:relative alone is sufficient for stacking context. */
}

/* ─────────────────────────────────────────────────────────────────────────────
   IMAGE COLUMN (slider wrapper)
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs__image-col {
    flex: 0 0 77.5%;
    width: 77.5%;
    height: var(--gs-height);       /* matches 16:9 at the column width — zero crop on flyers */
    min-height: var(--gs-height);
    align-self: stretch;
    position: relative;
    overflow: hidden;
    /* No transform — see .plgc-gs comment above; same iOS Safari rationale */
}

/* Image-left:  right-side corners rounded (tr + br) */
.plgc-gs--image-left .plgc-gs__image-col {
    border-radius: 0 10px 10px 0;
}

/* Image-right: left-side corners rounded (tl + bl) */
.plgc-gs--image-right .plgc-gs__image-col {
    border-radius: 10px 0 0 10px;
    order: 2;                   /* push image to end in DOM order (stays right visually) */
}

/* ─────────────────────────────────────────────────────────────────────────────
   SWIPER / SLIDER
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs__slider {
    width: 100%;
    height: var(--gs-height);
    min-height: var(--gs-height);
}

/* Ensure Swiper's internal wrapper also respects the height */
.plgc-gs__slider .swiper-wrapper {
    height: var(--gs-height) !important;
}

.plgc-gs__slide {
    position: relative;
    overflow: hidden;
    height: var(--gs-height);
}

.plgc-gs__slide-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;  /* favour upper-middle — better for outdoor/course shots */
    /* No transform on images inside overflow:hidden — causes iOS Safari
       invisible-content bug. Browser handles compositing automatically. */
}

/* Placeholder when no images uploaded */
.plgc-gs__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: var(--gs-height, 609px);
    background: #e7e4e4;
    color: #333;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    text-align: center;
    padding: 40px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SLIDER DOTS  (Swiper pagination — custom WCAG-friendly styling)
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs__dots {
    position: absolute;
    display: flex;
    flex-direction: row;
    gap: 0;                     /* no gap — padding on each button creates touch area */
    align-items: center;
    top: 34px;                  /* 5.58% × 609px ≈ 34 px */
    z-index: 10;
    width: auto !important;     /* override Swiper's 100% default */
    bottom: auto !important;
    /* Reset Swiper's pagination bar variables — prevents flat white/colored bar */
    --swiper-pagination-progressbar-bg-color: transparent;
    --swiper-pagination-color: #567915;
    background: transparent !important;
    border-radius: 0 !important;
    height: auto !important;
}

/* Dots left-aligned (Golf Outings, McChesney's) */
.plgc-gs__image-col--dots-left .plgc-gs__dots {
    left: 36px;                 /* 3.23% × 1116px ≈ 36 px */
    right: auto;
}

/* Dots right-aligned (Weddings — image is on the right) */
.plgc-gs__image-col--dots-right .plgc-gs__dots {
    right: 40px;
    left: auto;
}

/* Individual dot buttons — Swiper renders these as <button> elements
   when we set bulletElement: 'button' in JS.
   Touch target is 44×44px via padding, NOT min-width, so the visible
   dots stay tight together without large gaps between them. */
.plgc-gs__dots .swiper-pagination-bullet {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Visual size = 0; actual dot is in ::before */
    width: 0 !important;
    height: 0 !important;
    /* Padding creates the 44×44px WCAG touch target */
    padding: 14px !important;              /* 0 + 14 + 14 = 28px... + ::before 16px inside = 44px */
    margin: 0 !important;
    border-radius: 50% !important;
    border: none !important;
    background: transparent !important;   /* prevent Swiper default black/white bg */
    cursor: pointer !important;
    opacity: 1 !important;
    transition: transform 0.15s ease !important;
    position: relative !important;
    box-sizing: content-box !important;
    /* Reset Swiper CSS custom properties that override our sizing */
    --swiper-pagination-bullet-size: 0px;
    --swiper-pagination-bullet-width: 0px;
    --swiper-pagination-bullet-height: 0px;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-inactive-color: transparent;
}

/* The visible dot circle — inactive = solid white filled */
.plgc-gs__dots .swiper-pagination-bullet::before {
    content: '' !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: none !important;
    box-sizing: border-box !important;
    /* Subtle shadow so dots read on both dark and light image backgrounds */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    flex-shrink: 0 !important;
}

/* Active dot — green fill, white outline ring */
.plgc-gs__dots .swiper-pagination-bullet-active::before {
    background: #567915 !important;
    /* white ring + shadow */
    box-shadow: 0 0 0 2px #FFFFFF, 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Focus ring — WCAG 2.4.7 Focus Visible.
   Uses box-shadow instead of outline because outline on a zero-sized
   padded element renders as an elongated rectangle in some browsers.
   box-shadow always follows border-radius for a clean circular ring.  */
.plgc-gs__dots .swiper-pagination-bullet:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #FFAE40, 0 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Hover state — slightly dim inactive dot */
.plgc-gs__dots .swiper-pagination-bullet:hover::before {
    background: rgba(255, 255, 255, 0.65);
}

.plgc-gs__dots .swiper-pagination-bullet-active:hover::before {
    background: #567915;
}

/* Screen reader live region — visually hidden */
.plgc-gs__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;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CONTENT CARD
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs__card {
    flex: 0 0 49.167%;
    width: 49.167%;
    background: #FFFFFF;
    align-self: center;         /* vertically centres card within section */
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;

    /* Subtle shadow so card lifts off the image */
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.10);
}

/* Yellow vertical accent line via ::before pseudo-element
   Sits 39 px from the card's inner (image-facing) edge, 233 px tall, centred. */
.plgc-gs__card::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 233px;
    background: #000000;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ── Image-LEFT layout (Golf Outings, McChesney's) ──────────────────────────
   Card comes after image → overlaps image from the right
   Left corners of card face the image → tl/bl get 10px radius
   Yellow line: 39 px from card LEFT edge
   Text: 63 px from card left, 86 px from card top                          */
.plgc-gs--image-left .plgc-gs__card {
    margin-left: -26.667%;     /* pull card left over the image */
    border-radius: 10px 0 0 10px;
    padding: 86px 60px 57px 63px;
}

.plgc-gs--image-left .plgc-gs__card::before {
    left: 39px;
}

/* ── Image-RIGHT layout (Weddings) ─────────────────────────────────────────
   Card comes before image in DOM → overlaps image from the left
   Right corners of card face the image → tr/br get 10px radius
   Yellow line: 37 px from card RIGHT edge (671 px from card left on 708 px card)
   Text: 120 px from card left (matches Figma canvas x=120)
   Text is right-aligned to match Figma                                     */
.plgc-gs--image-right .plgc-gs__card {
    order: 1;                  /* card comes first visually (left) */
    margin-right: -26.667%;   /* pull card right over the image */
    border-radius: 0 10px 10px 0;
    padding: 86px 63px 57px 120px;
    align-items: flex-end;     /* right-align content */
    text-align: right;
}

.plgc-gs--image-right .plgc-gs__card::before {
    right: 37px;
    left: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   CARD CONTENT
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs__heading {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 2.25rem;         /* 36px */
    line-height: 3rem;          /* 48px */
    color: #000000;
    margin: 0;
}

.plgc-gs__body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1.0625rem;       /* 17px */
    line-height: 2rem;          /* 32px */
    color: #000000;
}

.plgc-gs__body p {
    margin: 0;
}

/* CTA button — matches global .plgc-btn design token */
.plgc-gs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFAE40;
    color: #000000;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9375rem;       /* 15px */
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: 6.25rem;     /* pill shape */
    padding: 0.9375rem 1.25rem;
    min-height: 47px;           /* matches Figma height */
    min-width: 44px;            /* WCAG 2.5.5 */
    border: 2px solid transparent;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.plgc-gs__btn:hover,
.plgc-gs__btn:focus-visible {
    background: #FDBC69;
    color: #000000;
    text-decoration: underline;
}

.plgc-gs__btn:focus-visible {
    outline: 3px solid #233C26;
    outline-offset: 3px;
}

/* Button + badge inline row (McChesney's) */
.plgc-gs__btn-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

/* Badge link wrapper — invisible anchor around the circular logo.
   The badge is decorative/redundant (CTA button is the real interactive element),
   so tabindex=-1 and aria-hidden=true are applied in the PHP to prevent a
   duplicate keyboard stop. The <a> tag just provides the pointer cursor. */
.plgc-gs__badge-link {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 50%;
    text-decoration: none;
    outline-offset: 4px;
}

/* McChesney's badge */
.plgc-gs__badge {
    display: block;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EXPAND BUTTON — opens lightbox with full-size image
   Sits in the bottom corner of the image column.

   Hidden by default, revealed on hover/focus-within so it doesn't clutter
   the gallery at rest but remains available for keyboard and mouse users.
   Can't be removed entirely — it's the keyboard-accessible trigger for the
   lightbox (the image click handler blocks keyboard-generated clicks via
   e.detail === 0, so this button is the only SC 2.1.1 compliant path).

   WCAG 2.1 AA:
     SC 2.1.1 — Native <button>, keyboard operable
     SC 2.5.5 — 44×44px touch target
     SC 2.4.7 — Visible focus ring
     SC 1.4.11 — White icon on dark translucent bg > 3:1 against any image
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs__expand-btn {
    position: absolute;
    z-index: 8;
    bottom: 16px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    /* Hidden at rest — revealed on hover/focus */
    opacity: 0;
    pointer-events: none;
}

/* Reveal when the image column is hovered or contains a focused element */
.plgc-gs__image-col:hover .plgc-gs__expand-btn,
.plgc-gs__image-col:focus-within .plgc-gs__expand-btn {
    opacity: 1;
    pointer-events: auto;
}

/* Always show when the button itself has keyboard focus */
.plgc-gs__expand-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
    outline: 3px solid #FFAE40;
    outline-offset: 2px;
}

/* Image-left (Golf Outings, McChesney's): button in bottom-LEFT (free corner) */
.plgc-gs--image-left .plgc-gs__expand-btn { left: 16px; }

/* Image-right (Weddings): button in bottom-RIGHT (free corner) */
.plgc-gs--image-right .plgc-gs__expand-btn { right: 16px; }

.plgc-gs__expand-btn:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.06);
}

.plgc-gs__expand-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   LIGHTBOX — Full-screen image viewer

   WCAG 2.1 AA:
     SC 2.1.1 — All controls keyboard operable (native buttons)
     SC 2.1.2 — Escape closes, no keyboard trap
     SC 2.4.3 — Focus trapped inside dialog while open
     SC 2.4.7 — Visible focus rings on all controls
     SC 2.5.5 — All buttons ≥ 48×48px
     SC 4.1.2 — role="dialog" aria-modal="true" aria-label
     SC 1.1.1 — Image has alt text
   ───────────────────────────────────────────────────────────────────────────── */
.plgc-gs-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.plgc-gs-lightbox--open {
    opacity: 1;
    visibility: visible;
}

.plgc-gs-lightbox__img-wrap {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plgc-gs-lightbox__img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.plgc-gs-lightbox__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.plgc-gs-lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }

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

.plgc-gs-lightbox__prev,
.plgc-gs-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.plgc-gs-lightbox__prev { left: 16px; }
.plgc-gs-lightbox__next { right: 16px; }

.plgc-gs-lightbox__prev:hover,
.plgc-gs-lightbox__next:hover { background: rgba(255, 255, 255, 0.3); }

.plgc-gs-lightbox__prev:focus-visible,
.plgc-gs-lightbox__next:focus-visible {
    outline: 3px solid #FFAE40;
    outline-offset: 2px;
}

.plgc-gs-lightbox__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    pointer-events: none;
}

.plgc-gs-lightbox--single .plgc-gs-lightbox__prev,
.plgc-gs-lightbox--single .plgc-gs-lightbox__next,
.plgc-gs-lightbox--single .plgc-gs-lightbox__counter { display: none; }

@media (max-width: 767px) {
    .plgc-gs-lightbox__prev,
    .plgc-gs-lightbox__next {
        top: auto;
        bottom: 16px;
        transform: none;
    }
    .plgc-gs-lightbox__counter { bottom: 68px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   McCHESNEY'S SPECIFIC OVERRIDES
   The badge sits next to the button in normal flex flow, vertically centred.

   The badge (126 px) is taller than the button (47 px). A negative bottom
   margin lets the badge extend below the card edge without increasing the
   card's visual height. Top margin stays at 0 so the badge never overlaps
   the body text above — this was a bug when both margins were negative and
   the text wrapped to extra lines at certain viewport widths.
   ───────────────────────────────────────────────────────────────────────────── */

.plgc-gs--mcchesneys .plgc-gs__btn-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: nowrap;
}

.plgc-gs--mcchesneys .plgc-gs__badge-link {
    position: static;
    margin-top: 0;
    margin-bottom: -39.5px;
    transform: none;
    left: auto;
    top: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — TABLET  (≤ 1024 px)
   At tablet, stack vertically. Card drops below image, full width, no overlap,
   no negative margin. Border-radius resets to simple top/bottom pairs.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .plgc-gs {
        flex-direction: column;
        min-height: auto;
    }

    .plgc-gs__image-col,
    .plgc-gs--image-right .plgc-gs__image-col {
        width: 100%;
        flex: none;
        height: 360px;
        min-height: 360px;
        border-radius: 0;
        order: 1;               /* image always on top */
        /* No transform — same iOS Safari reason as base rule */
    }

    .plgc-gs__slider,
    .plgc-gs__slider .swiper-wrapper,
    .plgc-gs__slide,
    .plgc-gs__placeholder {
        height: 360px !important;
        min-height: 360px;
    }

    /* Reset card */
    .plgc-gs__card,
    .plgc-gs--image-left .plgc-gs__card,
    .plgc-gs--image-right .plgc-gs__card {
        width: 100%;
        flex: none;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        padding: 40px 32px;
        align-items: flex-start;
        text-align: left;
        order: 2;               /* card always below */
        box-shadow: none;
    }

    /* Hide the accent line at mobile stacked layout */
    .plgc-gs__card::before,
    .plgc-gs--image-left .plgc-gs__card::before,
    .plgc-gs--image-right .plgc-gs__card::before {
        display: none;
    }

    /* Dots position resets */
    .plgc-gs__image-col--dots-right .plgc-gs__dots {
        left: 20px;
        right: auto;
    }

    /* McChesney's badge: remove the negative margins that were keeping card
       height compact on desktop. On tablet/mobile the card is full-width,
       so the badge flowing inline at full height is fine. */
    .plgc-gs--mcchesneys .plgc-gs__badge-link {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE — MOBILE  (≤ 767 px)
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Override BOTH selectors from the tablet rule — .plgc-gs--image-right
       .plgc-gs__image-col has higher specificity than .plgc-gs__image-col and
       was not being overridden, leaving the Weddings image column 100px taller
       than the other two sections and creating the extra whitespace gap. */
    .plgc-gs__image-col,
    .plgc-gs--image-right .plgc-gs__image-col {
        height: 260px;
        min-height: 260px;
    }

    .plgc-gs__slider,
    .plgc-gs__slider .swiper-wrapper,
    .plgc-gs__slide,
    .plgc-gs__placeholder {
        height: 260px !important;
        min-height: 260px;
    }

    .plgc-gs__card,
    .plgc-gs--image-left .plgc-gs__card,
    .plgc-gs--image-right .plgc-gs__card {
        /* Tighter top padding pulls the heading up close to the image.
           Keep generous bottom so button/badge have breathing room.     */
        padding: 16px 20px 28px;
    }

    /* Weddings: belt-and-braces reset so no desktop padding-top bleeds through */
    .plgc-gs--image-right .plgc-gs__card {
        margin-top: 0 !important;
        padding-top: 32px !important;
    }

    .plgc-gs__heading {
        font-size: 1.75rem;
        line-height: 2.375rem;
    }

    .plgc-gs__body {
        font-size: 1rem;
        line-height: 1.75rem;
    }

    .plgc-gs__dots {
        top: 16px;
        left: 16px !important;
        right: auto !important;
    }

    /* McChesney's badge: slightly larger on mobile so it's not lost
       next to the CTA button */
    .plgc-gs__badge {
        width: 96px;
        height: 96px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION — no slide transitions
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .swiper-wrapper {
        transition-duration: 0ms !important;
    }
    .plgc-gs__btn,
    .plgc-gs__dots .swiper-pagination-bullet,
    .plgc-gs__dots .swiper-pagination-bullet::before {
        transition: none !important;
    }
    .plgc-gs-lightbox {
        transition: none !important;
    }
    .plgc-gs__expand-btn {
        transition: none !important;
    }
}