/* ============================================================
   CONTENT BLOCKS — Description + Info Grid (Tahoe Canon v2.0)
   ============================================================ */

/* Shared wrapper: same width as page-content / video */
.description-block,
.video-description,
.info-grid,
.video-info-grid {
  max-width: 1000px;
  margin: 2.5rem auto 0 auto;
  padding: 0 1.5rem;
}

/* ---------------------------------------
   DESCRIPTION BLOCK (glass card)
   --------------------------------------- */

.description-block,
.video-description {
  background: var(--card-glass-bg);
  border: 1px solid var(--card-glass-border);
  border-radius: 22px;

  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);

  box-shadow:
    inset 0 0 2px var(--card-glass-inset-highlight),
    0 10px 25px var(--card-glow);

  padding: 1.9rem 2.1rem;
  margin-bottom: 3rem;
  text-align: center;

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.description-block h2,
.video-description h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.description-block p,
.video-description p {
  max-width: 900px;
  margin: 0.4rem auto 0 auto;

  text-align: justify;
  line-height: 1.55;
  font-size: 1.02rem;
  color: var(--text-color);
}

/* ============================================================
   DESCRIPTION BLOCK — Hover Shadow Soften (Desktop Only)
   ============================================================ */
@media (hover: hover) {
  .description-block:hover {
    transform: none; /* remain anchored */

    /* Slightly softer than info-cards, but consistent aesthetic */
    box-shadow:
      inset 0 0 2px var(--card-glass-inset-highlight),
      0 14px 30px rgba(0,0,0,0.18); /* refined glow */
  }
}


/* ---------------------------------------
   INFO GRID (two cards on desktop)
   --------------------------------------- */

.info-grid,
.video-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.8rem;

  margin-top: 0.5rem;
  margin-bottom: 3.2rem;
}

/* Stack on mobile */
@media (max-width: 767px) {
  .info-grid,
  .video-info-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------
   INFO CARD (Tahoe glass)
   --------------------------------------- */

.info-card {
  padding: 1.6rem 1.4rem;
  border-radius: 22px;

  background: var(--card-glass-bg);
  border: 1px solid var(--card-glass-border);

  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);

  box-shadow:
    inset 0 0 2px var(--card-glass-inset-highlight),
    0 10px 25px var(--card-glow);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.3s ease,
    border-color 0.3s ease;
}

.info-card h3 {
  margin-bottom: 0.7rem;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
}

.info-card p {
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 auto;
  max-width: 92%;
  text-align: justify;
}

/* Enhanced shadow-soften hover (desktop only) */
@media (hover: hover) {
  .info-card:hover {
    /* No lift — stays anchored */
    transform: none;

    /* Stronger, deeper glow for premium depth */
    box-shadow:
      inset 0 0 2px var(--card-glass-inset-highlight),
      0 18px 38px rgba(0,0,0,0.22); /* Stronger diffuse glow */
  }
}

/* ============================================================
   THEME VARIABLES — Card Glass (Day + Night)
   ============================================================ */

:root {
  /* Light mode */
  --card-glass-bg: rgba(255, 255, 255, 0.55);
  --card-glass-border: rgba(255, 255, 255, 0.4);
  --card-glass-inset-highlight: rgba(255, 255, 255, 0.65);
  --card-glow: rgba(0, 0, 0, 0.12);
  --card-glow-hover: rgba(0, 0, 0, 0.17);
}

body.night {
  /* Dark mode — obsidian glass */
  --card-glass-bg: rgba(20, 20, 20, 0.45);
  --card-glass-border: rgba(255, 255, 255, 0.12);
  --card-glass-inset-highlight: rgba(255, 255, 255, 0.08);
  --card-glow: rgba(0, 0, 0, 0.6);
  --card-glow-hover: rgba(0, 0, 0, 0.8);
}