/* =====================================================
   CinemaHook Homepage V1 — Clean Foundation (v2)
   - Uses official --ch-* theme variables (light + dark aware)
   - Cairo font globally
   - Logical properties for RTL/LTR
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ---- Global font enforcement ---- */
html, body,
button, input, textarea, select {
    font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', 'Tahoma', Arial, sans-serif !important;
}

body.page-home-v1 {
    background: var(--ch-bg);
    color: var(--ch-text);
    margin: 0;
}

.hv1-home { display: block; }

.home-shell, .hv1-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 18px;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .home-shell, .hv1-container { padding-inline: 14px; }
}

/* HERO */
.hv1-hero {
    position: relative;
    padding: 36px 16px 28px;
    background: linear-gradient(180deg, var(--ch-surface) 0%, var(--ch-bg) 100%);
    border-bottom: 1px solid var(--ch-border);
}

.hv1-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; }

.hv1-hero__live {
    display: inline-flex; align-items: center;
    padding: 5px 14px; margin-bottom: 18px;
    background: var(--ch-red-soft);
    border: 1px solid rgba(215, 25, 63, 0.20);
    border-radius: 999px;
    font-size: 12px; font-weight: 700; color: var(--ch-red);
}

.hv1-hero__live-dot {
    display: inline-block; width: 8px; height: 8px;
    background: var(--ch-red); border-radius: 50%;
    margin-inline-end: 6px; flex-shrink: 0;
    animation: hv1-pulse 1.8s ease-in-out infinite;
}

@keyframes hv1-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

.hv1-hero__title {
    margin: 0 0 12px;
    font-size: clamp(24px, 5.5vw, 38px);
    font-weight: 850; line-height: 1.25;
    color: var(--ch-text); letter-spacing: -0.015em;
}

.hv1-hero__sub {
    margin: 0 0 22px;
    font-size: clamp(14px, 3vw, 16px);
    color: var(--ch-muted); line-height: 1.6;
    unicode-bidi: plaintext;
}

.hv1-hero__search {
    display: flex; align-items: center;
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 14px; padding: 6px;
    margin-bottom: 16px;
    box-shadow: var(--ch-shadow);
    transition: border-color .2s, box-shadow .2s;
}

.hv1-hero__search:focus-within {
    border-color: var(--ch-red);
    box-shadow: 0 0 0 4px rgba(215, 25, 63, 0.12);
}

.hv1-hero__search-icon {
    padding-inline-start: 14px; padding-inline-end: 6px;
    font-size: 15px; opacity: 0.55;
}

.hv1-hero__search-input {
    flex: 1; border: 0; background: transparent;
    padding: 11px 8px; color: var(--ch-text);
    font-size: 15px; outline: none; min-width: 0;
}

.hv1-hero__search-input::placeholder { color: var(--ch-muted); opacity: 0.85; }

.hv1-hero__search-btn {
    border: 0; padding: 10px 20px;
    background: var(--ch-red); color: #fff;
    font-size: 13.5px; font-weight: 800;
    border-radius: 10px; cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, transform .1s ease;
}

.hv1-hero__search-btn:hover { background: #b21434; }
.hv1-hero__search-btn:active { transform: scale(0.97); }

.hv1-hero__quick {
    display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
}

.hv1-hero__quick a {
    padding: 6px 12px;
    background: var(--ch-bg); border: 1px solid var(--ch-border);
    border-radius: 999px; color: var(--ch-text);
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    transition: all .15s ease;
}

.hv1-hero__quick a:hover {
    background: var(--ch-red-soft);
    border-color: rgba(215, 25, 63, 0.28);
    color: var(--ch-red);
}

/* SECTIONS */
.hv1-section { padding: 26px 0 8px; }

@media (min-width: 768px) { .hv1-section { padding: 36px 0 14px; } }

.hv1-section__head {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    gap: 14px; margin-bottom: 14px;
}

.hv1-section__head-text { flex: 1; min-width: 0; }

.hv1-section__eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--ch-red); margin-bottom: 5px;
}

.hv1-section__title {
    margin: 0;
    font-size: clamp(19px, 4vw, 24px);
    font-weight: 850; color: var(--ch-text);
    line-height: 1.25; letter-spacing: -0.01em;
}

.hv1-section__desc {
    margin: 5px 0 0;
    font-size: 13px; color: var(--ch-muted);
    line-height: 1.55; max-width: 640px;
    unicode-bidi: plaintext;
}

.hv1-section__cta {
    flex-shrink: 0; color: var(--ch-red);
    font-size: 13px; font-weight: 800;
    text-decoration: none; white-space: nowrap;
    padding: 4px 0; transition: color .15s ease;
}

.hv1-section__cta:hover { color: #b21434; }

@media (max-width: 480px) {
    .hv1-section__desc { font-size: 12.5px; }
    .hv1-section__cta { font-size: 12px; }
}

/* SCROLLER */
.hv1-scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 44vw;
    gap: 12px;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 14px;
    margin-inline: -16px;
    direction: inherit;
    scrollbar-width: thin;
}

.hv1-scroller::-webkit-scrollbar { height: 4px; }
.hv1-scroller::-webkit-scrollbar-track { background: transparent; }
.hv1-scroller::-webkit-scrollbar-thumb { background: var(--ch-border); border-radius: 4px; }

@media (min-width: 600px) { .hv1-scroller { grid-auto-columns: 28vw; } }

@media (min-width: 960px) {
    .hv1-scroller {
        grid-auto-flow: row;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-columns: unset;
        gap: 14px; overflow: visible;
        margin: 0; padding: 0;
    }
}

