/* ============================================
   Park.dog — Equipment Page CSS
   Owns: pillar headers, product cards, kit cards,
   "Most Popular" badge, design + QR text, pillar items.
   Edit this file for equipment-page changes; other
   Claudes can work on css/*.css in parallel without
   touching style.css.
   ============================================ */

/* ---- Pillar Header (decorative circle, grid layout) ---- */
.parkdog-pillar-header { position: relative; overflow: hidden; }
.parkdog-pillar-header::after {
    content: ''; position: absolute; top: -60px; right: -60px;
    width: 200px; height: 200px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}
.parkdog-pillar-header.e-con {
    /* Flex row: badge | text_container, vertically centred. The text
       container holds heading + description; centring on the row container
       puts the badge at the midpoint of the FULL text block. */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    column-gap: 28px;
    /* Constrain the inner content to the same 1200px-centered area used by
       the product grids below — the colored band stays full-bleed, but the
       icon + heading + description sit inside the same column. */
    padding-left: max(32px, calc((100% - 1200px) / 2)) !important;
    padding-right: max(32px, calc((100% - 1200px) / 2)) !important;
}
/* Inner text container holds heading + description stacked vertically.
   Pinned via CSS (not just Elementor's container settings) so saving in
   the editor — which can reset default flex props — doesn't break the
   layout. */
.parkdog-pillar-header__text.e-con,
.parkdog-pillar-header > .e-con {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex: 1 1 auto !important;
    gap: 4px;
    min-width: 0;
}

/* ---- Pillar Items pushed to bottom of panel ---- */
.parkdog-pillar-items { margin-top: auto; }

/* ---- Pillar Item Arrows ---- */
.parkdog-pillar-item {
    font-family: var(--font-display); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 6px; padding-left: 16px; position: relative;
}
.parkdog-pillar-item::before { content: '\2192'; position: absolute; left: 0; font-size: 11px; }

/* ---- Pillar Tagline + Desc (opacity from HTML design) ---- */
.parkdog-pillar-tagline { font-style: italic; font-size: 14px; margin-bottom: 8px; opacity: 0.7; }
.parkdog-pillar-desc-text { font-size: 14px; max-width: 600px; line-height: 1.6; opacity: 0.65; }
#move .parkdog-pillar-tagline,
#move .parkdog-pillar-desc-text,
#play .parkdog-pillar-tagline,
#play .parkdog-pillar-desc-text { color: #FFFFFF; }
#balance .parkdog-pillar-tagline,
#balance .parkdog-pillar-desc-text { color: #1B4332; }

/* ---- Product Cards (Loop Grid items): 1px border, 20px radius, equal heights ---- */
.parkdog-product-card {
    border-radius: 20px !important;
    border: 1px solid #E8E4DC !important;
    height: 100% !important;
}
.parkdog-product-card .elementor-element-eq_body.e-con { gap: 6px !important; }
.parkdog-product-card .elementor-widget-heading .elementor-heading-title {
    margin: 0 !important;
    color: #1B4332 !important;
}
.elementor-loop-container { align-items: stretch !important; }
.elementor-loop-container > .e-loop-item { height: 100%; display: flex; }
.elementor-loop-container > .e-loop-item > .parkdog-product-card { width: 100%; }

/* ---- Ready-to-Order Kit Cards: 20px radius (HTML uses --radius-md) ---- */
.parkdog-grid-3 > .e-con,
.parkdog-popular-card { border-radius: 20px !important; }

