/**
 * History Page — "Our Milestones" + "Media Features" redesign.
 *
 * Ported from the standalone mock-up (html-pages/history) and namespaced under
 * .bnb-hist so it cannot collide with the theme's global resets/typography or
 * the introduce.css `.history` rule that loads on every inner page. Only the
 * two sections that replace the old timeline/international images are styled
 * here — the hero banner keeps its own theme styling; the "Banobagi Welcomes
 * You" section has its own shared redesign in assets/css/welcome-section.css
 * (template-parts/common/welcome-section.php).
 *
 * Design tokens (from the live site): Cormorant Garamond display serif + Inter
 * body; near-black ink on white/cream; slate-navy banner + bronze accents.
 *
 * @package Banobagi_V2
 */

.bnb-hist {
  /* color */
  --ink: #161616;
  --ink-2: #4c4c4c;
  --muted: #8c8c8c;
  --navy: #2d4f6a;
  --navy-deep: #213a4d;
  --rail-line: #33475b;
  --dot-1: #435668;
  --dot-2: #daa777;
  --tan: #c4915f;
  --tan-2: #dda678;
  --tan-3: #e7c7a4;
  --cream: #f5f1ea;
  --beige: #ece6dc;
  --paper: #ffffff;
  --paper-2: #faf8f4;
  --line: #e7e0d4;
  --line-2: #efeae1;
  /* type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* misc */
  --maxw: 1180px;
  --ease: cubic-bezier(.16, .84, .44, 1);
  --rail: 30px;

  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: -.2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: clamp(60px, 9vw, 116px) 0;
}

.bnb-hist *,
.bnb-hist *::before,
.bnb-hist *::after { box-sizing: border-box; }

.bnb-hist img { max-width: 100%; display: block; }
.bnb-hist a { color: inherit; text-decoration: none; }

.bnb-hist .wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 44px);
}

/* ---------------- Section heading ---------------- */
.bnb-hist .kicker {
  font-family: var(--script);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 24px);
  color: var(--tan);
  display: block;
  margin-bottom: 8px;
}
.bnb-hist .section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(44px, 7vw, 76px);
}
.bnb-hist .section-head h1,
.bnb-hist .section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: .02em;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.bnb-hist .section-head .title-bar {
  width: 120px;
  height: 3px;
  background: var(--tan);
  margin: 16px auto 0;
  border-radius: 2px;
}
.bnb-hist .section-head p {
  margin: 18px auto 0;
  color: var(--ink-2);
  max-width: 580px;
  font-weight: 300;
}

/* ============== SERPENTINE TIMELINE (light / editorial) ============== */
.bnb-hist--timeline { background: var(--paper); }
.bnb-hist .snake {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1120px;
  margin-inline: auto;
}

/* The "Since 2000" badge IS the first milestone of lane 1 (the 2000 founding):
   it occupies column 1 of the grid, centred on the rail line like any node, so
   line 1 reads as 6 evenly-spaced markers (badge + 2002…2009·03). The caption
   sits below it; the extra padding-top clears the 74px badge. */
.bnb-hist .t-item.t-start { padding-top: 88px; }
.bnb-hist .t-item.t-start .node { visibility: hidden; }
.bnb-hist .t-item.t-start .t-year { display: none; }
.bnb-hist .start-badge {
  position: absolute;
  top: var(--rail);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #daa777;
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .04em;
  box-shadow: 0 10px 22px -10px rgba(45, 79, 106, .6);
  z-index: 2;
}

.bnb-hist .lane {
  --lp: clamp(22px, 4vw, 48px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.8vw, 26px);
  padding: 0 var(--lp) 24px;
  z-index: 1;
}
/* even lanes flow right-to-left — the snake turns back */
.bnb-hist .lane--rev { direction: rtl; }
.bnb-hist .lane--rev .t-item { direction: ltr; }

/* Serpentine rail as a single SVG <path>. Geometry is generated in JS from the
   live centre of every .node, so the line follows the milestones through any
   column count or breakpoint. The SVG sits behind the lanes; nodes paint on top. */
.bnb-hist .snake-rail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.bnb-hist .snake-rail path {
  fill: none;
  stroke: var(--rail-line);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.bnb-hist .t-item {
  position: relative;
  text-align: center;
  padding-top: 52px;
}
/* Dots: a thick rail-coloured ring with a white centre ("target" style). */
.bnb-hist .t-item .node {
  position: absolute;
  top: calc(var(--rail) - 12px);
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--rail-line);
  z-index: 2;
}
.bnb-hist .t-item.major .node {
  width: 28px;
  height: 28px;
  top: calc(var(--rail) - 14px);
  border-width: 6px;
}
/* Dot rings alternate along the timeline: navy, bronze, navy, … Every lane has
   6 children (lane 1's first child is the badge), so the parity runs unbroken
   across the serpentine turns. First dot (2002) is even → navy. */
