.home-videos {
    --hv-gap: 22px;
    --hv-card-width: calc((100% - 44px) / 3);
    display: block;
    width: 100%;
    max-width: 1500px;
    min-width: 0;
    box-sizing: border-box;
    clear: both;
    margin: 44px auto 48px;
    padding: 0 56px;
    direction: rtl;
}
.home-videos[data-hv-count="2"] { --hv-card-width: calc((100% - 22px) / 2); }
.home-videos[data-hv-count="1"] { --hv-card-width: 100%; }
.home-videos *, .hv-dialog * { box-sizing: border-box; }
.hv-surface {
    padding: 26px 28px 14px; border: 1px solid #e1e7eb; border-radius: 24px;
    background: #fff; box-shadow: 0 12px 32px #26333a08;
}
.hv-heading {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); align-items: center;
    gap: 20px; padding-bottom: 18px; margin-bottom: 20px;
    border-bottom: 1px solid #26333a14;
}
.hv-heading-copy { min-width: 0; padding-right: 16px; border-right: 4px solid #ffb323; }
.hv-heading h2 { margin: 0; color: #26333a; font-size: var(--home-section-title-size, 20px); font-weight: 700; line-height: 1.45; }
.hv-heading p { margin: 5px 0 0; color: #687580; font-size: 13px; line-height: 1.9; }
.hv-search { position: relative; width: 100%; min-width: 0; margin: 0; }
.hv-search label { display: block; margin-bottom: 7px; color: #354550; font-size: 13px; font-weight: 700; }
.hv-search-field { position: relative; display: flex; align-items: center; gap: 10px; border: 1px solid #dce2e7; border-radius: 12px; background: #fff; padding: 0 12px; }
.hv-search-field:focus-within { border-color: #c18516; box-shadow: 0 0 0 3px #ffb32326; }
.hv-search-field > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #687580; stroke-width: 1.7; }
.hv-search input { width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; outline: none; box-shadow: none; background: transparent; color: #26333a; font: inherit; font-size: 14px; }
.hv-search input::-webkit-search-cancel-button { appearance: none; }
.hv-search-clear { flex: none; width: 32px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #687580; font: inherit; font-size: 25px; cursor: pointer; }
.hv-search-clear:focus-visible { outline: 2px solid #c18516; }
.hv-suggestions { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; left: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; border: 1px solid #dce2e7; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px #26333a21; }
.hv-suggestion { padding: 11px 12px; border-radius: 7px; color: #26333a; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; cursor: pointer; }
.hv-suggestion:hover, .hv-suggestion[aria-selected="true"] { background: #fff3d9; }
.hv-search-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hv-empty { padding: 24px 12px; margin: 0; color: #687580; text-align: center; font-size: 14px; }
.hv-nav { display: none; justify-content: flex-end; gap: 10px; margin: -8px 0 12px; }
.hv-can-scroll .hv-nav { display: flex; }
.hv-nav button {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 1px solid #dce2e7;
    border-radius: 50%; background: #fff; color: #354550; cursor: pointer;
    transition: background .18s, border-color .18s;
}
.hv-nav button:hover:not(:disabled) { background: #ffb323; border-color: #ffb323; }
.hv-nav button:disabled { opacity: .35; cursor: default; }
.hv-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hv-track {
    display: flex; width: 100%; min-width: 0; gap: var(--hv-gap);
    overflow-x: auto; scroll-snap-type: x proximity;
    padding: 4px 0 16px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.home-videos[data-hv-count="1"] .hv-track { max-width: 620px; margin-inline: auto; }
.home-videos[data-hv-count="2"] .hv-track { max-width: 1080px; margin-inline: auto; }
.hv-card {
    display: flex; flex-direction: column; align-items: stretch; flex: 0 0 var(--hv-card-width); min-width: 0;
    padding: 0; margin: 0; border: 1px solid #e1e7eb; border-radius: 16px;
    background: #fff; color: #26333a; font: inherit; text-align: right;
    cursor: pointer; scroll-snap-align: start; overflow: hidden;
    box-shadow: 0 3px 10px #26333a08; transition: box-shadow .2s, border-color .2s;
    appearance: none;
}
.hv-card-media { display: block; position: relative; width: 100%; overflow: hidden; }
.hv-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: scale-down; object-position: center; background: #f1f4f6; }
.hv-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #07132000 40%, #07132045 100%); }
.hv-play {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 66px; height: 66px; border: 1px solid #ffffffb3; border-radius: 50%;
    color: #c40000; background: #fffffff2; box-shadow: 0 0 0 8px #ffffff24;
    transition: background .2s, box-shadow .2s;
}
.hv-play svg { width: 27px; height: 27px; margin-left: 3px; fill: currentColor; }
.hv-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px 16px; }
.hv-card-label { display: flex; align-items: center; gap: 7px; margin-top: auto; color: #9a5900; font-size: 12px; font-weight: 700; line-height: 1.8; }
.hv-card-label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.hv-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #26333a; font-size: 16px; font-weight: 800; line-height: 1.85; }
.hv-card:hover { border-color: #f2c36b; box-shadow: 0 8px 22px #26333a15; }
.hv-card:hover .hv-play { background: #ffcb63; box-shadow: 0 0 0 10px #ffffff24; }
.hv-card:focus-visible { outline: 3px solid #ffb323; outline-offset: -3px; }
.hv-nav button:focus-visible, .hv-dialog-header button:focus-visible { outline: 3px solid #ffb323; outline-offset: 3px; }
.hv-dialog {
    position: fixed; inset: 0; margin: auto; padding: 0; border: 1px solid #ffffff17;
    border-radius: 18px; width: min(1080px, calc(100vw - 40px)); max-width: 1080px;
    max-height: calc(100dvh - 40px); color: #fff; background: #111a26;
    box-shadow: 0 24px 90px #0008; overflow: auto; direction: rtl;
}
.hv-dialog:not([open]) { display: none; }
.hv-dialog[open] { display: block; }
.hv-dialog::backdrop { background: #050c1acc; }
.hv-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 22px; }
.hv-dialog-header h2 { margin: 0; color: #fff; font: inherit; font-size: 16px; font-weight: 700; line-height: 1.8; }
.hv-dialog-header button {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border: 1px solid #ffffff21; border-radius: 50%; padding: 0;
    background: #ffffff0f; color: #fff; font: inherit; font-size: 27px; cursor: pointer;
}
.hv-player { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.hv-player video, .hv-player iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.hv-player-error { margin: 0; padding: 15px 22px; color: #fecaca; font-size: 14px; }
.hv-lock { overflow: hidden !important; }
.home-videos [hidden], .hv-dialog [hidden] { display: none !important; }
.dark .hv-surface { border-color: #ffffff17; background: #192534; }
.dark .hv-card { border-color: #ffffff17; background: #253248; }
.dark .hv-card-title { color: #edf2f6; }
.dark .hv-card-label { color: #ffcf73; }
.dark .hv-heading { border-color: #ffffff17; }
.dark .hv-heading h2 { color: #edf2f6; }
.dark .hv-heading p { color: #a2b0be; }
.dark .hv-search label, .dark .hv-search input, .dark .hv-suggestion { color: #edf2f6; }
.dark .hv-search-field, .dark .hv-suggestions { border-color: #ffffff21; background: #253248; }
.dark .hv-suggestion:hover, .dark .hv-suggestion[aria-selected="true"] { background: #46516a; }
.dark .hv-empty { color: #a2b0be; }
.dark .hv-nav button { border-color: #ffffff21; background: #253248; color: #edf2f6; }
@media (max-width: 1100px) {
    .home-videos { padding-inline: 28px; --hv-gap: 18px; --hv-card-width: calc((100% - 18px) / 2); }
    .home-videos[data-hv-count="2"] { --hv-card-width: calc((100% - 18px) / 2); }
    .hv-surface { padding: 22px 22px 10px; }
}
@media (max-width: 900px) {
    .hv-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 600px) {
    .home-videos { margin: 28px auto 32px; padding-inline: 16px; --hv-gap: 12px; }
    .home-videos:not([data-hv-count="1"]) { --hv-card-width: 88%; }
    .hv-surface { padding: 18px 14px 6px; border-radius: 18px; }
    .hv-heading { gap: 14px; padding-bottom: 16px; margin-bottom: 18px; }
    .hv-heading-copy { padding-right: 12px; border-right-width: 4px; }
    .hv-heading h2 { font-size: 18px; }
    .hv-heading p { font-size: 11px; }
    .hv-nav { gap: 6px; }
    .hv-nav button { width: 34px; height: 34px; }
    .hv-card { border-radius: 14px; }
    .hv-play { width: 52px; height: 52px; box-shadow: 0 0 0 6px #ffffff24; }
    .hv-play svg { width: 23px; height: 23px; }
    .hv-card-copy { gap: 9px; padding: 14px; }
    .hv-card-title { font-size: 14px; }
    .hv-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; }
    .hv-dialog-header { padding: 12px; }
    .hv-dialog-header h2 { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hv-card, .hv-play, .hv-nav button { transition: none; } }