/* Kit titles uppercase like HTML's .card h3 */
.elementor-element-eqk_s_title .elementor-heading-title,
.elementor-element-eqk_c_title .elementor-heading-title,
.elementor-element-eqk_d_title .elementor-heading-title {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* "Most Popular" badge centered on the card's top border line.
   .elementor-widget defaults to position:relative, so the badge's
   absolute positioning would anchor to its widget wrapper unless we
   neutralise the wrapper. */
.parkdog-popular-card { overflow: visible !important; }
.parkdog-popular-card > .elementor-element-eqk_c_badge {
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.parkdog-popular-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: var(--terra); color: white; padding: 4px 20px; border-radius: 20px;
    font-family: var(--font-display); font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; white-space: nowrap; z-index: 1;
}

/* ---- Design / QR text spacing ---- */
.parkdog-design-text p + p { margin-top: 16px !important; }
.parkdog-qr-text-2 { margin-top: 12px !important; }

/* ---- Equipment Cards: clickable cursor on the outer card ----
   Each card has a hidden <template class="parkdog-eq-detail-tpl"> at the
   bottom rendered by the [parkdog_equipment_detail] shortcode. JS in
   scripts.js shows that content in a modal when the card is clicked. */
.elementor-element-eq_card,
.parkdog-eq-clickable { cursor: pointer; }
/* Hide the shortcode widget that hosts the <template> (template tags are
   invisible by default but the widget wrapper is not). */
.elementor-element-eq_detail_tpl { display: none !important; }

/* ---- Carousel container: stop card borders from being clipped at the
   edges. Swiper sets overflow:hidden on `.swiper`, so a card on the edge
   would otherwise lose part of its 1px border, and the hover translate-up
   (-4px) would be clipped at the top. Padding-top matches Elementor's
   bottom pagination padding (16px) so the swiper's geometric midpoint
   equals the card row's midpoint — which is what we anchor the arrows to. */
.elementor-widget-loop-carousel .swiper {
    padding: 16px 4px !important;
}
/* Tune Elementor's arrow CSS variables. Elementor's own widget CSS is
   loaded AFTER the child theme, so a plain `.elementor-widget-loop-carousel`
   selector loses the cascade. Bumping to `.elementor-element.elementor-
   widget-loop-carousel` matches Elementor's specificity and our rule wins
   by source order.
   `--arrow-*-caption-spacing` defaults to 15px (intended for gallery widgets
   where the caption sits below the image). We want plain center, so 0.
   `--arrow-*-translate-y: -50%` shifts the arrow up by half its own height
   so the CSS top:50% anchor lines up with the arrow's vertical centre. */
.elementor-element.elementor-widget-loop-carousel {
    --arrow-prev-caption-spacing: 0px;
    --arrow-next-caption-spacing: 0px;
    --arrow-prev-translate-y: -50%;
    --arrow-next-translate-y: -50%;
    --arrow-size: 18px;   /* Elementor default 25px is too big; 14px was too small */
}
/* Card hover lift — explicit so the padding above always frames it. */
.elementor-widget-loop-carousel .parkdog-product-card {
    transition: transform 0.25s, box-shadow 0.25s;
}
.elementor-widget-loop-carousel .parkdog-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(27, 67, 50, 0.08);
}

/* ---- Custom arrow styling on carousels ----
   Elementor's default is a thin chevron at viewport edge with no chrome.
   We give it a soft circle button with hover state matching the
   header burger toggle. Vertical centering is done via Elementor's own
   `--arrow-*-translate-y: -50%` CSS variables set further up; we don't
   override `transform` here because Elementor's rule has higher specificity
   and would clobber ours. */
.elementor-widget-loop-carousel .elementor-swiper-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid #E8E4DC;
    color: var(--forest);
    box-shadow: 0 4px 16px rgba(27, 67, 50, 0.08);
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.elementor-widget-loop-carousel .elementor-swiper-button svg {
    fill: currentColor;
    display: block;
    /* Elementor's chevron paths are drawn off-centre within their 1000-unit
       viewBox (chevron-right path leans right, chevron-left leans left), so
       the icon looks nudged toward one edge of the white circle. Pulling
       each arrow's SVG 4px in the opposing direction puts the visual
       centre of the chevron at the centre of the button. */
}
.elementor-widget-loop-carousel .elementor-swiper-button-prev svg {
    transform: translateX(-1px);
}
.elementor-widget-loop-carousel .elementor-swiper-button-next svg {
    transform: translateX(1px);
}
.elementor-widget-loop-carousel .elementor-swiper-button:hover,
.elementor-widget-loop-carousel .elementor-swiper-button:focus {
    background: var(--terra);
    border-color: var(--terra);
    color: var(--white);
    box-shadow: 0 6px 20px rgba(212, 113, 78, 0.25);
}
/* Swiper's disabled state (when not infinite, the first/last reached) */
.elementor-widget-loop-carousel .elementor-swiper-button.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
    box-shadow: none;
}
/* Position the arrows just outside the carousel edges, vertically
   centered on the card row (not the whole swiper, which includes the
   12px hover padding). The y-offset = (padding-top - padding-bottom) / 2
   from center; since they're equal, just translateY(-50%) is fine. */
