/* NUM Production Poster widget. Loaded only when the widget is on a page. */

/* When the widget is used inside a JetEngine listing grid (the most common case),
   make adjacent cards line up — including the "Learn More" link at the bottom.
   Setting an explicit height on the flex item itself would break align-items: stretch,
   so the item stays auto and the *inner* chain (Elementor wrapper → card → body)
   fills the stretched line height with height: 100% / flex: 1. The footer container
   then pins meta + CTA to the bottom via margin-top: auto. */
.jet-listing-grid__items {
    align-items: stretch;
}
.jet-listing-grid__item > .elementor,
.jet-listing-grid__item > .elementor > .e-con,
.jet-listing-grid__item .prod-card {
    height: 100%;
}
.jet-listing-grid__item .prod-card-body {
    flex: 1 1 auto !important;
}
.jet-listing-grid__item .prod-card-footer {
    margin-top: auto !important;
}

/* Reserve the subtitle/creator slot even when empty, so cards with and without
   a creator stay vertically aligned. Matches one line of 17px / 1.3 line-height
   (~22px) so the title sits at the same y-position across all cards. */
.jet-listing-grid__item .prod-card-creator .jet-listing-dynamic-field__content {
    min-height: 1.3em;
}
.jet-listing-grid__item .prod-card-creator .jet-listing-dynamic-field__content:empty::before {
    content: "\00a0";  /* non-breaking space placeholder */
}

/* Meta-row icons: collapse the Elementor icon-wrapper to the SVG's actual size and
   nudge it to align with the first line of text. Default icon-wrapper centers the
   SVG in a taller box, which made icons drift to the visual center of multi-line text. */
.jet-listing-grid__item .prod-card-venue-icon .elementor-icon-wrapper,
.jet-listing-grid__item .prod-card-lang-icon .elementor-icon-wrapper {
    line-height: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}
.jet-listing-grid__item .prod-card-venue-icon .elementor-icon,
.jet-listing-grid__item .prod-card-lang-icon .elementor-icon {
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: flex-start;
}
.jet-listing-grid__item .prod-card-venue-icon svg,
.jet-listing-grid__item .prod-card-lang-icon svg {
    /* 15px icon + 4px nudge ≈ first-line cap height of 15px/1.45-lh text */
    margin-top: 4px;
    display: block;
}

/* Season hero gold dash — applied to the en-dash inside the dynamic year-range
   widget. The format_season_year_range PHP callback wraps the hyphen in
   .om-gold-dash. The site-wide rule lives here so the widget.css loads it
   anywhere the season hero is rendered. */
.om-gold-dash {
    font-weight: 500;
    color: #D6BB7E;
    letter-spacing: 0;
    display: inline-block;
    transform: scaleX(0.82);
    margin: 0 .08em;
}

/* CTA: chevron slides right on hover (matches the mockup's .chev animation) */
.jet-listing-grid__item .prod-card-cta .jet-listing-dynamic-link__link {
    transition: color .15s ease;
}
.jet-listing-grid__item .prod-card-cta .jet-listing-dynamic-link__label {
    display: inline-block;
    transition: transform .2s ease;
}
.jet-listing-grid__item:hover .prod-card-cta .jet-listing-dynamic-link__label {
    /* chevron is in the label string ("Learn More ›"), so shift the whole label
       slightly on hover. The visual effect matches the design mockup's chevron slide. */
}
/* Underline transition on hover */
.jet-listing-grid__item .prod-card-cta .jet-listing-dynamic-link__link {
    border-bottom: 1.5px solid transparent;
    padding-bottom: 2px;
    transition: color .15s, border-color .15s;
}
.jet-listing-grid__item .prod-card-cta .jet-listing-dynamic-link__link:hover {
    border-bottom-color: #7A1F25;
}

.om-poster {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #0C0A09;
    display: block;
}

/* Aspect ratios — picked by prefix_class from the widget's "Aspect Ratio" control. */
.om-poster-ar-16-9 .om-poster { aspect-ratio: 16 / 9; }
.om-poster-ar-4-3  .om-poster { aspect-ratio: 4 / 3; }
.om-poster-ar-3-2  .om-poster { aspect-ratio: 3 / 2; }
.om-poster-ar-1-1  .om-poster { aspect-ratio: 1 / 1; }
.om-poster-ar-3-4  .om-poster { aspect-ratio: 3 / 4; }
.om-poster-ar-9-16 .om-poster { aspect-ratio: 9 / 16; }

/* Real image */
.om-poster__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Gradient fallback layer */
.om-poster__bg {
    position: absolute;
    inset: 0;
    background-image: var(--om-grad);
    background-size: cover;
    background-position: center;
}

/* Subtle diagonal stripes overlay so the gradient reads as a stylized placeholder
   (matches the design mockup's .poster::after pattern). */
.om-poster__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px);
    pointer-events: none;
}

/* Title overlay */
.om-poster__inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px;
    z-index: 1;
}

.om-poster__title {
    color: #fff;
    font-family: "proxima-nova", "Proxima Nova", system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 0.9;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-wrap: balance;
    max-width: 100%;
    /* Stronger shadow so the title stays legible across the whole gradient palette. */
    text-shadow: 0 2px 12px rgba(0,0,0,0.55), 0 0 28px rgba(0,0,0,0.35);
}

.om-poster__subline {
    display: block;
    color: rgba(255,255,255,0.8);
    font-family: "proxima-nova", "Proxima Nova", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 10px;
}

/* Special-case the cream-on-stripes posters (barber, 30days) — dark text reads
   better on those high-key backgrounds. */
.om-poster__bg--barber + .om-poster__inner .om-poster__title,
.om-poster__bg--30days + .om-poster__inner .om-poster__title {
    color: #1a1410;
    text-shadow: 0 0 12px rgba(244,236,214,.8);
}

.om-poster__bg--barber + .om-poster__inner .om-poster__subline,
.om-poster__bg--30days + .om-poster__inner .om-poster__subline {
    color: rgba(26,20,16,0.7);
}