/* ============================================================
   HANBANG BEAUTY · MEDIA PAGE (page-media.php)
   Loaded only on the Media template, on top of styles.css
   ============================================================ */

.hbm {
  --ink: #2b2620;
  --ink-soft: #4a4037;
  --card: #FBF8F3;
  --rail-gap: 28px;
  color: var(--ink);
}
.hbm p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; font-weight: 400; }

/* ── Hero ─────────────────────────────────────────────────── */
.hbm-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream-mid) url('../images/media/hero-cover.jpg') right center / cover no-repeat;
  color: var(--navy);
  padding: 68px 0 70px;
  min-height: 443px;
  text-align: center;
}
.hbm-hero-inner { position: relative; z-index: 1; }
.hbm-kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.hbm-hero h1 {
  color: var(--navy);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.2;
}
.hbm-br-m { display: none; }
.hbm .hbm-hero-lede {
  max-width: 560px;
  margin: 16px auto 0;
  font-size: 17px;
  color: var(--navy);
  opacity: .85;
}

.hbm-proof {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding: 10px 22px 10px 10px;
  background: #FBF6F2;
  border: 1px solid var(--navy);
  border-radius: 999px;
  text-align: left;
}
.hbm-faces { display: flex; }
.hbm-faces li + li { margin-left: -14px; }
.hbm-faces img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FBF6F2;
  box-shadow: 0 0 0 1px var(--gold);
}
.hbm .hbm-proof p { color: var(--navy); font-size: 14px; font-weight: 500; line-height: 1.3; max-width: 220px; }
.hbm-proof strong { display: block; color: var(--gold); font-family: var(--font-serif); font-size: 22px; font-weight: 500; line-height: 1.2; margin-bottom: 2px; }

/* ── Section headers ──────────────────────────────────────── */
.hbm-reels, .hbm-reviews, .hbm-studio, .hbm-cta { padding: 96px 0; }
.hbm section[id] { scroll-margin-top: 68px; }

.hbm-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 420px);
  align-items: end;
  gap: 28px;
  padding-bottom: 28px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.hbm-num {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
}
.hbm-head .eyebrow { font-size: 12px; margin-bottom: 10px; }
.hbm-head h2 { color: var(--navy); font-size: clamp(30px, 3.6vw, 46px); }
.hbm .hbm-head p { font-size: 16px; }

.hbm-head--light { border-color: rgba(205,176,122,.28); }
.hbm-head--light h2 { color: var(--cream); }
.hbm .hbm-head--light p { color: rgba(250,246,240,.78); }
.hbm-head--light .eyebrow { color: var(--gold-light); }

/* ── Reels (Instagram embeds) ─────────────────────────────── */
.hbm-reels { background: var(--cream); }

.hbm-rail { display: grid; gap: var(--rail-gap); }
.hbm-rail--reels   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hbm-rail--studio  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hbm-rail--reviews { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 96px; padding-top: 52px; }

.hbm-reel { min-width: 0; }
.hbm-reel iframe.instagram-media,
.hbm-reel .instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 40px rgba(26,43,69,.08) !important;
  background: #fff !important;
}

/* placeholder until embed.js swaps in the iframe */
blockquote.hbm-embed {
  aspect-ratio: 9 / 16;
  padding: 0 !important;
  overflow: hidden;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) 0 0 / 250% 100%,
    linear-gradient(180deg, var(--cream-mid), var(--cream-deep)) !important;
  animation: hbm-shimmer 2.2s linear infinite;
}
@keyframes hbm-shimmer { to { background-position: -250% 0, 0 0; } }
.hbm-embed a {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--navy);
}
.hbm-embed-glyph {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  position: relative;
}
.hbm-embed-glyph::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 17px;
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent var(--gold);
}
.hbm-embed-handle { font-weight: 600; font-size: 15px; }
.hbm-embed-cta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* ── Testimonial cards ────────────────────────────────────── */
.hbm-reviews { background: #fff; }

.hbm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 68px 26px 34px;
  background: var(--card);
  border: 1px solid var(--gold-light);
  border-radius: 28px;
}
.hbm-card::before,
.hbm-card::after {
  position: absolute;
  font-family: var(--font-serif);
  font-size: 84px;
  line-height: 1;
  color: var(--gold);
}
.hbm-card::before { content: '\201C'; left: 16px; top: 52px; }
.hbm-card::after  { content: '\201D'; right: 16px; bottom: -26px; }

.hbm-card-face {
  position: absolute;
  top: -52px;
  left: 50%;
  width: 104px;
  height: 104px;
  margin-left: -52px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1.5px var(--gold);
}
.hbm-card-handle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  transition: color .2s;
}
.hbm-card-icon { width: 17px; height: 17px; flex: none; }
.hbm-card-handle-text {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.hbm-card-ext { font-size: 14px; color: var(--gold); transition: transform .2s; }
.hbm-card-handle:hover, .hbm-card-handle:focus-visible { color: var(--gold); }
.hbm-card-handle:hover .hbm-card-ext { transform: translate(2px, -2px); }
.hbm .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hbm-card-reach {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}
.hbm-card blockquote { margin-top: 22px; }
.hbm .hbm-card-pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 16px;
}
.hbm .hbm-card blockquote p:not(.hbm-card-pull) { font-size: 15.5px; line-height: 1.65; }
.hbm .hbm-card blockquote p + p:not(.hbm-card-pull) { margin-top: 12px; }

