/* Wellington Fish Videos — cards + lightbox */

/* Card */
.wfv-card {cursor: pointer; display: block; text-decoration: none; color: inherit; -webkit-user-select: none; user-select: none;}
.wfv-card__poster {position: relative; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--color-green-dark, #1A3729);}
.wfv-card__media {position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .3s ease-in-out;}
.wfv-card:hover .wfv-card__media, .wfv-card:focus-visible .wfv-card__media {transform: scale(1.04);}
.wfv-card:focus-visible {outline: 2px solid var(--color-gold, #C49A6C); outline-offset: 3px;}

/* Duration chip */
.wfv-card__duration {position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; background: var(--color-green-dark, #1A3729); color: #fff; font-family: var(--font-body, sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; padding: 0.4em 0.9em;}

/* Play button */
.wfv-card__play {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 64px; height: 64px; background: var(--color-gold, #C49A6C); border: none; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; border-radius: 50%;}
.wfv-card__play svg {width: 22px; height: 22px; margin-left: 3px; fill: #fff;}
.wfv-card:hover .wfv-card__play, .wfv-card:focus-visible .wfv-card__play {opacity: 1;}

/* Text below the poster */
.wfv-card__content {padding-top: 1rem;}
.wfv-card__eyebrow {display: block; font-family: var(--font-body, sans-serif); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gold, #C49A6C); margin: 0 0 10px;}
.wfv-card--secondary .wfv-card__title, .wfv-card--grid .wfv-card__title {font-size: clamp(16px, 2.5vw, 18px); max-width: 95%; line-height: 1.6;}
.wfv-card__intro {font-family: var(--font-body, sans-serif); font-size: 1rem; font-weight: 300; color: #4E5D54; margin: 1rem 0 0; line-height: 1.6; max-width: 34em;}

/* Hero card — poster beside a white text panel */
.wfv-card--hero {display: grid; grid-template-columns: 58fr 42fr;}
.wfv-card--hero .wfv-card__content {display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 2.5rem 5rem;}
.wfv-card--hero .wfv-card__title {font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; -webkit-line-clamp: 3;}
.wfv-card__cta {display: inline-flex; align-items: center; gap: 0.75em; background: var(--color-green, #004A33); color: #fff; font-family: var(--font-body, sans-serif); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 1.2em 2.4em; transition: background .3s ease-in-out;}
.wfv-card--hero:hover .wfv-card__cta, .wfv-card--hero:focus-visible .wfv-card__cta {background: var(--color-green-dark, #1A3729);}

/* Primary card — front page feature, poster flexes to fill */
.wfv-card--primary {display: flex; flex-direction: column;}
.wfv-card--primary .wfv-card__poster {flex: 1 1 auto; aspect-ratio: auto; min-height: 18.75rem;}
.wfv-card--primary .wfv-card__content {padding-top: 2rem;}
.wfv-card--primary .wfv-card__title {font-size: clamp(1.375rem, 2vw, 1.625rem); margin-bottom: 10px;}

/* Lightbox */
.wfv-lightbox {position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease;}
.wfv-lightbox.is-active {opacity: 1; visibility: visible;}
.wfv-lightbox__backdrop {position: absolute; inset: 0; cursor: pointer; background: rgba(0, 36, 25, 0.86); backdrop-filter: blur(5px);}
.wfv-lightbox__container {position: relative; z-index: 1; width: min(90vw, 1000px);}
.wfv-lightbox__close {position: absolute; top: -2.75rem; right: -0.25rem; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; opacity: 0.7; transition: opacity 0.2s;}
.wfv-lightbox__close:hover, .wfv-lightbox__close:focus {opacity: 1; outline: none;}
.wfv-lightbox__video {position: relative; padding-bottom: 56.25%; height: 0; background: #000;}
.wfv-lightbox__video iframe {position: absolute; inset: 0; width: 100%; height: 100%; border: none;}

/* Archive layout */
.wfv-archive__grid-title {font-family: var(--font-heading, Georgia, serif); font-weight: 400; font-size: 1.75rem; color: var(--color-green-dark, #1A3729); margin: 0 0 2rem;}
.wfv-archive .wfv-archive__grid {row-gap: 3rem;}

/* Media queries */

@media (max-width: 1440px) {
    .wfv-card--hero .wfv-card__content {padding: 50px;}
}

@media (max-width: 56.25em) {
    .wfv-card--hero {grid-template-columns: 1fr;} 
    .wfv-card--hero .wfv-card__content {padding: 1.5rem 0 0;}
    .wfv-card--hero .wfv-card__title {font-size: 1.5rem;} 
    .wfv-card--hero .wfv-card__intro {display: none;} 
    .wfv-card--primary {display: block;} 
    .wfv-card--primary .wfv-card__poster {aspect-ratio: 16 / 9; min-height: 0;}
}

@media (max-width: 500px) {
    .wfv-archive .wfv-archive__grid {row-gap: unset;}
}

@media (hover: none) {
    .wfv-card__play {opacity: 1; width: 48px; height: 48px;} 
    .wfv-card__play svg {width: 18px; height: 18px;}
}

@media (prefers-reduced-motion: reduce) {
    .wfv-card__media, .wfv-card__play, .wfv-card__cta, .wfv-lightbox {transition: none;}
}