/* =============================================================
   VIDEO CARD — inline-sized (not full container width).
   Source: ~720px wide, video on visual-left + title to its visual-right
   both compact. Dark frame; orange play button overlay.
   ============================================================= */
.video-card {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    max-width: 760px;
    margin-inline: auto;
    min-height: 240px;
}

.video-card__media {
    position: relative;
    max-width: 60%;
    width: 100%;
    background: #000;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.video-card__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.video-card__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    z-index: 1;
    text-decoration: none;
}

.video-card__play-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
}

.video-card__text {
    max-width: 40%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    color: var(--color-white);
    text-align: center;
}

.video-card__title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--color-white);
}

.video-card__subtitle {
    font-size: 16px;
    margin: 0;
    color: var(--color-white);
    opacity: 0.85;
}

@media (max-width: 1024px) {
    .video-card {
        flex-direction: column;
        min-height: 0;
        max-width: none;
    }

    .video-card__media {
        flex-basis: auto;
    }

    .video-card__title {
        font-size: 24px;
    }
}

/* =============================================================
   MEDIA GRID — 2-up native <video> tiles with browser controls.
   Source uses raw video elements at ~550px each; we let the browser
   render its own controls bar.
   ============================================================= */
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.media-tile {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.page--esim .hero__overlay {
    align-items: flex-start;
    padding: 0 80px 0 0;
}

.page--esim .hero__heading,
.page--esim .hero__subtitle {
    max-width: 700px;
    margin-right: 8vw;
    font-size: 96px;
    line-height: 1;
    text-align: right;
}

@media only screen and (max-width: 1530px) {

    .page--esim .hero__heading,
    .page--esim .hero__subtitle {
        max-width: 660px;
        margin-right: 0;
        font-size: 85px;
    }
}

.page--esim .hero__heading {
    font-weight: 900;
    color: #000;
}

.page--esim .hero__subtitle {
    margin-top: 0;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .media-grid {
        grid-template-columns: 1fr;
    }

    .page--esim .hero__overlay {
        display: none;
    }
}

/* Features section heading: 40/500 navy (override base 55/600) */
.page--esim .section__heading h2 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-heading);
}

@media (max-width: 1024px) {
    .page--esim .section__heading h2 {
        font-size: 28px;
        line-height: 1.15;
    }
}

/* Feature cards — eSIM uses navy descriptions (not gray), and slightly
   larger title/body to match source typography */
.page--esim .features-grid {
    justify-content: space-around;
}

.page--esim .feature-card {
    max-width: 200px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 12px;
    text-align: center;
    box-shadow: none;
}

.page--esim .feature-card__icon {
    height: 80px;
    width: auto;
    align-self: center;
}

.page--esim .feature-card__title {
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-heading);
    text-align: center;
}

.page--esim .feature-card__body {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-heading);
    text-align: center;
}