/* ── Studio band ──────────────────────────────────────────── */
.hbm-studio {
  position: relative;
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
}
/* sprocket edges, a nod to film */
.hbm-studio::before,
.hbm-studio::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: radial-gradient(circle, rgba(205,176,122,.38) 3px, transparent 3.5px) 0 50% / 26px 14px repeat-x;
}
.hbm-studio::before { top: 18px; }
.hbm-studio::after  { bottom: 18px; }
.hbm-studio .hbm-reel .instagram-media { border-color: rgba(205,176,122,.4) !important; }
.hbm-studio blockquote.hbm-embed {
  background:
    linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%) 0 0 / 250% 100%,
    linear-gradient(180deg, var(--navy-light), var(--bark-mid)) !important;
}
.hbm-studio .hbm-embed a { color: var(--cream); }
.hbm-studio .hbm-embed-cta { color: var(--gold-light); }

/* ── CTA ──────────────────────────────────────────────────── */
.hbm-cta { background: var(--cream); text-align: center; }
.hbm-cta-sprig { width: 64px; height: 92px; color: var(--gold); margin: 0 auto 18px; display: block; }
.hbm-cta h2 { color: var(--navy); }
.hbm .hbm-cta p { max-width: 540px; margin: 16px auto 0; }
.hbm-cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hbm .btn { font-size: 13px; padding: 1rem 2rem; }
.hbm .btn-outline { border-color: var(--gold); }

/* ── Rail controls (mobile only) ──────────────────────────── */
.hbm-rail-nav { display: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1280px) {
  .hbm-rail--reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbm-rail--studio  { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; }
}
@media (max-width: 1024px) {
  .hbm-head { grid-template-columns: auto minmax(0, 1fr); }
  .hbm-head > p { grid-column: 1 / -1; max-width: 560px; }
  .hbm-rail--reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hbm { --rail-gap: 16px; }
  /* photo on top, fading into the page, copy below (same pattern as the inner page heroes) */
  .hbm-hero { min-height: 0; padding: 0 0 52px; background: var(--cream-mid); }
  .hbm-hero::before {
    content: '';
    display: block;
    height: clamp(240px, 62vw, 420px);
    margin-bottom: -1.25rem;
    background: url('../images/media/hero-cover-mobile.jpg') center bottom / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  .hbm-kicker { font-size: 11px; letter-spacing: .2em; margin-bottom: 12px; }
  .hbm-hero h1 { font-size: 40px; }
  .hbm-br-m { display: inline; }
  .hbm .hbm-hero-lede { max-width: 340px; margin-top: 12px; font-size: 15px; line-height: 1.65; }
  .hbm-proof {
    flex-direction: column;
    gap: 8px;
    margin-top: 28px;
    padding: 14px 20px;
    border-width: .5px;
    border-radius: 12px;
    background: var(--cream);
    text-align: center;
  }
  .hbm-faces li + li { margin-left: -12px; }
  .hbm-faces img { width: 40px; height: 40px; }
  .hbm .hbm-proof p { max-width: none; font-size: 13px; }
  .hbm-proof strong { margin-bottom: 6px; }

  .hbm-reels, .hbm-reviews, .hbm-studio, .hbm-cta { padding: 64px 0; }
  .hbm-head { gap: 6px 16px; margin-bottom: 28px; padding-bottom: 20px; }
  .hbm-head { grid-template-columns: 1fr; }
  .hbm-num { display: none; }
  .hbm-head .eyebrow { margin-bottom: 6px; }

  /* swipe rails, bleed to the screen edge and peek the next item */
  .hbm-rail,
  .hbm-rail--reels,
  .hbm-rail--studio,
  .hbm-rail--reviews {
    display: flex;
    justify-content: flex-start;
    gap: var(--rail-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hbm-rail::-webkit-scrollbar { display: none; }
  .hbm-rail--reviews { padding-top: 56px; padding-bottom: 32px; }
  .hbm-rail > * { flex: 0 0 min(84vw, 360px); scroll-snap-align: start; }
  .hbm-card.reveal { opacity: 1; transform: none; }

  .hbm-rail-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 20px;
  }
  .hbm-rail-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: transparent;
    color: var(--navy);
    font-size: 18px;
  }
  .hbm-rail-nav button:disabled { opacity: .35; }
  .hbm-rail-nav span { font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--ink-soft); min-width: 52px; text-align: center; }
  .hbm-rail-nav--light button { color: var(--cream); }
  .hbm-rail-nav--light span { color: rgba(250,246,240,.8); }

  .hbm-cta-btns .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  blockquote.hbm-embed { animation: none; }
}