/* ─────────────────────────────────────────────────────────────
 * HOME PAGE POLISH (v5.2) — loads after every other stylesheet
 *   1. Phone hero: the reel fills the whole card and the headline sits on it
 *   2. Featured stories: an editorial gallery with captions on the pictures
 * ───────────────────────────────────────────────────────────── */

/* ═════════ 2. FEATURED STORIES GALLERY ═════════ */
.ns-home-section.ns-stories .ns-story-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 1rem;
}
.ns-stories .ns-story-tile {
  position: relative;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #2B2422;
  border-radius: 3px;
  box-shadow: 0 18px 40px -28px rgba(60, 40, 30, 0.55);
}
.ns-stories .ns-story-tile:nth-child(1) { grid-row: 1 / span 2; }
.ns-stories .ns-story-tile:nth-child(4) { grid-column: 2 / span 2; }
.ns-stories .ns-story-tile:hover { border: 0; box-shadow: 0 28px 54px -26px rgba(60, 40, 30, 0.65); }

.ns-stories .ns-story-tile__img {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}
/* captions live on the picture */
.ns-stories .ns-story-tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 3.5rem 1.4rem 1.3rem;
  background: linear-gradient(to top, rgba(28, 22, 20, 0.82) 0%, rgba(28, 22, 20, 0.45) 55%, rgba(28, 22, 20, 0) 100%);
  pointer-events: none;
}
.ns-stories .ns-story-tile__body h4 { color: #fff; font-size: 1.55rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); }
.ns-stories .ns-story-tile:nth-child(1) .ns-story-tile__body h4 { font-size: 2.1rem; }
.ns-stories .ns-story-tile__loc { color: #EBD9B4; }
.ns-stories .ns-story-tile__heart { color: #F1C9CF; }
.ns-stories .ns-story-tile:hover .ns-story-tile__heart { color: #fff; }

@media (max-width: 991px) {
  .ns-home-section.ns-stories .ns-story-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 340px 230px 250px;
    gap: 0.7rem;
  }
  .ns-stories .ns-story-tile:nth-child(1) { grid-column: 1 / -1; grid-row: auto; }
  .ns-stories .ns-story-tile:nth-child(4) { grid-column: 1 / -1; }
  .ns-stories .ns-story-tile__body { padding: 2.5rem 0.95rem 0.9rem; }
  .ns-stories .ns-story-tile__body h4 { font-size: 1.25rem; }
  .ns-stories .ns-story-tile:nth-child(1) .ns-story-tile__body h4 { font-size: 1.7rem; }
  .ns-stories .ns-story-tile__heart { display: inline-block; font-size: 0.85rem; }
}

/* ═════════ 1. PHONE HERO: FULL-BLEED REEL ═════════ */
@media (max-width: 768px) {
  html body .ns-hero-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: 640px !important;
    min-height: min(86svh, 720px) !important;
    padding: 5rem 1.35rem 1.6rem !important;
    background: #2B2422 !important;
    border-color: transparent !important;
  }
  html body .ns-hero-card .ns-aurora { display: none !important; }
  html body .ns-hero-card::before { inset: 10px; border-color: rgba(255, 255, 255, 0.28); }

  /* the reel becomes the card's background */
  html body .ns-hero-card .ns-live-bg-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 0;
  }
  html body .ns-hero-card .ns-hero-vignette {
    background:
      linear-gradient(to top, rgba(24, 18, 16, 0.92) 0%, rgba(24, 18, 16, 0.62) 38%, rgba(24, 18, 16, 0.12) 68%, rgba(24, 18, 16, 0.35) 100%);
  }

  /* reel switcher + sound button move to the top corner, clear of the headline */
  html body .ns-hero-card .ns-reel-controls-bar {
    top: 22px !important;
    bottom: auto !important;
    left: 22px !important;
    right: 22px !important;
    z-index: 4;
  }

  html body .ns-hero-card .ns-hero-text-col { position: relative; z-index: 3; }
  html body .ns-hero-card .ns-eyebrow { color: #EBD9B4; letter-spacing: 0.2em; font-size: 0.64rem; }
  html body .ns-hero-card .ns-ornament { background: #EBD9B4; }
  html body .ns-hero-card .ns-hero-title {
    color: #fff;
    margin-bottom: 1.4rem;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  }
  html body .ns-hero-card .ns-hero-title em { color: #F6CDD3; }
  html body .ns-hero-card .ns-hero-title.ns-split-h.ns-in em .ns-w > span {
    background-image: linear-gradient(100deg, #F6CDD3 0 42%, #fff 50%, #F6CDD3 58% 100%);
  }
  html body .ns-hero-card .ns-flourish { color: #EBD9B4; stroke: #EBD9B4; }
  html body .ns-hero-card .ns-hero-sub { color: rgba(255, 255, 255, 0.88); margin-bottom: 1.6rem; }
  html body .ns-hero-card .ns-hero-actions { margin-bottom: 0; }
  html body .ns-hero-card .ns-b--dark {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.7);
    color: #fff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* the small Instagram chip would collide with the on-picture caption */
.ns-stories .ns-story-tile .ns-ig-chip { display: none; }