/* CARD */
.hv1-card {
    display: flex; flex-direction: column;
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 13px; overflow: hidden;
    text-decoration: none; scroll-snap-align: start;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    min-width: 0;
}

.hv1-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ch-shadow);
    border-color: rgba(215, 25, 63, 0.22);
}

.hv1-card__poster {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: var(--ch-surface);
}

.hv1-card__poster img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 350ms ease;
}

.hv1-card:hover .hv1-card__poster img { transform: scale(1.04); }

.hv1-card__rank {
    position: absolute;
    top: 8px; inset-inline-start: 8px;
    z-index: 2;
    background: var(--ch-red); color: #fff;
    font-weight: 900; font-size: 13px;
    padding: 4px 8px; border-radius: 8px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(215, 25, 63, 0.35);
}

.hv1-card__badge {
    position: absolute;
    top: 8px; inset-inline-end: 8px;
    z-index: 2;
    background: rgba(17, 24, 39, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff; font-size: 10px; font-weight: 800;
    padding: 4px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.hv1-card__rating {
    position: absolute;
    bottom: 8px; inset-inline-end: 8px;
    z-index: 2;
    background: rgba(17, 24, 39, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffc940; font-size: 11px; font-weight: 800;
    padding: 3px 7px; border-radius: 6px;
    line-height: 1.2;
}

.hv1-card__body {
    padding: 10px 11px 12px;
    display: flex; flex-direction: column; gap: 4px;
}

.hv1-card__title {
    margin: 0; font-size: 13.5px;
    font-weight: 800; color: var(--ch-text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    unicode-bidi: plaintext;
}

.hv1-card__meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--ch-muted);
}

.hv1-card__type { color: var(--ch-red); font-weight: 800; }
.hv1-card__dot  { opacity: 0.45; }

/* PILLS */
.hv1-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 480px)  { .hv1-pills { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .hv1-pills { grid-template-columns: repeat(8, 1fr); } }

.hv1-pill {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px; padding: 16px 8px;
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 12px; text-decoration: none;
    text-align: center;
    transition: all .15s ease;
}

.hv1-pill:hover {
    background: var(--ch-red-soft);
    border-color: rgba(215, 25, 63, 0.28);
    transform: translateY(-2px);
}

.hv1-pill__icon  { font-size: 22px; line-height: 1; }
.hv1-pill__label { font-size: 12.5px; font-weight: 800; color: var(--ch-text); }
.hv1-pill:hover .hv1-pill__label { color: var(--ch-red); }

/* PLATFORMS */
.hv1-platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 600px)  { .hv1-platforms { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .hv1-platforms { grid-template-columns: repeat(6, 1fr); } }

.hv1-platform {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 12px; text-decoration: none;
    transition: all .15s ease;
}

.hv1-platform:hover {
    background: var(--ch-surface);
    border-color: rgba(215, 25, 63, 0.22);
}

.hv1-platform__logo {
    flex-shrink: 0; width: 42px; height: 42px;
    border-radius: 10px; overflow: hidden;
    background: #fff;
    border: 1px solid var(--ch-border);
    display: flex; align-items: center; justify-content: center;
}

.hv1-platform[data-platform="apple-tv"] .hv1-platform__logo,
.hv1-platform[data-platform="apple-tv-plus"] .hv1-platform__logo {
    background: #111827;
}

.hv1-platform__logo img {
    width: 100%; height: 100%;
    object-fit: contain; padding: 4px;
}

.hv1-platform__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.hv1-platform__name {
    font-size: 13px; font-weight: 800;
    color: var(--ch-text); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hv1-platform__count { font-size: 11px; color: var(--ch-muted); font-weight: 600; }

/* ARTICLES */
.hv1-articles { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 600px) {
    .hv1-articles { grid-template-columns: repeat(3, 1fr); }
    .hv1-article__image { aspect-ratio: 6/1; }
    .hv1-article__image img { object-position: top; }
}

.hv1-article {
    display: flex; flex-direction: column;
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 14px; overflow: hidden;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hv1-article:hover {
    transform: translateY(-3px);
    box-shadow: var(--ch-shadow);
    border-color: rgba(215, 25, 63, 0.22);
}

.hv1-article__image {
    aspect-ratio: 2/3;
    overflow: hidden;
    background: var(--ch-surface);
}

.hv1-article__image img { width: 100%; height: 100%; object-fit: cover; }

.hv1-article__body {
    padding: 14px; display: flex; flex-direction: column;
    gap: 7px; flex: 1;
}

.hv1-article__title {
    margin: 0; font-size: 15.5px; font-weight: 800;
    color: var(--ch-text); line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hv1-article__desc {
    margin: 0; font-size: 12.5px;
    color: var(--ch-muted); line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hv1-article__cta { margin-top: auto; font-size: 12px; font-weight: 800; color: var(--ch-red); }

/* ABOUT */
.hv1-section--about { padding-top: 32px; padding-bottom: 48px; }

.hv1-about {
    max-width: 880px; margin: 0 auto;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: 16px; padding: 22px 18px;
}

@media (min-width: 768px) { .hv1-about { padding: 26px 32px; } }

.hv1-about__title {
    margin: 0 0 14px;
    font-size: clamp(17px, 3.5vw, 21px);
    font-weight: 850; color: var(--ch-text);
}

.hv1-about__body { color: var(--ch-muted); line-height: 1.75; font-size: 14px; }

.hv1-about__body p {
    margin: 0 0 12px;
    text-align: start;
    unicode-bidi: plaintext;
}

.hv1-about__body p:last-child { margin-bottom: 0; }

.hv1-about__links {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--ch-border);
}

.hv1-about__links a {
    padding: 6px 12px;
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 8px; color: var(--ch-text);
    font-size: 12.5px; font-weight: 700; text-decoration: none;
    transition: all .15s ease;
}

.hv1-about__links a:hover {
    background: var(--ch-red); color: #fff; border-color: var(--ch-red);
}

/* Numerals */
.hv1-card__rating, .hv1-card__rank, .hv1-platform__count {
    font-feature-settings: "tnum" 1;
}

/* When .hv1-container sits inside .home-shell, remove its padding (avoid double) */
.home-shell .hv1-container,
.home-shell > .hv1-container {
    padding-inline: 0;
    max-width: none;
}

/* === PATCH 5 INSTALLED — Footer dark mode rescue === */
/* Footer.php has dark rules locked inside @media(prefers-color-scheme:dark),
   so they only fire when the OS is dark. Force them whenever the SITE is dark. */

html[data-theme="dark"] .shf2 {
    --shf-bg1: #0b0f17 !important;
    --shf-bg2: #111827 !important;
    --shf-card: rgba(255,255,255,0.04) !important;
    --shf-card-strong: rgba(255,255,255,0.07) !important;
    --shf-border: rgba(255,255,255,0.10) !important;
    --shf-text: #e8edf6 !important;
    --shf-title: #ffffff !important;
    --shf-muted: #98a2b3 !important;
    --shf-chip: rgba(255,255,255,0.05) !important;
    --shf-shadow: 0 20px 60px rgba(0,0,0,0.45) !important;
}

html[data-theme="dark"] .shf2 .shf2-logo-badge,
html[data-theme="dark"] .shf2 .shf2-ic,
html[data-theme="dark"] .shf2 .topbtn,
html[data-theme="dark"] .shf2 .lang-mini {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .shf2 .shf2-logo-badge {
    background: transparent !important;
    border: none !important;
}

/* Card backgrounds visibly dark */
html[data-theme="dark"] .shf2 .shf2-card,
html[data-theme="dark"] .shf2 .shf2-brand,
html[data-theme="dark"] .shf2 .shf2-links {
    background: rgba(255,255,255,0.03) !important;
    border-color: rgba(255,255,255,0.08) !important;
}

/* Text colors override */
html[data-theme="dark"] .shf2,
html[data-theme="dark"] .shf2 a,
html[data-theme="dark"] .shf2 .shf2-name,
html[data-theme="dark"] .shf2 .shf2-tagline,
html[data-theme="dark"] .shf2 .shf2-blurb {
    color: #e8edf6 !important;
}

html[data-theme="dark"] .shf2 .shf2-section-title,
html[data-theme="dark"] .shf2 strong {
    color: #ffffff !important;
}

html[data-theme="dark"] .shf2 .shf2-muted,
html[data-theme="dark"] .shf2 .shf2-copy,
html[data-theme="dark"] .shf2 small {
    color: #98a2b3 !important;
}

/* === PATCH 7 INSTALLED — Trust block premium === */
.hv1-trust { padding: 32px 0 56px; }

/* --- Hero header card --- */
.hv1-trust__hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    border-radius: 18px;
    padding: 24px 20px;
    margin-bottom: 16px;
    align-items: center;
}

@media (min-width: 768px) {
    .hv1-trust__hero {
        grid-template-columns: 110px 1fr;
        gap: 24px;
        padding: 28px 32px;
    }
}

.hv1-trust__hero-badge {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    background: linear-gradient(135deg, #d4a73a 0%, #c4912a 50%, #8b6d1c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(196, 145, 42, 0.35);
    flex-shrink: 0;
    justify-self: center;
}

@media (min-width: 768px) {
    .hv1-trust__hero-badge {
        width: 110px;
        height: 110px;
        border-radius: 22px;
        justify-self: start;
    }
}

.hv1-trust__hero-badge span {
    color: #ffffff;
    font-weight: 900;
    font-size: 28px;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
    .hv1-trust__hero-badge span { font-size: 40px; }
}

.hv1-trust__hero-text { min-width: 0; }

.hv1-trust__kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--ch-red-soft);
    border: 1px solid rgba(215, 25, 63, 0.20);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ch-red);
    margin-bottom: 10px;
}

.hv1-trust__kicker::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--ch-red);
    border-radius: 50%;
}

.hv1-trust__title {
    margin: 0 0 10px;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 850;
    color: var(--ch-text);
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.hv1-trust__lead {
    margin: 0 0 14px;
    font-size: 14px;
    color: var(--ch-muted);
    line-height: 1.7;
    unicode-bidi: plaintext;
}

.hv1-trust__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.hv1-trust__chip {
    padding: 5px 11px;
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ch-text);
}

/* --- Features grid --- */
.hv1-trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 600px)  { .hv1-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hv1-trust__grid { grid-template-columns: repeat(3, 1fr); } }

