/* =========================================
   TRT Procedures – Videos Grid (Responsive)
   Uses global :root variables from style.css
   ========================================= */

.trtpv-wrap {
  display: flow-root;
  margin: 16px 0 24px;
}

/* Grid container */
.trtpv-grid {
  display: grid;
  gap: 20px;
  position: relative;
  contain: layout paint;
  padding-bottom: 20px; /* bottom gap before next section */
  grid-template-columns: repeat(3, 1fr); /* default = 3 columns */
  align-items: start;
}

/* Column presets */
.trtpv-grid.cols-1 { grid-template-columns: 1fr; }
.trtpv-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.trtpv-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.trtpv-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Ratio presets (modern) */
.trtpv-embed { aspect-ratio: 16 / 9; } /* default */
.trtpv-grid.ratio-16x9 .trtpv-embed { aspect-ratio: 16 / 9; }
.trtpv-grid.ratio-4x3 .trtpv-embed { aspect-ratio: 4 / 3; }
.trtpv-grid.ratio-1x1 .trtpv-embed { aspect-ratio: 1 / 1; }

/* Card styling */
.trtpv-item {
  display: flow-root;
  background: var(--color-white);
  border: 1px solid var(--color-gray-focus);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease;
  max-width: 100%;
}
.trtpv-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
}

/* Embed wrapper */
.trtpv-embed {
  width: 100%;
  background: #000;
  border-radius: inherit;
  min-height: 200px; /* safety min, replaced by aspect-ratio */
  position: relative;
  overflow: hidden;
}
.trtpv-embed iframe,
.trtpv-embed embed,
.trtpv-embed object,
.trtpv-embed video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
  max-width: 100%;
}

/* Old browsers fallback (no aspect-ratio support) */
@supports not (aspect-ratio: 1 / 1) {
  .trtpv-embed { min-height: 0; }
  .trtpv-embed::before {
    content: "";
    display: block; /* padding set inline from PHP for chosen ratio */
  }
  .trtpv-embed > iframe {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Title under video */
.trtpv-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-default);
  padding: 10px 12px 12px;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
  text-align: left;
}

/* Smooth hover and focus states */
.trtpv-item:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 35%, transparent);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .trtpv-item { transition: none; }
}

/* ========================
   RESPONSIVE BREAKPOINTS
   ======================== */

/* Desktop large → 3 per row */
@media (min-width: 1201px) {
  .trtpv-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet landscape → 2 per row */
@media (max-width: 992px) {
  .trtpv-grid.cols-4,
  .trtpv-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .trtpv-grid { gap: 16px; }
}

/* Mobile and small tablet → always 1 per row */
@media (max-width: 768px) {
  .trtpv-grid.cols-4,
  .trtpv-grid.cols-3,
  .trtpv-grid.cols-2,
  .trtpv-grid.cols-1 {
    grid-template-columns: 1fr !important;
  }
  .trtpv-grid { gap: 14px; }
  .trtpv-item { border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .05); }
}