.elementor-widget-loop-carousel .elementor-swiper-button-prev { left: -22px; }
.elementor-widget-loop-carousel .elementor-swiper-button-next { right: -22px; }
@media (max-width: 1024px) {
    .elementor-widget-loop-carousel .elementor-swiper-button-prev { left: -8px; }
    .elementor-widget-loop-carousel .elementor-swiper-button-next { right: -8px; }
}
@media (max-width: 767px) {
    .elementor-widget-loop-carousel .elementor-swiper-button { width: 36px; height: 36px; }
    .elementor-widget-loop-carousel .elementor-swiper-button-prev { left: 0; }
    .elementor-widget-loop-carousel .elementor-swiper-button-next { right: 0; }
}

/* Auto-hide arrows + pagination when the carousel doesn't need them.
   Swiper marks both nav buttons as `.swiper-button-disabled` when there's
   nothing to scroll (start AND end reached simultaneously = no scrolling
   possible). We use `:has()` to detect that state on the widget root and
   hide the controls entirely. */
.elementor-widget-loop-carousel:has(.elementor-swiper-button-prev.swiper-button-disabled):has(.elementor-swiper-button-next.swiper-button-disabled) .elementor-swiper-button,
.elementor-widget-loop-carousel:has(.elementor-swiper-button-prev.swiper-button-disabled):has(.elementor-swiper-button-next.swiper-button-disabled) .swiper-pagination {
    display: none;
}
/* Also honour Swiper's `swiper-button-lock` class for browsers / configs
   where `watchOverflow` is enabled by Elementor (acts as a second signal). */
.elementor-widget-loop-carousel .elementor-swiper-button.swiper-button-lock,
.elementor-widget-loop-carousel .swiper-pagination-lock {
    display: none;
}

/* ---- Equipment Detail Modal ----
   Single shared overlay built by JS, content cloned from the clicked card's
   template. Fixed at root level (above sticky header) with a soft backdrop
   and a centered scrollable dialog. */
.parkdog-eq-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s, visibility 0.25s;
}
.parkdog-eq-modal[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
}
.parkdog-eq-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(27, 67, 50, 0.55);
}
.parkdog-eq-modal__dialog {
    position: relative;
    width: min(880px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}
.parkdog-eq-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 1px solid #E8E4DC;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--forest);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    z-index: 1;
}
.parkdog-eq-modal__close:hover,
.parkdog-eq-modal__close:focus {
    background: rgba(212, 113, 78, 0.08);
    border-color: var(--terra);
}
.parkdog-eq-modal__content {
    overflow-y: auto;
    padding: 0;
}
body.parkdog-eq-modal-open { overflow: hidden; }

/* ----- Modal body styling ----- */
.parkdog-eq-detail__header {
    padding: 48px 48px 0;
}
.parkdog-eq-detail__eyebrow {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--terra);
    margin-bottom: 8px;
}
.parkdog-eq-detail__title {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--forest);
    line-height: 1.15;
    margin: 0 0 12px;
}
.parkdog-eq-detail__lede {
    font-size: 16px;
    line-height: 1.7;
    color: var(--slate);
    margin: 0 0 24px;
}
.parkdog-eq-detail__hero img {
    width: 100%;
    height: 280px;
    max-height: 36vh;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
@media (max-width: 768px) {
    .parkdog-eq-detail__hero img { height: 200px; }
}
.parkdog-eq-detail__body {
    padding: 24px 48px 0;
    font-size: 15px;
    line-height: 1.8;
    color: var(--charcoal);
}
.parkdog-eq-detail__body p { margin: 0 0 12px; }
.parkdog-eq-detail__features {
    list-style: none;
    margin: 0;
    padding: 16px 48px 0;
}
.parkdog-eq-detail__features li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: var(--charcoal);
    margin-bottom: 8px;
}
.parkdog-eq-detail__features li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--terra);
}
.parkdog-eq-detail__meta {
    display: flex;
    gap: 8px;
    padding: 16px 48px 0;
    margin: 0;
    font-size: 13px;
    color: var(--slate);
}
.parkdog-eq-detail__meta dt {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--forest);
}
.parkdog-eq-detail__meta dd { margin: 0; }
.parkdog-eq-detail__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 24px 48px 48px;
}
.parkdog-eq-detail__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
}
.parkdog-eq-detail__gallery-item {
    display: block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.2s ease;
}
.parkdog-eq-detail__gallery-item:hover { transform: scale(1.02); }
.parkdog-eq-detail__gallery-item img { transition: opacity 0.2s ease; }
.parkdog-eq-detail__gallery-item:hover img { opacity: 0.92; }