.hv1-trust__card {
    background: var(--ch-bg);
    border: 1px solid var(--ch-border);
    border-radius: 14px;
    padding: 18px 18px 16px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.hv1-trust__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ch-shadow);
    border-color: rgba(215, 25, 63, 0.18);
}

.hv1-trust__card-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ch-surface);
    border: 1px solid var(--ch-border);
    font-size: 18px;
    margin-bottom: 10px;
}

.hv1-trust__card h3 {
    margin: 0 0 7px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ch-text);
    line-height: 1.3;
}

.hv1-trust__card p {
    margin: 0;
    font-size: 13px;
    color: var(--ch-muted);
    line-height: 1.65;
    unicode-bidi: plaintext;
}


/* === PATCH 12 INSTALLED — Match legacy layout dimensions === */

/* No horizontal scroll on page */
html, body { overflow-x: hidden !important; }

/* Container: wider with comfortable side padding like the legacy layout */
.home-shell, .hv1-container {
    max-width: 1440px !important;
    padding-inline: 24px !important;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .home-shell, .hv1-container { padding-inline: 18px !important; }
}

@media (max-width: 640px) {
    .home-shell, .hv1-container { padding-inline: 14px !important; }
}

/* Cards grid: 5 cols on desktop with comfortable gap */
@media (min-width: 960px) {
    .hv1-scroller {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }
}

