/* ==========================================================================
   Hire Minds Academy - Career Success / reel slider (shared section)
   Markup: resources/views/frontend/partials/career-success.blade.php
   Pushed by any page that includes the partial (home, testimonials).
   Self-contained: the tokens fall back, so this works without home.css.
   ========================================================================== */

.hm-reels {
    position: relative;
    padding: 100px 0 50px;
    overflow: hidden;
}
.hm-reels__bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150vmax;
    height: 150vmax;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}
.hm-reels__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .12;
    filter: blur(60px);
    animation: hm-spin 90s linear infinite;
    will-change: transform;
}
.hm-reels__deco {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    animation: hm-twinkle 6s ease-in-out infinite;
}
.hm-reels__deco--star1 { top: 90px;  left: 6%;  width: 30px; }
.hm-reels__deco--star2 { top: 140px; right: 7%; width: 24px; animation-delay: -2.5s; }
.hm-reels__container {
    position: relative;
    z-index: 1;
}

/* Header */
.hm-reels__head {
    text-align: center;
    margin-bottom: 30px;
}
.hm-reels__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.hm-reels__label-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--hm-yellow), var(--hm-gold-dark));
}
.hm-reels__label-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #843D21;
}
.hm-reels__title {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 700;
    color: #222222;
}
.hm-reels__desc {
    max-width: 620px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.8;
    color: #6D6357;
}
.hm-reels__handle {
    font-weight: 700;
    color: #843D21;
    text-decoration: none;
    transition: color .25s var(--hm-ease, cubic-bezier(.22, .7, .2, 1));
}
.hm-reels__handle i { color: #E1306C; }
.hm-reels__handle:hover { color: #E1306C; }

/* Swiper — vertical padding gives room for the hover-lift + shadow */
.hm-reels__swiper {
    padding: 30px 4px 20px;
    margin-top: 20px;
}
.hm-reels__slide { height: auto; }

/* Floating wrapper (float) → card (hover). Separate elements avoid transform clashes. */
.hm-reel-float {
    animation: hm-reel-float 7s ease-in-out infinite;
    will-change: transform;
}
@keyframes hm-reel-float {
    0%, 100% { transform: translateY(-8px); }
    50%      { transform: translateY(8px); }
}
.hm-reels__slide:nth-child(5n+1) .hm-reel-float { animation-delay: 0s; }
.hm-reels__slide:nth-child(5n+2) .hm-reel-float { animation-delay: -1.4s; }
.hm-reels__slide:nth-child(5n+3) .hm-reel-float { animation-delay: -2.8s; }
.hm-reels__slide:nth-child(5n+4) .hm-reel-float { animation-delay: -4.2s; }
.hm-reels__slide:nth-child(5n+5) .hm-reel-float { animation-delay: -5.6s; }

.hm-reel {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(42, 29, 20, .12);
    transition: transform .35s ease, box-shadow .35s ease;
}
.hm-reel:hover,
.hm-reel:focus-visible {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(42, 29, 20, .22);
    outline: none;
}
.hm-reel__img,
.hm-reel__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #16100b;          /* shown while the poster/video loads */
    transition: transform .5s ease;
}
.hm-reel:hover .hm-reel__img,
.hm-reel:focus-visible .hm-reel__img,
.hm-reel:hover .hm-reel__video,
.hm-reel:focus-visible .hm-reel__video { transform: scale(1.08); }

/* Once the clip is rolling the play badge is redundant — fade it out. */
.hm-reel__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .65), rgba(0, 0, 0, .10));
    opacity: 0;
    transition: opacity .35s ease;
}
.hm-reel:hover .hm-reel__overlay,
.hm-reel:focus-visible .hm-reel__overlay { opacity: 1; }