.bnb-hist .t-item:nth-child(even) .node { border-color: var(--dot-1); }
.bnb-hist .t-item:nth-child(odd) .node { border-color: var(--dot-2); }
.bnb-hist .t-year {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: .04em;
  margin-bottom: 10px;
  color: var(--tan);
}
/* Year colour follows its dot: even → navy (--dot-1), odd → bronze (--dot-2). */
.bnb-hist .t-item:nth-child(even) .t-year { color: var(--dot-1); }
.bnb-hist .t-item:nth-child(odd) .t-year { color: var(--dot-2); }
.bnb-hist .t-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
.bnb-hist .photo-slot {
  margin: 0 auto 12px;
  width: 100%;
  max-width: 150px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, #f4efe7, #f4efe7 9px, #efe8dc 9px, #efe8dc 18px);
  display: grid;
  place-items: center;
  color: #b9ac96;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bnb-hist img.photo-slot {
  background: none;
  display: block;
  object-fit: cover;
  transition: box-shadow .35s var(--ease), filter .35s var(--ease);
}
.bnb-hist .photo-pair {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0 auto 12px;
  max-width: 150px;
}
.bnb-hist .photo-pair img.photo-slot {
  max-width: none;
  width: 100%;
  margin: 0;
}
.bnb-hist img.photo-slot:hover {
  box-shadow: 0 0 0 1px var(--tan-3), 0 4px 14px rgba(196, 145, 95, .14);
  filter: brightness(1.03);
}

/* ---------------- Media Features (press) ---------------- */
.bnb-hist--press {
  position: relative;
  background-color: var(--cream);
  padding-bottom: clamp(120px, 16vw, 210px);
}
/* Real element (not a background) so it can overflow the section and overlap
   whatever follows: a negative bottom lets it "eclipse" into the next
   section; pointer-events:none keeps it from blocking clicks beneath it. */
.bnb-hist .press-deco {
  position: absolute;
  right: 0;
  bottom: -120px;
  width: clamp(360px, 58vw, 860px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}
/* Fixed 76px gap keeps both rails at the same sub-pixel x so the 3px line rounds
   to the same device-pixel width in each column. */
.bnb-hist .press-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  max-width: 1020px;
  margin-inline: auto;
}
/* Rail = one ::after per group, all positioned identically (left:0; width:3px),
   so every segment shares the exact same x. Spacing between groups is
   padding-bottom, so the rail stays unbroken through the gap. The rail runs only
   between the first and last dots. */
.bnb-hist .year-group {
  position: relative;
  padding-left: 35px;
  padding-bottom: 30px;
}
.bnb-hist .year-group:last-child { padding-bottom: 0; }
.bnb-hist .year-group::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--tan-3);
}
.bnb-hist .year-group:first-child::after { top: 24px; }               /* start AT the first dot */
.bnb-hist .year-group:last-child::after { bottom: auto; height: 24px; } /* end AT the last dot */
/* Dots follow the "Our Milestones" target style — a thick ring around a white
   centre, alternating navy/tan to match each year's heading. */
.bnb-hist .year-group::before {
  content: "";
  position: absolute;
  left: -10.5px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--tan);
  z-index: 1;
}
.bnb-hist .year-group:nth-child(odd)::before { border-color: var(--navy); }
.bnb-hist .year-group h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: .04em;
  margin: 0 0 12px;
}
.bnb-hist .year-group:nth-child(odd) h3 { color: var(--navy); }
.bnb-hist .year-group:nth-child(even) h3 { color: var(--tan); }
.bnb-hist .year-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bnb-hist .year-group li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}
.bnb-hist .year-group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tan-2);
}
.bnb-hist .year-group li em { font-style: italic; color: var(--ink); }
.bnb-hist .press-note {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: clamp(34px, 5vw, 56px);
  font-style: italic;
  font-family: var(--script);
}

