.home-video[hidden],
.home-video-navigation[hidden] { display: none; }

.home-video {
  padding: 20px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
  border-block: 1px solid #e5d48b;
  background: #fff2b8;
  color: #282921;
  letter-spacing: 0;
}

.home-video-inner {
  display: grid;
  grid-template: "heading player" 1fr "details player" 1.45fr / minmax(0, 1fr) minmax(0, 1.65fr);
  gap: 16px 32px;
  align-items: start;
  width: min(100%, 960px);
  margin-inline: auto;
}

.home-video-inner:has(.is-short) {
  grid-template-columns: minmax(0, 330px) minmax(0, 280px);
  justify-content: center;
}

.home-video-heading {
  grid-area: heading;
  align-self: end;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-block-end: 8px;
  border-bottom: 1px solid #d9c773;
}

.home-video-heading h2,
.home-video-title,
.home-video-count { margin: 0; letter-spacing: 0; }
.home-video-heading h2 { font-size: 18px; line-height: 1.4; color: inherit; }
.home-video-details { grid-area: details; min-width: 0; }
.home-video-title { font-size: 24px; line-height: 1.35; overflow-wrap: anywhere; color: inherit; }
.home-video-count { margin-block-end: 4px; font-size: 13px; color: #5b5136; font-variant-numeric: tabular-nums; }

.home-video-frame {
  grid-area: player;
  justify-self: center;
  align-self: center;
  position: relative;
  inset: auto;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #131714;
}

.home-video-frame.is-short {
  inline-size: min(100%, clamp(200px, 29svh, 248px));
}

.home-video-surface { position: relative; inline-size: 100%; min-block-size: 200px; aspect-ratio: 16 / 9; }
.home-video-frame.is-short .home-video-surface {
  block-size: clamp(200px, 53svh, 432px);
  aspect-ratio: auto;
}

.home-video-toolbar { display: flex; justify-content: flex-end; padding-inline: 4px; }
.home-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.home-video-actions,
.home-video-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-video-actions { flex-wrap: wrap; margin-block-start: 14px; }
.home-video-button,
.home-video-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid #b5a45d;
  border-radius: 6px;
  background: #fffaf0;
  color: #282921;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.home-video-navigation .home-video-button { width: 44px; padding: 0; }
.home-video-toolbar .home-video-size { background: transparent; border-color: transparent; color: #fff; }
.home-video-toolbar .home-video-size:hover { background: #363b37; color: #fff; }
.home-video-toolbar .home-video-size:focus-visible { outline-color: #fff2b8; outline-offset: -3px; }
.home-video-button:focus-visible,
.home-video-source:focus-visible { outline: 2px solid #62488c; outline-offset: 2px; }

@media (hover: hover) {
  .home-video-button:hover, .home-video-source:hover { background: #fff; color: #282921; }
}

@media (max-width: 680px) and (orientation: portrait), (max-width: 450px) {
  .home-video { padding-block: 12px; }
  .home-video-inner, .home-video-inner:has(.is-short) { grid-template: "heading" auto "player" auto "details" auto / minmax(0, 1fr); gap: 10px; }
  .home-video-title { font-size: 20px; }
  .home-video-actions { margin-block-start: 8px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .home-video { padding-block: 8px; }
  .home-video-inner { gap: 8px 20px; }
  .home-video-frame .home-video-surface, .home-video-frame.is-short .home-video-surface {
    block-size: clamp(200px, calc(100dvh - 160px), 340px);
    aspect-ratio: auto;
  }
  .home-video-title { font-size: 20px; }
  .home-video-actions { margin-block-start: 8px; }
}

.home-video-frame:modal {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 100dvh;
  max-block-size: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-radius: 0;
  background: #131714;
}
.home-video-frame:modal .home-video-surface { block-size: auto; min-block-size: 0; aspect-ratio: auto; }
body:has(.home-video-frame:modal) { overflow: hidden; }