.hm-reel__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #843D21;
    font-size: 11px;
    font-weight: 600;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.hm-reel__badge i { color: #E1306C; }

/* Navigation */
.hm-reels__nav {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}
.hm-reels__navbtn {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform .25s var(--hm-ease, cubic-bezier(.22, .7, .2, 1)), box-shadow .25s var(--hm-ease, cubic-bezier(.22, .7, .2, 1)), background .25s var(--hm-ease, cubic-bezier(.22, .7, .2, 1));
}
.hm-reels__navbtn--prev { background: #FBEDC7; color: #843D21; }
.hm-reels__navbtn--next { background: linear-gradient(135deg, var(--hm-gold-2), var(--hm-gold-dark)); color: #fff; }
.hm-reels__navbtn:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 26px rgba(180, 140, 40, .32);
}
.hm-reels__navbtn.swiper-button-disabled { opacity: .5; cursor: default; }

/* Reduced motion — hold the rotating background + card float still */
@media (prefers-reduced-motion: reduce) {
    .hm-reels__bg img,
    .hm-reels__deco,
    .hm-reel-float { animation: none !important; }
}

/* ==========================================================================
   In-page reel player (lightbox) — a reel/post link plays here in a popup.
   ========================================================================== */
.hm-reel-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.hm-reel-modal[hidden] { display: none; }

.hm-reel-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 20, .74);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hm-reel-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(400px, 92vw);
    animation: hm-reel-pop .28s cubic-bezier(.22, .61, .36, 1);
}

@keyframes hm-reel-pop {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
}

.hm-reel-modal__frame {
    position: relative;
    width: 100%;
    height: min(720px, 86vh);
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.hm-reel-modal__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hm-reel-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 15px;
    color: #17161A;
    background: #fff;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    transition: transform .3s var(--hm-ease, cubic-bezier(.22, .7, .2, 1));
}
.hm-reel-modal__close:hover,
.hm-reel-modal__close:focus-visible { transform: rotate(90deg); }

/* Mobile — quieter eyebrow / intro (the heading is sized at the end of the file) */
@media (max-width: 575.98px) {
    .hm-reels__label-text { font-size: 11px; letter-spacing: .12em; }
    .hm-reels__desc { font-size: 14px; line-height: 1.7; }
}

@media (max-width: 480px) {
    .hm-reel-modal__close { top: -8px; right: -8px; }
}

/* Small screens — same heading scale as the other sections (see home.css). */
@media (max-width: 767.98px) {
    .hm-reels__title {
        margin-bottom: 12px;
        font-size: clamp(1.15rem, 4.6vw, 1.6rem);
        line-height: 1.25;
    }
}

/* ==========================================================================
   REEL PLAYER CONTROLS

   Player chrome in the same shape a video site uses: a big centre button, and a
   bar along the foot with play/pause, a seekable progress track, elapsed time,
   sound and full screen.

   Only one clip runs at a time — the card nearest the middle of the deck, which
   carries .is-centre. Everything else is paused and silent, so the section is
   one video playing rather than five competing.
   ========================================================================== */

/* The card is no longer a click-through to Instagram (the badge is), so it
   should not read as one big button. */
.hm-reel { cursor: default; }

/* Chrome sits above the darkening overlay. */
.hm-reel__big,
.hm-reel__controls,
.hm-reel__badge { z-index: 3; }

/* Keep the overlay up whenever the controls are meaningful, so the bar always
   has something to sit against rather than floating over a bright frame. */
.hm-reel.is-centre .hm-reel__overlay { opacity: 1; }

/* ------------------------------ Centre button ------------------------------ */
.hm-reel__big {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 3px;          /* optically centres the play triangle */
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: #843D21;
    font-size: 19px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .28s ease, transform .28s ease, background .2s ease;
}

