/* ============================================================================
   WHY SHANAS — VIDEO THUMBNAIL FACADE
   ============================================================================
   Styles for the "Why Choose Shanas" section's left-side video. Replaces the
   plain image that used to sit there with a click-to-play video card: same
   photo as before (images/whyshanas1.webp) used as the thumbnail, with a
   play button overlay. Clicking swaps it for an embedded, autoplaying
   YouTube iframe (see why-shanas-video.js).

   Include this file in <head>, after your main stylesheet:
     <link rel="stylesheet" href="css/why-shanas-video.css" />

   Sizing matches the section's previous image exactly (same responsive
   heights at the same breakpoints), so no other layout shifts.
   ============================================================================ */

.tailoring-video {
  position: relative;
  width: 100%;
  height: 20rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 40px -28px oklch(0.19 0.02 330 / 0.35);
}
@media (min-width: 640px) { .tailoring-video { height: 24rem; } }
@media (min-width: 1024px) { .tailoring-video { height: 26rem; } }

.tailoring-video__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tailoring-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to top,
    oklch(0.02 0 0 / 0.55),
    oklch(0.02 0 0 / 0.05) 45%,
    oklch(0.02 0 0 / 0.3)
  );
}

.tailoring-video__play-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px oklch(0.19 0.02 330 / 0.6);
  transition: transform 0.15s ease;
}
.tailoring-video__play:hover .tailoring-video__play-icon,
.tailoring-video__play:focus-visible .tailoring-video__play-icon {
  transform: scale(1.08);
}
.tailoring-video__play-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: var(--primary-foreground);
  margin-left: 3px;
}

.tailoring-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}