/* ==========================================================================
   DHARMIKAM — VIDEOS (inner page)
   Page-specific blocks only. The banner, breadcrumb and header-over-banner
   treatment come from inner-page.css; tokens, buttons and section shells come
   from base.css / sections.css.

   Every card is a click-to-play facade: the poster is a local image and no
   YouTube request is made until the visitor presses play (see js/videos.js).
   That keeps the page fast and sets no third-party cookies on arrival.

   Load order: base.css → sections.css → animations.css → responsive.css
               → inner-page.css → videos.css (last, so it can refine)
   ========================================================================== */

/* ==========================================================================
   1. BANNER REFINEMENT
   ========================================================================== */
.page-hero--videos{min-height:clamp(350px,44vw,540px)}
.page-hero--videos .page-hero__bg img{object-position:center 40%}

/* ==========================================================================
   2. VIDEO GRID
   Three across on desktop, two on tablet, one on phones. Content-agnostic:
   adding or removing a card needs no CSS change.
   ========================================================================== */
.vid-grid{
  display:grid;
  gap:clamp(1.3rem,2.4vw,2.1rem) clamp(1.1rem,1.9vw,1.7rem);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:991.98px){.vid-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575.98px){.vid-grid{grid-template-columns:1fr}}

/* ==========================================================================
   3. VIDEO CARD
   ========================================================================== */
.vid-card{
  display:flex;flex-direction:column;
  margin:0;height:100%;
}

/* --- the poster / player frame --- */
.vid-card__frame{
  position:relative;
  width:100%;padding:0;margin:0 0 1rem;
  aspect-ratio:16/9;
  overflow:hidden;
  border:0;
  border-radius:var(--r-sm);
  box-shadow:var(--sh-sm);
  background:#000 linear-gradient(150deg,var(--mist),var(--sand));
  cursor:pointer;
  appearance:none;-webkit-appearance:none;
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.vid-card__frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out),filter .5s var(--ease);
}
.vid-card__frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,46,30,.04),rgba(15,46,30,.3));
  opacity:.55;transition:opacity .5s var(--ease);
}
.vid-card__frame:hover,.vid-card__frame:focus-visible{
  transform:translateY(-5px);
  box-shadow:var(--sh-md);
}
.vid-card__frame:hover img,.vid-card__frame:focus-visible img{transform:scale(1.06)}
.vid-card__frame:hover::after,.vid-card__frame:focus-visible::after{opacity:1}
.vid-card__frame:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px}

/* thin gold hairline that draws in on hover */
.vid-card__edge{
  position:absolute;z-index:3;inset:0;pointer-events:none;
  border:1px solid rgba(226,200,138,0);
  border-radius:inherit;
  transition:border-color .5s var(--ease);
}
.vid-card__frame:hover .vid-card__edge,
.vid-card__frame:focus-visible .vid-card__edge{border-color:rgba(226,200,138,.55)}

/* --- play badge: YouTube's own proportions, the site's motion --- */
.vid-card__play{
  position:absolute;z-index:4;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:clamp(54px,5vw,68px);aspect-ratio:44/31;
  display:grid;place-items:center;
  border-radius:14px;
  background:#FF0033;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.55);
  pointer-events:none;
  transition:background-color .38s var(--ease),transform .45s var(--ease-out),
             box-shadow .45s var(--ease-out);
}
.vid-card__play svg{width:42%;height:42%;fill:#fff;display:block}
.vid-card__frame:hover .vid-card__play,
.vid-card__frame:focus-visible .vid-card__play{
  background:#E60028;
  transform:translate(-50%,-50%) scale(1.12);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.6);
}

/* --- the iframe that replaces the poster on play --- */
.vid-card__frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
.vid-card__frame.is-playing{cursor:default;transform:none}
.vid-card__frame.is-playing::after,
.vid-card__frame.is-playing .vid-card__play{display:none}

/* --- title --- */
.vid-card__title{
  font-family:var(--font-display);
  font-size:clamp(1rem,1.2vw,1.12rem);
  font-weight:600;line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);
  margin:0;
  transition:color .4s var(--ease);
}
.vid-card:hover .vid-card__title{color:var(--herb)}

/* ==========================================================================
   4. CHANNEL FOOT — the line and button under the listing
   ========================================================================== */
.vid-more{text-align:center}
.vid-more h2{
  font-size:clamp(1.35rem,2.3vw,1.95rem);
  line-height:1.25;
  margin:0 0 1.6rem;
}

/* ==========================================================================
   5. LONG ACCENT HEADINGS
   `.accent` clips a gradient to the text. Across a line break the span is cut
   into fragments and the trailing side bearing is dropped, shaving the
   italic's terminal. Making it an atomic box keeps one unbroken clip region.
   ========================================================================== */
.section-head .accent,.vid-more .accent{display:inline-block;padding-inline:.06em .16em}

/* ==========================================================================
   6. DECORATIVE BLOBS
   ========================================================================== */
.blob--vid-a{
  width:min(54vw,600px);aspect-ratio:1;top:-12%;right:-15%;
  background:radial-gradient(circle,rgba(169,201,182,.5),transparent 68%);
  animation:driftB 27s ease-in-out infinite;
}
.blob--vid-b{
  width:min(48vw,520px);aspect-ratio:1;bottom:-16%;left:-13%;
  background:radial-gradient(circle,rgba(226,200,138,.42),transparent 68%);
  animation:driftA 31s ease-in-out infinite;
}

@media print{
  .vid-grid{grid-template-columns:repeat(2,1fr)}
  .vid-card{break-inside:avoid}
  .vid-card__frame{box-shadow:none}
}