.hm-reel:hover .hm-reel__big,
.hm-reel:focus-within .hm-reel__big {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* A paused card says so without needing a hover — that is the cue that this is
   not the one playing. */
.hm-reel:not(.is-playing) .hm-reel__big {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.hm-reel__big:hover { background: #fff; transform: translate(-50%, -50%) scale(1.08); }
.hm-reel__big:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Playing and untouched: get out of the way of the clip. */
.hm-reel.is-playing:not(:hover):not(:focus-within) .hm-reel__big { opacity: 0; }

/* ------------------------------ Control bar ------------------------------ */
.hm-reel__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .28s ease, transform .28s ease;
}

/* Shown on hover, and kept up on the card that is actually playing so the sound
   toggle is reachable without hunting for it. */
.hm-reel:hover .hm-reel__controls,
.hm-reel:focus-within .hm-reel__controls,
.hm-reel.is-centre .hm-reel__controls {
    opacity: 1;
    transform: none;
}

.hm-reel__ctrl {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.hm-reel__ctrl:hover { background: rgba(255, 255, 255, .22); transform: scale(1.1); }
.hm-reel__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Sound on is worth spotting from across the deck. */
.hm-reel:not(.is-muted) [data-reel-mute] { background: var(--hm-gold, #E9A320); color: #23180F; }

/* ------------------------------ Progress ------------------------------ */
.hm-reel__scrub {
    flex: 1 1 auto;
    position: relative;
    height: 4px;
    min-width: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    cursor: pointer;
}

/* A 4px track is too thin to hit reliably; this widens the target without
   changing how it looks. */
.hm-reel__scrub::before {
    content: "";
    position: absolute;
    inset: -8px 0;
}

.hm-reel__scrub-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--hm-gold, #E9A320);
}

.hm-reel__scrub:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.hm-reel__time {
    flex: 0 0 auto;
    min-width: 34px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;   /* stops the bar twitching as digits change */
    color: rgba(255, 255, 255, .92);
}

/* ------------------------------ The centre card ------------------------------ */
.hm-reel.is-centre {
    box-shadow: 0 26px 60px rgba(42, 29, 20, .3);
}

/* The float animation would drift the playing card away from the middle it was
   picked for, and shifts it under the cursor while the bar is being used. */
.hm-reels__slide:has(.hm-reel.is-centre) .hm-reel-float { animation: none; }

/* The hover zoom fights the control bar — it slides the video under a fixed
   overlay. Only the idle cards keep it. */
.hm-reel.is-centre:hover .hm-reel__video { transform: none; }

@media (max-width: 767.98px) {
    .hm-reel__controls { gap: 6px; padding: 8px 9px 10px; }
    .hm-reel__ctrl { width: 26px; height: 26px; font-size: 12px; }
    .hm-reel__time { min-width: 30px; font-size: 11px; }
    /* Touch has no hover, so the bar stays up on the card that is playing. */
    .hm-reel.is-centre .hm-reel__controls { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-reel-float { animation: none !important; }
    .hm-reel__big,
    .hm-reel__controls,
    .hm-reel__ctrl { transition: none !important; }
}

/* ==========================================================================
   Linked reels — cards added by pasting a YouTube or Instagram link rather than
   uploading a clip. Their own player is framed here, so both are click-to-play;
   the uploaded cards above are the ones that autoplay.
   ========================================================================== */
.hm-reel--embed {
    cursor: default;
    background:
        radial-gradient(120% 90% at 50% 12%, rgba(233, 163, 32, .22), transparent 62%),
        linear-gradient(160deg, #3A2A1C 0%, #241A12 55%, #16100B 100%);
}
/* Instagram's embed is three stacked bands: their header (avatar, username,
   "View profile"), the video, then their footer (like/comment/share, "View more
   on Instagram", the like count).

   None of it can be styled — it is a cross-origin iframe, so no CSS of ours
   reaches inside it. What CAN be done is crop: make the iframe taller than the
   card by exactly the two bands, pull it up by the header, and let the card's
   overflow:hidden clip both. What is left showing is the video, filling the card
   like an uploaded clip does.

   The two heights are measured from Instagram's current embed. They are declared
   as variables because they are the one part of this that Instagram can change
   without warning — if a strip of their chrome ever reappears at the top or
   bottom of a card, adjust these two numbers and nothing else. */
.hm-reel--embed {
    --ig-header: 54px;
    --ig-footer: 108px;
}
/* YouTube's iframe is the player and nothing else — there are no chrome bands
   to crop away, so the crop is switched off and it fills the card exactly. A
   Short is already portrait and fills it edge to edge; a landscape video is
   letterboxed by YouTube inside that frame, which is the honest result. */
.hm-reel--embed.hm-reel--youtube {
    --ig-header: 0px;
    --ig-footer: 0px;
}
.hm-reel__embed {
    position: absolute;
    top: calc(var(--ig-header) * -1);
    left: 0;
    display: block;
    width: 100%;
    height: calc(100% + var(--ig-header) + var(--ig-footer));
    border: 0;
    opacity: 0;
    transition: opacity .35s ease;
}
.hm-reel--embed.is-embedded .hm-reel__embed { opacity: 1; }

/* Holding state, until the section scrolls into view and the src is attached. */
.hm-reel__embed-wait {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: rgba(255, 255, 255, .55);
    pointer-events: none;
    transition: opacity .3s ease;
}
.hm-reel--embed.is-embedded .hm-reel__embed-wait { opacity: 0; }

/* The float and hover-lift look wrong on a card the visitor is about to click
   into — an iframe that drifts is hard to hit. */
.hm-reel--embed:hover { transform: none; box-shadow: 0 16px 40px rgba(42, 29, 20, .12); }
.hm-reels__slide:has(.hm-reel--embed) .hm-reel-float { animation: none; }