/* ---------------- Reveal ---------------- */
.bnb-hist .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.bnb-hist .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bnb-hist .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Tablet ---------------- */
@media (max-width: 1040px) and (min-width: 761px) {
  .bnb-hist .lane { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Phone: vertical timeline ---------------- */
@media (max-width: 760px) {
  /* Hug the content edge so the rail/dots sit near the left like the Media
     Features timeline. Rail centre ≈ node centre ≈ 24px from the edge. */
  .bnb-hist .snake {
    max-width: 520px;
    padding-left: 0;
    position: relative;
  }
  .bnb-hist .snake::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 2px;
    background: var(--rail-line);
  }
  .bnb-hist .snake-rail { display: none; }
  /* 2000 collapses to a normal node on phones: hide the badge, reveal its dot + year. */
  .bnb-hist .t-item.t-start { padding-top: 0; }
  .bnb-hist .t-item.t-start .start-badge { display: none; }
  .bnb-hist .t-item.t-start .node { visibility: visible; }
  .bnb-hist .t-item.t-start .t-year { display: block; }
  .bnb-hist .lane { display: contents; }
  .bnb-hist .t-item {
    direction: ltr;
    text-align: left;
    padding: 0 0 22px 35px;
    position: relative;
  }
  .bnb-hist .t-item .node,
  .bnb-hist .t-item.major .node {
    position: absolute;
    left: 4px;
    top: 4px;
    transform: translateX(-50%);
  }
  .bnb-hist .photo-slot { margin: 0 0 10px; }
  .bnb-hist .photo-pair { margin: 0 0 10px; } /* left-align the 2018·10 image pair like single photos */
  .bnb-hist .press-grid { grid-template-columns: 1fr; gap: 0; }
  .bnb-hist .year-group { padding-bottom: 24px; }
  /* Pull the corner shape up so it clears the "Banobagi Welcomes You" title. */
  .bnb-hist .press-deco { bottom: -24px; }
  /* Stacked into one column, the rail breaks between the two column groups.
     Extend the first column's last segment down and start the second
     column's first segment at the top so they meet into one continuous line. */
  .bnb-hist .press-grid > div:first-child .year-group:last-child { padding-bottom: 24px; }
  .bnb-hist .press-grid > div:first-child .year-group:last-child::after { bottom: 0; height: auto; }
  .bnb-hist .press-grid > div:last-child .year-group:first-child::after { top: 0; }
}

/* ---------------- Explore Banobagi (quick nav under Welcome) ----------------
   Frosted "option" cards: flat glass panels with a thin bronze hairline, a
   bare icon, an uppercase label and a light caption. Hover lifts the card,
   ignites the bronze border, fades in a soft wash and grows a centred
   underline. Scoped under .bnb-hist--explore (its own section, not nested in
   the shared welcome-section.php partial, which 4 templates reuse). */
.bnb-hist--explore { background: var(--paper); padding-top: 0; }
.bnb-hist--explore .explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  max-width: 680px;
  margin: 0 auto;
}
.bnb-hist--explore .explore-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(24px, 2.8vw, 34px) 18px;
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(196, 145, 95, .22);
  border-radius: 4px;
  transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.bnb-hist--explore .explore-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(196, 145, 95, .10), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.bnb-hist--explore .explore-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tan), transparent);
  transform: translateX(-50%);
  transition: width .4s var(--ease);
}
.bnb-hist--explore .explore-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .96);
  border-color: var(--tan);
  box-shadow: 0 14px 34px -16px rgba(196, 145, 95, .42);
}
.bnb-hist--explore .explore-card:hover::before { opacity: 1; }
.bnb-hist--explore .explore-card:hover::after { width: 78%; }
.bnb-hist--explore .explore-card:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.bnb-hist--explore .explore-ic {
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  color: #5c4a3d;
  transition: transform .35s var(--ease), color .35s var(--ease);
}
.bnb-hist--explore .explore-ic svg { width: 46px; height: 46px; }
.bnb-hist--explore .explore-card:hover .explore-ic { transform: scale(1.12) translateY(-2px); color: var(--tan); }
.bnb-hist--explore .explore-t {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink);
  margin-bottom: 5px;
}
.bnb-hist--explore .explore-d {
  display: block;
  max-width: 22ch;
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .bnb-hist--explore .explore-card,
  .bnb-hist--explore .explore-ic { transition: none; }
  .bnb-hist--explore .explore-card:hover { transform: none; }
  .bnb-hist--explore .explore-card:hover .explore-ic { transform: none; }
}

/* ====================================================================
   /history/ — "Banobagi Welcomes You" background.
   welcome-section.php is a SHARED part (History, Look Around, Medical
   Staff, Introduction); its default watermark is the flowing "banobagi"
   wordmark (sec_welcome_bg_img.jpg, rendered as .bnb-welcome-bg imgs).
   The source mock-up (html-pages/history) instead uses a faint Seoul-
   skyline line drawing, so swap it here. This stylesheet loads on
   /history/ only, so the other three pages keep the wordmark watermark.

   Heading text, the dropped eyebrow and the flowing (un-broken) copy are
   driven by the page's ACF welcome fields; the shared welcome-section.css
   already supplies the matching Cormorant/Inter type and section spacing,
   so nothing else needs overriding here. The skyline is cover-scaled,
   anchored bottom-centre at .14 opacity, then pushed down so its horizon
   grounds the YouTube video (the empty lower band of the source art is
   clipped by the section's overflow:hidden).
   ==================================================================== */
/* Hide the shared wordmark <img> (carries the global .pc/.mo helper
   classes, so it needs > (0,1,0) + !important to beat .pc { display:block }). */
.bnb-welcome .bnb-welcome-bg { display: none !important; }
.bnb-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/history/seoul-skyline.webp") no-repeat bottom center;
  background-size: cover;
  opacity: .14;
  transform: translateY(34%);
  pointer-events: none;
}

/* Explore-Banobagi quick-nav sits on its own section after .bnb-welcome;
   extend the welcome's cream field (#f5f1ea) over it so the three cards
   share the same background instead of dropping onto white. */
.bnb-hist--explore { background: #f5f1ea; }

/* Match the mock-up's body tracking: history.html inherits body
   letter-spacing:-.2px on the copy, but a legacy theme rule tightens it
   to -1px here. Restore -.2px so the description reads identically. */
.bnb-welcome .desc { letter-spacing: -.2px; }