/* =====================================================================
   Αρχική — «Στην κουζίνα»: βίντεο κάτω από το hero (14/10/2026)

   Υπολογιστής: σειρές ΙΔΙΟΥ ΥΨΟΥΣ. Κάθε κάδρο έχει flex-grow = λόγος
   διαστάσεων (--r, π.χ. 0.5625 για 9:16, 1.7778 για 16:9) και flex-basis 0,
   άρα πλάτος ανάλογο του λόγου ⇒ ίδιο ύψος, χωρίς κόψιμο. Το μοίρασμα σε
   σειρές το κάνει ο server (lib/homeVideos.js → layoutRows). --fill: σειρά με
   λίγα κάδρα δεν απλώνεται σε όλο το πλάτος (θα γινόταν τεράστια).
   Κινητό: πλέγμα 2 στηλών· τα οριζόντια πιάνουν όλο το πλάτος.
   Χρώματα/γραμματοσειρές από το θέμα «Κάβα» του style.css (--coal, --gold, --display).
   ===================================================================== */

.hv { margin-top: 4px; }
.hv .sec-h { margin-top: 46px; }

.hv-grid { display: flex; flex-direction: column; gap: 16px; }
.hv-row {
  display: flex; gap: 16px; align-items: flex-start;
  width: calc(var(--fill, 1) * 100%); margin: 0 auto;
}

.hv-item {
  flex: var(--r, .5625) 1 0; min-width: 0; aspect-ratio: var(--r, .5625);
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--r-card, 10px);
  background: var(--coal, #1d1b1c);
}

.hv-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: -2;
}

/* σκίαση μόνο στο κάτω μέρος, για να διαβάζεται ο τίτλος */
.hv-item::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .72) 100%);
}
/* όσο υπάρχουν τα controls του browser (χωρίς JS) δεν σκεπάζουμε τίποτα */
.hv-item:not(.is-ready)::after, .hv-item:not(.is-ready) .hv-cap { display: none; }