@media (max-width: 1024px) {
    /* Source mobile renders the 4 cards in a 2x2 grid; base .features-grid
     forces a 1-col stack. Override back to row-wrap with 2-up at 50%. */
    .page--esim .features-grid {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    .page--esim .features-grid > .feature-card {
        max-width: calc(50% - 8px);
        width: 100%;
        min-width: 0;
    }

    .page--esim .feature-card__icon {
        height: 56px;
    }

    .page--esim .feature-card__title {
        font-size: 20px;
    }

    .page--esim .feature-card__body {
        font-size: 16px;
    }
}

/* Media-grid — figure wrapper with h4 label above each video */
.page--esim .media-tile-wrap {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.page--esim .media-tile__heading {
    margin: 0;
    font-size: 35px;
    font-weight: 600;
    line-height: 1;
    color: rgb(0, 0, 0);
    text-align: center;
}

/* Video section — source = white-bg row with a small ~423px video on the
   visual-LEFT (RTL end) + a 45/600 black caption on the visual-RIGHT
   (RTL start). Replaces the old dark .video-card frame for this page. */
.page--esim .esim-video-section {
    background: var(--color-white);
}

.page--esim .esim-video {
    max-width: 100%;
    display: flex;
    flex-direction: row-reverse; /* caption first in DOM, but visually-right in RTL */
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.page--esim .esim-video__player {
    flex: 0 0 auto;
    width: 423px;
    height: 238px;
    background: #000;
    border-radius: 6px;
    display: block;
}

.page--esim .esim-video__caption {
    flex: 0 0 auto;
    margin: 0;
    font-size: 45px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -2.8px;
    color: rgb(0, 0, 0);
    text-align: start;
}

@media (max-width: 1024px) {
    /* DOM order is video → caption; column-reverse stacks caption ABOVE video to match source */
    .page--esim .esim-video {
        flex-direction: column-reverse;
        gap: 16px;
        align-items: center;
    }

    .page--esim .esim-video__player {
        width: 360px;
        height: 203px;
        max-width: 100%;
    }

    /* Source mobile keeps caption at 45/600 — do NOT shrink */
    .page--esim .esim-video__caption {
        font-size: 45px;
        line-height: 1.5;
        text-align: center;
    }
}

/* Form-band — orange heading supports <br>, kept at 34/600 source size.
   Override base h2 which sits at 34/lh34 already, but ensure line-height
   accommodates the wrapped 2nd line */
.page--esim .form-band__content h2 {
    font-size: 34px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
    margin: 0 0 14px;
}

@media (max-width: 1024px) {
    .page--esim .form-band__content h2 {
        font-size: 23px;
        line-height: 1;
    }

    /* Source mobile uses the eSIM/family-style background image */
    .page--esim .form-band__bg {
        background-image: url("https://we-com.co.il/wp-content/uploads/2024/12/wecom-homepage-14.png");
        opacity: 1;
    }
}

/* FAQ heading — source uses h3 but section uses h2; force 40/600 navy
   instead of the 55px base treatment. Scope to the FAQ section so the
   features heading above isn't affected. Source keeps 40px on mobile. */
.page--esim .esim-faq-section .section__heading h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-heading);
}

@media (max-width: 1024px) {
    .page--esim .esim-faq-section .section__heading h2 {
        font-size: 40px;
        line-height: 1;
    }
}

/* FAQ items inherit the unified base. */


/* =============================================================
   VIDEOS SECTION (between features + form). Lead row = video on one
   side + heading (orange brush underline) + subtitle on the other;
   then a 2-up grid of device-tutorial videos. Page-scoped to esim.
   ============================================================= */
.page--esim .videos__lead {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-block-end: 48px;
}

.page--esim .videos__lead > .videos__player {
    flex: 1 1 0;
    min-width: 0;
}

.page--esim .videos__lead-text {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.page--esim .videos__player video {
    max-width: 100%;
    width: 100%;
    display: block;
    height: 320px;
    border-radius: 12px;
    margin: 0 auto;
    background: #000;
}

.page--esim .videos__lead-heading {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-heading);
    margin: 0;
}

.page--esim .videos__brush {
    display: block;
    width: 150px;
    height: 16px;
    margin: 4px auto 0;
}

.page--esim .videos__lead-subtitle {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-heading);
    margin: 10px 0 0;
}

.page--esim .videos__grid {
    display: flex;
    gap: 40px;
}

.page--esim .videos__card {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.page--esim .videos__card-label {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-heading);
    margin: 0 0 16px;
}

@media (max-width: 1024px) {
    .page--esim .videos__lead {
        flex-direction: column;
        gap: 24px;
    }

    .page--esim .videos__grid {
        flex-direction: column;
        gap: 32px;
    }

    .page--esim .videos__player video {
        height: 200px;
    }

    .page--esim .videos__lead-heading,
    .page--esim .videos__lead-subtitle {
        font-size: 30px;
    }

    .page--esim .videos__card-label {
        font-size: 20px;
    }
}