/* heiman-deliveries — delivery page + card media (photo or video) */

/* ----- Hero ----- */
.hfd-hero { width: 100%; background: var(--ink, #1a1a1a); }
.hfd-hero__img { display: block; width: 100%; height: auto; }
.hfd-hero--video { padding: 0; }

/* ----- Video player (hero + gallery) ----- */
.hfd-video { margin: 0; }
.hfd-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}
.hfd-video__frame iframe,
.hfd-video__frame video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
}
.hfd-video__frame--oembed { aspect-ratio: auto; }
.hfd-video__frame--oembed iframe { position: static; aspect-ratio: 16 / 9; height: auto; }
.hfd-video__caption {
    font-family: var(--fs-mono, monospace);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--steel, #646970);
    padding: 10px 0 0;
}
.hfd-video--hero .hfd-video__caption { padding: 10px 16px 12px; color: #c9c4b8; background: var(--ink, #1a1a1a); }

.hfd-videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 780px) { .hfd-videos { grid-template-columns: 1fr; } }

/* ----- Cards: video-only deliveries ----- */
.hfd-card__media { position: relative; }
.hfd-card__media .hfd-thumb--letterboxed { transform: scale(1.34); } /* crop YouTube hqdefault black bars */
.hfd-card__play {
    position: absolute;
    left: 50%; top: 50%;
    width: 64px; height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(194, 36, 31, .92); /* --red */
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    transition: transform .2s, background .2s;
    pointer-events: none;
}
.hfd-card__play::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    margin: -11px 0 0 -6px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}
.hfd-card:hover .hfd-card__play { transform: scale(1.08); background: var(--red, #c2241f); }
.hfd-card__badge {
    position: absolute;
    left: 12px; bottom: 12px;
    padding: 5px 9px;
    background: rgba(26, 26, 26, .85);
    color: #fff;
    font-family: var(--fs-mono, monospace);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    pointer-events: none;
}

/* ----- Video promoted to the top of a video-only delivery page ----- */
.hfd-slot--video {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    background: #000 !important;
    padding: 0 !important;
}
.hfd-slot--video::before, .hfd-slot--video::after { display: none !important; }
.hfd-hero--promoted { width: 100%; }
h1 + .hfd-hero--promoted, header + .hfd-hero--promoted { margin: 24px 0 32px; }

/* ----- Hero video: thumbnail + play button, becomes the real player on click ----- */
.hfd-video__facade { display: block; cursor: pointer; text-decoration: none; color: #fff; }
.hfd-video__facade img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s, filter .3s;
}
.hfd-video__facade img.hfd-thumb--letterboxed { transform: scale(1.34); }
.hfd-video__facade::after { /* soft darkening so the button reads */
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 100%);
}
.hfd-video__play {
    position: absolute; z-index: 2;
    left: 50%; top: 50%;
    width: 96px; height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    background: var(--red, #c2241f);
    box-shadow: 0 6px 28px rgba(0,0,0,.45);
    transition: transform .2s;
}
.hfd-video__play::after {
    content: ""; position: absolute;
    left: 50%; top: 50%;
    margin: -17px 0 0 -10px;
    border-style: solid;
    border-width: 17px 0 17px 28px;
    border-color: transparent transparent transparent #fff;
}
.hfd-video__cta {
    position: absolute; z-index: 2;
    left: 50%; top: calc(50% + 64px);
    transform: translateX(-50%);
    font-family: var(--fs-cond, sans-serif);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.hfd-video__facade:hover .hfd-video__play,
.hfd-video__facade:focus-visible .hfd-video__play { transform: scale(1.08); }
.hfd-video__facade:focus-visible { outline: 3px solid var(--red, #c2241f); outline-offset: 3px; }
@media (max-width: 600px) {
    .hfd-video__play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
    .hfd-video__play::after { margin: -12px 0 0 -7px; border-width: 12px 0 12px 20px; }
    .hfd-video__cta { top: calc(50% + 46px); font-size: 12px; }
}

/* ----- Hero mode: video sits in the theme's hero background behind the title ----- */
.hfd-slot--cover { overflow: hidden; background: #000; }
.hfd-slot--cover .hfd-hero,
.hfd-slot--cover .hfd-video,
.hfd-slot--cover .hfd-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
.hfd-slot--cover .hfd-video__caption,
.hfd-slot--cover .hfd-video__play,
.hfd-slot--cover .hfd-video__cta,
.hfd-slot--cover .hfd-video__facade::after { display: none; } /* theme's own overlay darkens it */
.hfd-slot--cover .hfd-video__facade { cursor: default; }

/* Playing: player fills the (now 16:9) hero, above the title/overlay */
.hfd-video__player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.hfd-slot--playing { pointer-events: auto !important; opacity: 1 !important; filter: none !important; }

.hfd-video-close {
    position: absolute; z-index: 5;
    top: 14px; right: 14px;
    padding: 8px 14px;
    border: 0; border-radius: 2px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-family: var(--fs-cond, sans-serif);
    font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    cursor: pointer;
}
.hfd-video-close:hover, .hfd-video-close:focus-visible { background: var(--red, #c2241f); }

/* "Watch the video" button under the department name */
.hfd-watch-btn {
    display: inline-flex; align-items: center; gap: 12px;
    margin: 22px 0 0;
    padding: 14px 24px 14px 18px;
    border: 0; border-radius: 2px;
    background: var(--red, #c2241f);
    color: #fff;
    font-family: var(--fs-cond, sans-serif);
    font-weight: 700; font-size: 15px; letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer;
    position: relative; z-index: 3;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
    transition: transform .15s, background .15s;
}
.hfd-watch-btn:hover, .hfd-watch-btn:focus-visible { transform: translateY(-2px); background: #a51d19; }
.hfd-watch-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hfd-watch-btn__icon {
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; position: relative; flex: none;
}
.hfd-watch-btn__icon::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    margin: -6px 0 0 -3px;
    border-style: solid; border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent var(--red, #c2241f);
}
.hfd-hero-clickable:not(.hfd-hero-playing) { cursor: pointer; }
/* Theme's dark scrim must not sit over the playing video */
.hfd-hero-playing .delivery-hero__scrim { display: none; }