/* ===========================================================================
   HOME VIDEO CAROUSEL — STYLESHEET
   ===========================================================================
   HOW TO EDIT THIS FILE:

   1) The VARIABLES in the ".hvc-section" block below are the quickest tweaks.
      Change cards-per-row, gap, vertical padding, colours here first.
   2) The MOBILE block adjusts layout on tablets and phones.
   3) Everything else rarely needs touching.

   To override without editing this file, copy any variable block into your
   (child) theme stylesheet — theme CSS loads after this file, so it wins:
       .hvc-section { --hvc-cards: 3; --hvc-gap: 24px; }
   =========================================================================== */

/* ============================ 1. THE KNOBS ================================ */
.hvc-section {
  /* --- layout --- */
  --hvc-cards: 4;            /* cards across on desktop */
  --hvc-gap: 20px;           /* space between cards */
  --hvc-pad-top: 0px;        /* space above section */
  --hvc-pad-y: 48px;         /* space below section */

  /* --- colours --- */
  --hvc-bg: transparent;     /* transparent = inherits white site background */
  --hvc-text: #7d4928;       /* heading / tab / card-title colour */
  --hvc-radius: 6px;         /* card corner rounding */
  --hvc-divider: #f0efed;    /* thin divider lines (matches theme convention) */
}

/* =========================== 2. MOBILE ==================================== */
/* Tablet: 2 cards across */
@media (max-width: 1024px) {
  .hvc-section { --hvc-cards: 2; }
}
/* Phone: 1.15 cards — peek of next card hints "swipe". Arrows hidden. */
@media (max-width: 640px) {
  .hvc-section {
    --hvc-cards: 1.15;
    --hvc-gap: 14px;
    --hvc-pad-top: 6px;
    --hvc-pad-y: 32px;
  }
  .hvc-section .hvc-arrows { display: none; }
  .hvc-section .hvc-title-full   { display: none; }
  .hvc-section .hvc-title-mobile { display: inline; }
  .hvc-section .hvc-card-title { font-size: 17px; }
}

/* ========================= 3. STRUCTURE ================================== */

/* Section wrapper — no full-width breakout, no background.
   The .container inside handles the site-width constraint. */
.hvc-section {
  padding: var(--hvc-pad-top) 0 var(--hvc-pad-y);
  background: var(--hvc-bg);
  color: var(--hvc-text);
  font-family: inherit;
}

/* Mobile-only title hidden on desktop */
.hvc-title-mobile { display: none; }

/* Left side of header row: title + tabs in one flex line */
.hvc-header-left {
  display: flex;
  align-items: center;
}

/* "YouTube wideo" heading */
.hvc-title {
  display: inline-block;
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
  color: var(--hvc-text);
  margin: 0;
  margin-right: 40px;
}

/* Tab list — mirrors .section-title ul style from the theme */
.hvc-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

/* Each tab — mirrors .section-title ul li style from the theme */
.hvc-tab {
  display: inline-block;
  padding: 0 20px;
  border-right: 1px solid var(--hvc-divider);
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
  color: var(--hvc-text);
  cursor: pointer;
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  transition: opacity .2s;
}
.hvc-tab:first-child { padding-left: 0; }
.hvc-tab:last-child  { padding-right: 0; border-right: none; }
.hvc-tab:hover       { opacity: .65; }
.hvc-tab.is-active   { font-weight: 700; }

/* Arrows — right side of header row, matching site's swiper-button style */
.hvc-arrows {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}
.hvc-arrow {
  width: 26px;
  height: 26px;
  border-radius: 100%;
  border: none;
  background: #f0efed;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s;
  font-size: 0; /* hide text fallback, chevron drawn via ::before */
}
.hvc-arrow:hover { background: #e4ddd6; }

.hvc-arrow::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #5d3106;
  border-right: 1.5px solid #5d3106;
}
.hvc-prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
.hvc-next::before { transform: rotate(45deg)  translate(-1px, 1px); }

/* Scrolling track */
.hvc-track-wrap { position: relative; }
.hvc-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - (var(--hvc-cards) - 1) * var(--hvc-gap)) / var(--hvc-cards)
  );
  gap: var(--hvc-gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hvc-track::-webkit-scrollbar { display: none; }

/* Card */
.hvc-card {
  scroll-snap-align: start;
  text-decoration: none;
  color: var(--hvc-text);
  display: block;
}
.hvc-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border-radius: var(--hvc-radius);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease;
}
.hvc-card:hover .hvc-thumb { transform: translateY(-4px) scale(1.01); }

/* Play button overlay — white circle outline, no fill */
.hvc-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #fff;
}
.hvc-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
}

/* Card title */
.hvc-card-title {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hvc-text);
}

/* Missing-cover placeholder */
.hvc-thumb--empty {
  background: #f0efed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hvc-missing {
  color: #888;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}
.hvc-missing small { font-weight: 400; opacity: .7; }

.hvc-empty { color: #888; padding: 20px 0; }