/* ---- Gallery lightbox ----
   Fullscreen overlay that opens above the equipment popup when a
   thumbnail is clicked. Pure vanilla — no dependency. */
.parkdog-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}
.parkdog-lightbox[aria-hidden="false"] { display: flex; }
.parkdog-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    border-radius: 4px;
    cursor: default;
}
.parkdog-lightbox__close,
.parkdog-lightbox__nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    transition: background 0.15s;
}
.parkdog-lightbox__close:hover,
.parkdog-lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); }
.parkdog-lightbox__close { top: 24px; right: 24px; }
.parkdog-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.parkdog-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.parkdog-lightbox__counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    letter-spacing: 0.5px;
}
.parkdog-eq-detail__header + .parkdog-eq-detail__body,
.parkdog-eq-detail__hero + .parkdog-eq-detail__body { padding-top: 24px; }
.parkdog-eq-detail__body:last-child,
.parkdog-eq-detail__features:last-child,
.parkdog-eq-detail__meta:last-child { padding-bottom: 48px; }

/* Mobile */
@media (max-width: 767px) {
    .parkdog-eq-detail__header { padding: 32px 24px 0; }
    .parkdog-eq-detail__title { font-size: 24px; }
    .parkdog-eq-detail__body,
    .parkdog-eq-detail__features,
    .parkdog-eq-detail__meta,
    .parkdog-eq-detail__gallery { padding-left: 24px; padding-right: 24px; }
}

/* ============================================================
   RESPONSIVE — tablet (≤1024) and mobile (≤767).
   ============================================================ */

/* ---- Tablet (≤1024px) ---- */
@media (max-width: 1024px) {
    .parkdog-pillar-header.e-con { padding: 32px 28px !important; }
    .parkdog-pillar-header .elementor-widget-heading h2 { font-size: 24px !important; }
    .parkdog-pillar-desc-text { font-size: 13px !important; }
    /* Reposition the decorative blob to stay inside the parent — the base
       rule's `right: -60px` causes 60px of body scrollWidth overflow at
       tablet widths (clipped visually by overflow:hidden but still counted). */
    .parkdog-pillar-header::after { width: 140px; height: 140px; top: -40px; right: 0; }
    .parkdog-pillar-header.e-con { max-width: 100% !important; }

    /* Playful Design Language: at tablet the two-column grid wraps to
       new rows, but each child stays at ~50% width leaving an empty half.
       Force the wrapped children full-width so the text + QR card each
       use the whole content area. */
    .elementor-element-eq_design_cols { flex-wrap: wrap !important; }
    .elementor-element-eq_design_left,
    .elementor-element-eq_design_right {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---- Mobile (≤767px) ---- */
@media (max-width: 767px) {
    /* Pillar header stacks: icon above text */
    .parkdog-pillar-header.e-con {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left;
        padding: 24px 20px !important;
        row-gap: 12px !important;
    }
    .parkdog-pillar-header .elementor-widget-heading h2 { font-size: 22px !important; line-height: 1.15 !important; }
    .parkdog-pillar-tagline { font-size: 13px !important; }
    .parkdog-pillar-desc-text { font-size: 12px !important; }
    .parkdog-pillar-header::after { width: 100px; height: 100px; top: -40px; right: 0; }
    /* Pillar header is `overflow: hidden` but absolute pseudos still count
       toward scrollWidth in some browsers; clamp the container too. */
    .parkdog-pillar-header.e-con { max-width: 100% !important; }

    /* Product cards: tighter padding on the inner body */
    .parkdog-product-card { border-radius: 16px !important; }
    .parkdog-product-card .elementor-widget-heading .elementor-heading-title { font-size: 16px !important; }

    /* Kit cards: tighter padding */
    .parkdog-grid-3 > .e-con { padding: 24px !important; }

    /* Pillar items list tighter */
    .parkdog-pillar-item { font-size: 11px !important; letter-spacing: 1px !important; }
}