/* Mobile: keep scroll inside section */
@media (max-width: 959px) {
    .hv1-scroller {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }
}

/* Hero full bleed (extends beyond container padding) */
.hv1-hero {
    margin-inline: calc(-50vw + 50%);
    padding-inline: 24px;
    width: 100vw;
}

@media (max-width: 640px) {
    .hv1-hero { padding-inline: 16px; }
}

/* Section header: more breathing room like legacy */
.hv1-section { padding: 36px 0 12px; }

@media (min-width: 768px) {
    .hv1-section { padding: 48px 0 18px; }
}

.hv1-section__head { margin-bottom: 20px; }

/* Card body: more padding for legacy feel */
.hv1-card__body { padding: 12px 14px 14px; }

/* Title font slightly larger */
.hv1-card__title { font-size: 14px; }
@media (min-width: 768px) {
    .hv1-card__title { font-size: 14.5px; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 13 — Mobile Polish (≤640px)
   2026-05-14: تصغير الخطوط، تنظيم المساحات، عناوين سطر واحد
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ─── Container & Section spacing ──────────────────── */
  .hv1-container {
    padding-inline: 16px;
  }
  .hv1-section {
    padding: 26px 0 6px;
  }

  /* ─── HERO ─────────────────────────────────────────── */
  .hv1-hero {
    padding-block: 16px 22px;
  }
  .hv1-hero__inner {
    padding-inline: 12px;
    max-width: 100%;
  }
  .hv1-hero__live {
    font-size: 11px;
    padding: 4px 11px;
    margin-bottom: 14px;
  }
  .hv1-hero__title {
    font-size: 23px;
    line-height: 1.25;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
  }
  .hv1-hero__sub {
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 18px;
    padding: 0;
    word-break: normal;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* Search bar — keep on ONE line */
  .hv1-hero__search {
    flex-wrap: nowrap;
    gap: 6px;
  }
  .hv1-hero__search-input {
    font-size: 14px;
    padding: 11px 14px 11px 38px;
    min-width: 0;
  }
  .hv1-hero__search-btn {
    font-size: 14px;
    padding: 11px 16px;
    flex-shrink: 0;
  }

  /* Quick chips → horizontal scroll instead of wrap */
  .hv1-hero__quick {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin-top: 14px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .hv1-hero__quick::-webkit-scrollbar { display: none; }
  .hv1-hero__quick a {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 7px 13px;
    scroll-snap-align: start;
    white-space: nowrap;
  }

  /* ─── SECTION HEADS (eyebrow + title + desc) ───────── */
  /* Generic targets — covers all naming variants */
  .hv1-section__head,
  .hv1-section-head,
  .hv1-head,
  [class*="section__head"],
  [class*="-head"] {
    margin-bottom: 14px;
  }
  .hv1-section__kicker,
  .hv1-section__eyebrow,
  .hv1-head__kicker,
  .hv1-head__eyebrow,
  .hv1-eyebrow,
  [class*="kicker"],
  [class*="eyebrow"] {
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .hv1-section__title,
  .hv1-head__title,
  .hv1-section h2,
  .hv1-head h2 {
    font-size: 21px;
    line-height: 1.28;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
  }
  .hv1-section__desc,
  .hv1-section__lead,
  .hv1-head__lead,
  .hv1-section p[class*="desc"],
  .hv1-section p[class*="lead"] {
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 14px;
  }
  .hv1-section__more,
  .hv1-head__cta,
  [class*="__more"] {
    font-size: 13px;
  }

  /* ─── CARDS / SCROLLER ─────────────────────────────── */
  .hv1-scroller {
    grid-auto-columns: 62vw;
    gap: 12px;
    padding-bottom: 8px;
    scroll-padding-inline: 16px;
  }
  .hv1-scroller [class*="card__title"],
  .hv1-scroller [class*="title"] {
    font-size: 14px;
    line-height: 1.3;
  }
  .hv1-scroller [class*="meta"],
  .hv1-scroller [class*="year"] {
    font-size: 12px;
  }

  /* ─── TRUST / ABOUT block ──────────────────────────── */
  .hv1-trust__hero {
    flex-direction: column;
    gap: 14px;
    padding: 22px 18px;
  }
  .hv1-trust__hero-badge {
    width: 52px;
    height: 52px;
    font-size: 20px;
  }
  .hv1-trust__hero-badge span { font-size: 20px; }

  .hv1-trust__kicker {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .hv1-trust__title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .hv1-trust__lead {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
  }
  .hv1-trust__chips {
    gap: 6px;
    flex-wrap: wrap;
  }
  .hv1-trust__chip {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Trust feature cards */
  .hv1-trust__grid {
    gap: 12px;
  }
  .hv1-trust__feature,
  [class*="trust__feature"] {
    padding: 16px;
  }
  [class*="feature__icon"],
  [class*="feature-icon"] {
    width: 36px;
    height: 36px;
  }
  [class*="feature__title"],
  [class*="feature-title"] {
    font-size: 15px;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  [class*="feature__text"],
  [class*="feature-text"],
  [class*="feature__desc"] {
    font-size: 13px;
    line-height: 1.5;
  }

  /* ─── Genre pills ──────────────────────────────────── */
  .hv1-pills {
    gap: 8px;
  }
  .hv1-pill,
  .hv1-pills a {
    font-size: 13px;
    padding: 8px 12px;
  }

  /* ─── Platforms grid ───────────────────────────────── */
  .hv1-platforms {
    gap: 10px;
  }

  /* ─── Articles ─────────────────────────────────────── */
  .hv1-articles {
    gap: 14px;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 13b — Very small screens (≤380px, iPhone SE etc)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hv1-container { padding-inline: 14px; }
  .hv1-hero__inner { padding-inline: 14px; }

  .hv1-hero__title { font-size: 21px; }
  .hv1-hero__sub { font-size: 11px; }

  .hv1-section__title,
  .hv1-head__title,
  .hv1-section h2,
  .hv1-head h2 { font-size: 19px; }

  .hv1-trust__title { font-size: 20px; }
  .hv1-trust__lead { font-size: 13px; }

  .hv1-scroller { grid-auto-columns: 70vw; }

  .hv1-hero__search-btn { padding: 11px 12px; font-size: 13px; }
  .hv1-hero__quick a { font-size: 12px; padding: 6px 11px; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 13c — Tablet polish (641px-768px)
   ════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 768px) {
  .hv1-hero__title { font-size: 36px; }
  .hv1-section__title,
  .hv1-head__title,
  .hv1-section h2,
  .hv1-head h2 { font-size: 24px; }
  .hv1-trust__title { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 14 — Mobile: Force section heads full-width
   Issue: .hv1-section__head-text was constrained, causing
   3-line wraps in section titles. Now forced to 100%.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Section head: stack vertically + force full width */
  .hv1-section__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .hv1-section__head-text {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Eyebrow */
  .hv1-section__eyebrow {
    display: inline-block !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 6px !important;
  }

  /* Title — SINGLE LINE if possible */
  .hv1-section__title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.01em !important;
    /* width unconstrained */
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal;
    word-spacing: 0;
  }

  /* Description */
  .hv1-section__desc {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    color: var(--ch-text-muted, #6b7280);
  }

  /* "View all" CTA — align to start instead of being squeezed */
  .hv1-section__cta {
    font-size: 13px !important;
    align-self: flex-start !important;
    margin-top: 0 !important;
    padding: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 14b — Very small screens
   ════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hv1-section__title { font-size: 18px !important; }
  .hv1-section__desc { font-size: 12.5px !important; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 15 — Mobile alignment & symmetry fixes
   1) Search bar centered, no left-shift
   2) Quick tags → 2 rows centered (no scroll)
   3) Equal left/right padding everywhere
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ─── Symmetric padding for everything ─── */
  .hv1-container,
  .hv1-hero__inner,
  .hv1-section > .hv1-container {
    padding-inline: 18px !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ─── HERO: centered alignment ─── */
  .hv1-hero {
    text-align: center;
  }
  .hv1-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hv1-hero__live {
    margin-inline: auto !important;
  }
  .hv1-hero__title,
  .hv1-hero__sub {
    text-align: center !important;
    width: 100% !important;
  }

  /* ─── SEARCH BAR: symmetric, no offset ─── */
  .hv1-hero__search {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px !important;
    gap: 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .hv1-hero__search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .hv1-hero__search-btn {
    flex: 0 0 auto !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  /* Search icon stays inside input */
  .hv1-hero__search-icon {
    /* keep current position rules — just safety */
    pointer-events: none;
  }

  /* ─── QUICK TAGS: 2 rows centered, NO scroll ─── */
  .hv1-hero__quick {
    display: flex !important;
    flex-wrap: wrap !important;             /* allow wrap to 2 rows */
    justify-content: center !important;
    overflow-x: visible !important;          /* kill horizontal scroll */
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .hv1-hero__quick::-webkit-scrollbar { display: none; }
  .hv1-hero__quick a {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    white-space: nowrap !important;
    scroll-snap-align: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 15b — Very small screens (≤380px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hv1-container,
  .hv1-hero__inner {
    padding-inline: 14px !important;
  }
  .hv1-hero__quick a {
    font-size: 12.5px !important;
    padding: 6px 12px !important;
  }
  .hv1-hero__search-btn {
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 16 — Mobile search bar: unified pill design
   Make the input + button look like ONE connected pill,
   not two separate elements with a gap.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  .hv1-hero__search {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 420px !important;       /* nice readable width */
    margin: 0 auto 16px !important;     /* CENTER horizontally */
    gap: 0 !important;                   /* glue input + button */
    padding: 0 !important;
    background: #f3f4f6;                 /* unified pill background */
    border-radius: 999px !important;
    overflow: hidden;
    box-sizing: border-box !important;
    position: relative;
  }

  .hv1-hero__search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    padding: 13px 42px 13px 16px !important;  /* room for icon on right (RTL) */
    font-size: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none;
  }

  .hv1-hero__search-icon {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.5;
    font-size: 16px;
  }

  .hv1-hero__search-btn {
    flex: 0 0 auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 4px !important;              /* small inset = glued look */
    box-sizing: border-box !important;
    line-height: 1 !important;
    cursor: pointer;
  }
}

/* Smaller phones */
@media (max-width: 380px) {
  .hv1-hero__search { max-width: 100% !important; }
  .hv1-hero__search-btn {
    padding: 0 18px !important;
    font-size: 13px !important;
  }
  .hv1-hero__search-input {
    font-size: 13.5px !important;
    padding: 12px 38px 12px 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 17 — Mobile search: PROPER RTL alignment
   - Text aligned to start (right in RTL)
   - Icon on right side (RTL natural)
   - Form perfectly centered with auto margins
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  .hv1-hero__search {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: calc(100% - 0px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    gap: 0 !important;
    padding: 0 !important;
    background: #f3f4f6 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    position: relative !important;
    text-align: start !important;
  }

  /* Input: text starts from RIGHT in RTL, icon space on right */
  .hv1-hero__search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    /* RTL: padding-right for icon, padding-left for button breathing */
    padding-block: 13px !important;
    padding-inline-start: 44px !important;   /* icon side (right in RTL) */
    padding-inline-end: 8px !important;       /* button side (left in RTL) */
    font-size: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    text-align: start !important;              /* KEY: not center! */
    direction: rtl !important;
    color: #1f2937 !important;
  }
  .hv1-hero__search-input::placeholder {
    text-align: start !important;
    color: #9ca3af !important;
    opacity: 1 !important;
  }

  /* Icon on the RIGHT side in RTL (which is the start) */
  .hv1-hero__search-icon {
    position: absolute !important;
    inset-inline-start: 16px !important;       /* right edge in RTL */
    inset-inline-end: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    opacity: 0.45 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  /* Button on the LEFT side in RTL */
  .hv1-hero__search-btn {
    flex: 0 0 auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    height: calc(100% - 8px) !important;
    min-height: 36px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 4px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    cursor: pointer !important;
    align-self: stretch !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 380px) {
  .hv1-hero__search-btn { padding: 0 18px !important; font-size: 13px !important; }
  .hv1-hero__search-input { font-size: 13.5px !important; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 18 — MOBILE LAYOUT PASS (Final spec)
   ────────────────────────────────────────────────────────────
   ✓ Cards: 2-col grid × 2 rows = 4 cards/section
   ✓ Hide 5th card on mobile via :nth-child
   ✓ Kill horizontal scroll completely
   ✓ Hero search: properly centered, RTL-balanced
   ✓ Typography scaled down for mobile
   ✓ Tighter section spacing
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ─── (1) Cards Grid: 2×2 instead of horizontal scroll ─── */
  .hv1-scroller {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;          /* kill scroller width rule */
    gap: 14px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
    padding-inline: 0 !important;
    width: 100% !important;
  }

  /* Hide 5th card (and any beyond) on mobile */
  .hv1-scroller > *:nth-child(n+5) {
    display: none !important;
  }

  /* ─── (2) Card itself: refined sizing ─── */
  .hv1-scroller > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-snap-align: none !important;
  }

  /* Card poster — proper aspect ratio */
  .hv1-scroller [class*="card"] img,
  .hv1-scroller [class*="poster"] {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
  }

  /* Card body padding */
  .hv1-scroller [class*="card__body"],
  .hv1-scroller [class*="card-body"] {
    padding: 10px 10px 12px !important;
  }

  /* Card title — smaller */
  .hv1-scroller [class*="card__title"],
  .hv1-scroller [class*="card-title"] {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
  }

  /* Card meta (year, type, rating) */
  .hv1-scroller [class*="card__meta"],
  .hv1-scroller [class*="card-meta"],
  .hv1-scroller [class*="card__year"],
  .hv1-scroller [class*="card__type"] {
    font-size: 11px !important;
    gap: 5px !important;
  }

  /* ─── (3) HERO SEARCH: balanced RTL pill ─── */
  .hv1-hero__search {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    direction: rtl !important;
    width: min(100%, 390px) !important;
    margin: 0 auto 16px !important;
    gap: 0 !important;
    padding: 5px !important;
    background: #f3f4f6 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .hv1-hero__search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    padding: 10px 40px 10px 8px !important;   /* room for icon on right (RTL) */
    font-size: 14px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    text-align: right !important;
    direction: rtl !important;
    color: #1f2937 !important;
  }
  .hv1-hero__search-input::placeholder {
    text-align: right !important;
    color: #9ca3af !important;
    opacity: 1 !important;
  }

  .hv1-hero__search-icon {
    position: absolute !important;
    inset-inline-start: 18px !important;   /* right side in RTL */
    inset-inline-end: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    opacity: 0.45 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  .hv1-hero__search-btn {
    flex: 0 0 auto !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    min-height: 38px !important;
    height: 38px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  /* ─── (4) HERO: typography tighter ─── */
  .hv1-hero {
    padding: 24px 16px 26px !important;
    text-align: center !important;
  }
  .hv1-hero__inner {
    padding-inline: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
  }
  .hv1-hero__title {
    font-size: 28px !important;
    line-height: 1.22 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 10px !important;
    text-align: center !important;
  }
  .hv1-hero__sub {
    font-size: 14px !important;
    line-height: 1.75 !important;
    max-width: 330px !important;
    margin: 0 auto 16px !important;
    text-align: center !important;
  }

  /* ─── (5) Quick tags: 2 rows centered, no scroll ─── */
  .hv1-hero__quick {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    gap: 8px !important;
    margin: 4px auto 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
  .hv1-hero__quick a {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    white-space: nowrap !important;
  }

  /* ─── (6) Section spacing & headers ─── */
  .hv1-section {
    padding: 24px 0 4px !important;
    margin-block: 0 !important;
  }
  .hv1-container {
    padding-inline: 16px !important;
    box-sizing: border-box !important;
  }

  .hv1-section__head {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
  }
  .hv1-section__head-text {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hv1-section__eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
  }
  .hv1-section__title {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin: 0 0 6px !important;
    letter-spacing: -0.3px !important;
    font-weight: 800 !important;
  }
  .hv1-section__desc {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin: 0 0 8px !important;
    max-width: 100% !important;
  }
  .hv1-section__cta {
    font-size: 13px !important;
    align-self: flex-start !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 18b — Tiny screens (≤380px)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .hv1-hero__title { font-size: 24px !important; }
  .hv1-hero__sub { font-size: 13px !important; }
  .hv1-section__title { font-size: 20px !important; }
  .hv1-scroller { gap: 10px !important; }
  .hv1-scroller [class*="card__title"] { font-size: 12.5px !important; }
  .hv1-hero__search { padding: 4px !important; }
  .hv1-hero__search-btn { padding: 0 18px !important; font-size: 13px !important; min-height: 36px !important; height: 36px !important; }
  .hv1-hero__search-input { font-size: 13px !important; padding: 9px 36px 9px 6px !important; }
  .hv1-hero__quick a { font-size: 12.5px !important; padding: 6px 12px !important; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 18c — Ensure 5-column desktop still works
   ════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .hv1-scroller {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }
  .hv1-scroller > *:nth-child(n+5) {
    display: block;  /* show all 5 on desktop */
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 19 — Mobile search: STACKED layout (button below input)
   Cleaner, more balanced — no more side-by-side awkwardness.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Form: stack vertically */
  .hv1-hero__search {
    display: flex !important;
    flex-direction: column !important;        /* KEY: vertical stack */
    align-items: stretch !important;
    direction: rtl !important;
    width: min(100%, 420px) !important;
    margin: 0 auto 16px !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;        /* no more pill bg */
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  /* Input: full width pill on its own */
  .hv1-hero__search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
    border-radius: 14px !important;
    padding: 14px 46px 14px 16px !important;   /* room for icon on right (RTL start) */
    font-size: 14.5px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    outline: none !important;
    text-align: right !important;
    direction: rtl !important;
    color: #1f2937 !important;
    transition: border-color .15s ease, background .15s ease;
  }
  .hv1-hero__search-input:focus {
    border-color: var(--ch-red, #d7193f) !important;
    background: #fff !important;
  }
  .hv1-hero__search-input::placeholder {
    text-align: right !important;
    color: #9ca3af !important;
    opacity: 1 !important;
  }

  /* Search icon: inside input, on the RIGHT (RTL start) */
  .hv1-hero__search-icon {
    position: absolute !important;
    inset-inline-start: 18px !important;
    inset-inline-end: auto !important;
    top: 22px !important;                       /* aligned with input vertical center */
    transform: translateY(0) !important;
    pointer-events: none !important;
    opacity: 0.5 !important;
    font-size: 17px !important;
    line-height: 1 !important;
    z-index: 2 !important;
  }

  /* Button: full width below input */
  .hv1-hero__search-btn {
    flex: 1 1 auto !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    min-height: 48px !important;
    height: auto !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    /* Use site red for clear CTA */
    background: var(--ch-red, #d7193f) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(215, 25, 63, 0.20);
    transition: transform .12s ease, box-shadow .15s ease;
  }
  .hv1-hero__search-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(215, 25, 63, 0.18);
  }
}

/* Small phones tweaks */
@media (max-width: 380px) {
  .hv1-hero__search-input {
    font-size: 14px !important;
    padding: 12px 42px 12px 14px !important;
  }
  .hv1-hero__search-btn {
    padding: 12px 20px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
  .hv1-hero__search-icon { top: 20px !important; font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 20 — Fix: search form bleeding outside hero edges
   Root cause: 100% width was relative to viewport (not container)
   because hero inner had no proper inline padding.
   Solution: Force hero __inner to respect side gutters,
   and let the form inherit the constrained width.
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Force the hero inner container to have proper side gutters */
  .hv1-hero {
    padding-inline: 18px !important;        /* outer gutter */
    padding-block: 26px !important;
    box-sizing: border-box !important;
  }
  .hv1-hero__inner {
    padding-inline: 0 !important;            /* gutter already on parent */
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  /* Form: width = 100% of its parent (which is already insetted) */
  .hv1-hero__search {
    width: 100% !important;
    max-width: 100% !important;              /* respect parent gutter */
    margin-inline: 0 !important;             /* don't add extra margins */
    margin-block: 0 0 16px !important;
    box-sizing: border-box !important;
  }

  /* Belt-and-suspenders: every search child stays within bounds */
  .hv1-hero__search-input,
  .hv1-hero__search-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Quick links: same treatment — respect side gutters */
  .hv1-hero__quick {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hero text content: same width constraint */
  .hv1-hero__title,
  .hv1-hero__sub,
  .hv1-hero__live {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 380px) {
  .hv1-hero {
    padding-inline: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 21 — Move search icon to LEFT side (RTL end)
   Per design request: icon on left, text starts from right
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Icon: switch to LEFT side (RTL end) */
  .hv1-hero__search-icon {
    inset-inline-start: auto !important;
    inset-inline-end: 18px !important;    /* left side in RTL */
    top: 22px !important;
  }

  /* Input: swap padding — more on the LEFT (for icon), less on RIGHT */
  .hv1-hero__search-input {
    padding-inline-start: 16px !important;   /* right side: text starts here */
    padding-inline-end: 46px !important;     /* left side: room for icon */
  }
}

@media (max-width: 380px) {
  .hv1-hero__search-icon { top: 20px !important; }
  .hv1-hero__search-input {
    padding-inline-start: 14px !important;
    padding-inline-end: 42px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PATCH 22 — Mobile section titles: smaller + lighter weight
   Goal: fit on a single line, less visual weight
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Section titles: smaller font, medium weight (not bold) */
  .hv1-section__title {
    font-size: 17px !important;
    font-weight: 600 !important;          /* was 800 → semibold */
    line-height: 1.3 !important;
    letter-spacing: -0.2px !important;
    margin: 0 0 4px !important;
    /* Try to keep on single line */
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Eyebrow (kicker): subtle, smaller */
  .hv1-section__eyebrow {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 4px !important;
    opacity: 0.85;
  }

  /* Description: smaller too */
  .hv1-section__desc {
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    margin: 0 0 6px !important;
  }

  /* CTA "view all" link */
  .hv1-section__cta {
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  /* Trust block title — same treatment */
  .hv1-trust__title {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
  .hv1-trust__kicker {
    font-size: 11px !important;
    font-weight: 600 !important;
  }
  .hv1-trust__lead {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 380px) {
  .hv1-section__title { font-size: 15.5px !important; }
  .hv1-section__desc { font-size: 12px !important; }
  .hv1-trust__title { font-size: 17px !important; }
}

/* ════════════════════════════════════════════════════════════
   PATCH 23 — Mobile card titles: smaller, single-line cap
   Goal: card titles fit on 1 line; if long → ellipsis (…)
   ════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* Card title — comprehensive selector net */
  .hv1-scroller .hv1-card__title,
  .hv1-scroller .hv1-card-title,
  .hv1-scroller [class*="card__title"],
  .hv1-scroller [class*="card-title"],
  .hv1-scroller .card-title,
  .hv1-scroller h3,
  .hv1-scroller h4 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.1px !important;
    margin: 0 0 4px !important;

    /* Force single line with ellipsis if too long */
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  /* Card meta (year, type, rating chips) */
  .hv1-scroller [class*="card__meta"],
  .hv1-scroller [class*="card-meta"],
  .hv1-scroller [class*="card__year"],
  .hv1-scroller [class*="card__type"],
  .hv1-scroller [class*="card__kind"] {
    font-size: 11px !important;
    font-weight: 500 !important;
    gap: 4px !important;
  }

  /* Card body padding — tighter */
  .hv1-scroller [class*="card__body"],
  .hv1-scroller [class*="card-body"] {
    padding: 8px 10px 10px !important;
  }
}

@media (max-width: 380px) {
  .hv1-scroller .hv1-card__title,
  .hv1-scroller .hv1-card-title,
  .hv1-scroller [class*="card__title"],
  .hv1-scroller [class*="card-title"],
  .hv1-scroller h3,
  .hv1-scroller h4 {
    font-size: 12px !important;
  }
}

/* ==========================================================
   FEATURED — cinematic premium spotlight
   ========================================================== */
.hv1-featured {
    display: flex;
    gap: 28px;
    align-items: stretch;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(215,25,63,0.08) 0%, rgba(215,25,63,0) 55%),
        linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    border: 1px solid rgba(215, 25, 63, 0.18);
    border-radius: 20px;
    padding: 28px;
    text-decoration: none;
    color: var(--ch-text);
    box-shadow: 0 12px 38px -14px rgba(215, 25, 63, 0.18), 0 4px 14px -6px rgba(0, 0, 0, 0.08);
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
}
.hv1-featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px -10px rgba(215, 25, 63, 0.22), 0 6px 18px -6px rgba(0, 0, 0, 0.10);
}
.hv1-featured__poster {
    flex: 0 0 auto;
    width: 230px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ch-surface, #f3f4f6);
    box-shadow: 0 10px 28px -8px rgba(0, 0, 0, 0.18);
    align-self: center;
}
.hv1-featured__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hv1-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 6px 2px;
}
.hv1-featured__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--ch-muted);
}
.hv1-featured__tag {
    background: var(--ch-red, #e50914);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .02em;
}
.hv1-featured__dot { opacity: .4; }
.hv1-featured__rating {
    color: #d97706;
    font-weight: 800;
}
.hv1-featured__title {
    font-size: 27px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--ch-text);
    margin: 0;
    letter-spacing: -0.02em;
}
.hv1-featured__desc {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ch-text-2, #4b5563);
    margin: 0;
}
.hv1-featured__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    background: var(--ch-red, #e50914);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 22px;
    border-radius: 999px;
    margin-top: 6px;
    transition: filter .2s ease;
}
.hv1-featured:hover .hv1-featured__cta { filter: brightness(1.12); }

@media (max-width: 600px) {
    .hv1-featured {
        flex-direction: column;
        gap: 18px;
        padding: 20px;
        border-radius: 16px;
    }
    .hv1-featured__poster { width: 200px; }
    .hv1-featured__body { text-align: right !important; }
    .hv1-featured__meta { justify-content: center; }
    .hv1-featured__cta {
        align-self: stretch;
        margin-inline: 12px;
        padding: 14px 22px;
        font-size: 15px;
        justify-content: center;
    }
    .hv1-featured__title { font-size: 21px; text-align: center !important; }
    .hv1-featured__desc { font-size: 14px; line-height: 1.8; text-align: right !important; }
}

/* ─── Green live dot inline in H1 (replaces "محدث يوميًا" pill) ─── */
.hv1-hero__live-dot--inline {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    margin-inline-end: 10px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    animation: hv1-pulse-green 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes hv1-pulse-green {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
    }
    50% {
        opacity: 0.85;
        transform: scale(0.92);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
}
@media (max-width: 640px) {
    .hv1-hero__live-dot--inline { width: 8px; height: 8px; margin-inline-end: 8px; }
}


/* ============================================
   Trending Section — 10 cards (2 rows × 5 cols) on desktop
   Mobile stays at 2×2 (4 cards visible, rest hidden via existing nth-child rule)
   ============================================ */
@media (min-width: 960px) {
  .hv1-scroller--ranked {
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-auto-flow: row !important;
    row-gap: 22px !important;
  }
}