/* Scoped to the Home videos section. */
.home-videos { position:relative; isolation:isolate; padding-block:var(--section-padding); background:#173A24; color:#FFFFFF; scroll-margin-top:110px; }
.home-videos__background { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; pointer-events:none; }
.home-videos--with-background::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg, rgb(10 27 16 / .94), rgb(17 42 26 / .88)); pointer-events:none; }
.home-videos__inner { display:grid; grid-template-columns:minmax(0,27fr) minmax(0,73fr); align-items:center; gap:var(--space-lg); width:calc(100% - 64px); max-width:1440px; margin-inline:auto; }
.home-videos__intro { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-sm); min-width:0; }
.home-videos__mark { display:block; width:40px; height:2px; background:var(--brand-highlight); }
.home-videos .home-videos__eyebrow { margin:0; color:rgb(255 255 255 / .82); font-size:.75rem; font-weight:650; letter-spacing:.1em; line-height:1.6; text-transform:uppercase; }
.home-videos .home-videos__title { margin:0; font-size:clamp(1.65rem,2.35vw,2.25rem); line-height:1.1; font-weight:750; color:#FFFFFF; }
.home-videos__accent { color:var(--brand-highlight); }
.home-videos .home-videos__text { margin:0; color:rgb(255 255 255 / .78); line-height:1.6; font-size:.95rem; white-space:pre-line; }
.home-videos__button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:var(--button-height); max-width:100%; margin-top:4px; padding:8px 18px; border:1px solid rgb(255 255 255 / .35); border-radius:8px; background:var(--action-primary); color:#FFFFFF; font-size:.875rem; line-height:1.5; font-weight:650; text-decoration:none; transition:background-color .2s ease,color .2s ease,border-color .2s ease; }
.home-videos__button:hover { background:var(--action-primary-hover); border-color:var(--action-primary-hover); color:#FFFFFF; }
.home-videos__button > span { flex-shrink:0; }
.home-videos__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; min-width:0; align-items:start; }
.home-videos__card { min-width:0; cursor:pointer; }
.home-videos__thumbnail { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:0; padding:0; border:0; aspect-ratio:16 / 9; border-radius:10px; overflow:hidden; background:#171717; color:#FFFFFF; text-decoration:none; }
.home-videos__thumbnail > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.home-videos__thumbnail::after { content:""; position:absolute; inset:0; box-sizing:border-box; border:3px solid rgb(255 255 255 / .55); border-radius:inherit; pointer-events:none; transition:border-color .2s ease; }
.home-videos__play { position:relative; display:grid; place-items:center; width:60px; height:60px; border:1px solid rgb(255 255 255 / .65); border-radius:50%; background:rgb(255 255 255 / .94); color:#D90416; box-shadow:0 4px 18px rgb(0 0 0 / .2); transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; }
.home-videos__play svg { display:block; width:26px; height:26px; }
.home-videos__duration { position:absolute; right:10px; bottom:10px; padding:4px 7px; border-radius:4px; background:rgb(23 23 23 / .85); color:#FFFFFF; font-size:.75rem; line-height:1.25; }
.home-videos .home-videos__card-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; margin:12px 0 0; color:#FFFFFF; font-size:1.0625rem; line-height:1.3; font-weight:700; }
.home-videos .home-videos__description { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow:hidden; margin:8px 0 0; color:rgb(255 255 255 / .78); font-size:.9375rem; line-height:1.6; }
.home-videos :focus-visible { outline:2px solid #FFFFFF; outline-offset:4px; }
.home-videos__inner--intro-only { grid-template-columns:minmax(0,560px); }
.home-videos__inner--cards-only { grid-template-columns:minmax(0,1fr); }
.home-videos__inner--cards-only .home-videos__grid { width:100%; max-width:1040px; justify-self:center; }
@media (hover:hover) and (pointer:fine) {
    .home-videos__card:hover .home-videos__thumbnail::after { border-color:rgb(255 255 255 / .85); }
    .home-videos__card:hover .home-videos__play { transform:scale(1.06); background:#FFFFFF; box-shadow:0 6px 22px rgb(0 0 0 / .26); }
}
@media (max-width:1100px) {
    .home-videos { padding-block:48px; }
    .home-videos__inner { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
    .home-videos__intro { max-width:660px; }
    .home-videos__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
    .home-videos { padding-block:var(--section-padding-compact); }
    .home-videos__inner { width:calc(100% - 48px); }
}
@media (max-width:540px) {
    .home-videos { padding-block:40px; scroll-margin-top:90px; }
    .home-videos__inner { width:calc(100% - 40px); }
    .home-videos__grid { grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media (prefers-reduced-motion:reduce) {
    .home-videos__button,.home-videos__play,.home-videos__thumbnail::after { transition:none; }
    .home-videos__card:hover .home-videos__play { transform:none; }
}

/* Native dialog provides a focus boundary and makes the page behind it inert. */
html.home-video-modal-open { overflow:hidden; scrollbar-gutter:stable; }
body.home-video-modal-open { overflow:hidden; }
.home-video-modal { position:fixed; inset:0; width:min(860px,calc(100vw - 32px),calc((100dvh - 112px) * 16 / 9)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:0; border-radius:12px; overflow:auto; background:#171717; color:#FFFFFF; box-shadow:0 20px 70px rgb(0 0 0 / .45); }
.home-video-modal::backdrop { background:rgb(0 0 0 / .82); }
.home-video-modal__header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 12px 10px 20px; }
.home-video-modal .home-video-modal__title { margin:0; min-width:0; color:#FFFFFF; font-size:1rem; line-height:1.4; font-weight:650; overflow-wrap:anywhere; }
.home-video-modal__close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:10px; border:0; border-radius:50%; background:rgb(255 255 255 / .08); color:#FFFFFF; }
.home-video-modal__close:hover { background:rgb(255 255 255 / .16); }
.home-video-modal__close svg { display:block; width:24px; height:24px; }
.home-video-modal :focus-visible { outline:2px solid #FFFFFF; outline-offset:-4px; }
.home-video-modal__player { position:relative; width:100%; aspect-ratio:16 / 9; background:#000000; }
.home-video-modal__player iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
@media (max-width:540px) {
    .home-video-modal__header { gap:8px; padding-left:14px; }
    .home-video-modal .home-video-modal__title { font-size:.875rem; }
}