.hv-cap {
  position: absolute; left: 18px; right: 18px; bottom: 20px;
  font-family: var(--display, sans-serif); font-weight: 800; text-transform: uppercase;
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.02; letter-spacing: .01em;
  color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.hv-cap a { color: inherit; pointer-events: auto; text-decoration: none; }
.hv-cap a:hover { color: var(--gold, #f7c600); }
.hv-cap a:focus-visible { outline: 3px solid var(--gold, #f7c600); outline-offset: 3px; border-radius: 2px; }
.hv-wide .hv-cap { font-size: clamp(22px, 2.6vw, 36px); left: 24px; bottom: 24px; }

/* κουμπιά: πάνω δεξιά, μικρά, δεν ανταγωνίζονται την εικόνα */
.hv-ctrl {
  position: absolute; top: 12px; right: 12px; display: flex; gap: 6px;
}
.hv-ctrl[hidden] { display: none; }
.hv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(20, 18, 19, .58); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s, color .15s;
}
.hv-btn:hover { background: rgba(20, 18, 19, .82); color: var(--gold, #f7c600); }
.hv-btn:focus-visible { outline: 3px solid var(--gold, #f7c600); outline-offset: 2px; }
.hv-btn svg { display: block; }

.hv-btn .i-play, .hv-btn .i-on { display: none; }
.hv-item.is-paused .hv-btn .i-pause { display: none; }
.hv-item.is-paused .hv-btn .i-play { display: block; }
.hv-btn[aria-pressed="true"] { background: var(--gold, #f7c600); color: var(--coal, #1d1b1c); }
.hv-btn[aria-pressed="true"] .i-off { display: none; }
.hv-btn[aria-pressed="true"] .i-on { display: block; }

/* χρυσή γραμμή προόδου στο κάτω άκρο — δείχνει ποιο κάδρο παίζει */
.hv-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(255, 255, 255, .16); pointer-events: none;
}
.hv-bar i {
  display: block; height: 100%; width: 100%; background: var(--gold, #f7c600);
  transform: scaleX(0); transform-origin: left center;
}
.hv-item:not(.is-ready) .hv-bar { display: none; }

/* Κλικ οπουδήποτε στο κάδρο = παύση/συνέχεια (το JS βάζει .is-ready) */
.hv-item.is-ready { cursor: pointer; }

@media (max-width: 900px) {
  .hv .sec-h { margin-top: 36px; }
  /* dense: ένα κάθετο που μένει μόνο του δίπλα σε οριζόντιο ανεβαίνει να γεμίσει
     το κενό (κάθετο+οριζόντιο+κάθετο → οριζόντιο πάνω, δύο κάθετα από κάτω) */
  .hv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-auto-flow: row dense; }
  .hv-row { display: contents; }
  .hv-wide { grid-column: 1 / -1; }
  /* ένα μόνο κάδρο: στο κέντρο, όχι κολλημένο αριστερά */
  .hv-grid > .hv-row:only-child > .hv-tall:only-child { grid-column: 1 / -1; justify-self: center; width: 60%; }
  .hv-cap { left: 14px; right: 14px; bottom: 16px; font-size: 19px; }
  .hv-wide .hv-cap { font-size: 24px; left: 16px; bottom: 18px; }
  .hv-ctrl { top: 8px; right: 8px; }
}
@media (max-width: 380px) {
  .hv-cap { font-size: 16px; }
  .hv-btn { width: 32px; height: 32px; }
}

/* =====================================================================
   Carousel και τρεχούμενο banner (14/10/2026)
   Και τα δύο: μία λωρίδα, όλα τα κάδρα ίδιου ύψους (--hv-h), πλάτος = ύψος × λόγος.
   ===================================================================== */
.hv--carousel, .hv--marquee { --hv-h: clamp(300px, 34vw, 480px); }
.hv--carousel .hv-item, .hv--marquee .hv-item {
  /* ένα οριζόντιο κάδρο δεν βγαίνει ποτέ φαρδύτερο από την οθόνη (κινητό) */
  flex: none; width: auto; aspect-ratio: var(--r, .5625);
  height: min(var(--hv-h), calc((100vw - 32px) / var(--r, .5625)));
}

/* --- carousel: εγγενής κύλιση με scroll-snap (δουλεύει και χωρίς JS) */
.hv-car { position: relative; }
.hv-track {
  display: flex; gap: 16px; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; padding-bottom: 2px;
}
.hv-track::-webkit-scrollbar { display: none; }
.hv-track:focus-visible { outline: 3px solid var(--gold, #f7c600); outline-offset: 4px; border-radius: 4px; }
.hv-track .hv-item { scroll-snap-align: start; }
.hv-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold, #f7c600); color: var(--coal, #1d1b1c);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .45);
}
.hv-nav[hidden] { display: none; }
.hv-nav.prev { left: -14px; } .hv-nav.next { right: -14px; }
.hv-nav:hover { background: var(--gold-dark, #d9ad00); }
.hv-nav:focus-visible { outline: 3px solid var(--coal, #1d1b1c); outline-offset: 2px; }

/* --- τρεχούμενο banner: η λωρίδα (δύο ίδια μισά) κινείται έως −50% και ξαναρχίζει */
.hv-marquee {
  overflow: hidden;
  /* πλάτος σε όλη την οθόνη, όπως το hero — το banner «περνά» από άκρη σε άκρη */
  width: 100vw; margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.hv-belt { display: flex; width: max-content; animation: hv-belt var(--hv-dur, 60s) linear infinite; }
.hv-half { display: flex; align-items: center; }
/* κενό ΜΕΣΑ σε κάθε μισό (padding δεξιά), ώστε τα δύο μισά να είναι ακριβώς ίσα */
.hv-half .hv-item { margin-right: 16px; }
.hv-marquee:hover .hv-belt, .hv-marquee:focus-within .hv-belt, .hv-marquee.is-held .hv-belt { animation-play-state: paused; }
@keyframes hv-belt { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* χωρίς κίνηση: απλή λωρίδα που κυλάς με το χέρι, χωρίς το αντίγραφο */
  .hv-belt { animation: none; }
  .hv-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .hv-half[aria-hidden] { display: none; }
}

@media (max-width: 900px) {
  .hv--carousel, .hv--marquee { --hv-h: min(62vh, 420px); }
  .hv-track { gap: 10px; }
  .hv-half .hv-item { margin-right: 10px; }
  .hv-nav { width: 40px; height: 40px; }
  .hv-nav.prev { left: 4px; } .hv-nav.next { right: 4px; }
}