/*
 * NM Feature Layout: styles for posts on the "Feature (full width)" template.
 *
 * Values match newmobility.com: Rubik, Source Serif Pro, NM red #d41c24 (a story can swap
 * the accent; see .nmf-accent-orange). The theme's fixed header is 117 px tall in its
 * compact form, which feature posts use from the top of the page (768 px and wider);
 * below that a 51 px bar sits over the masthead logo.
 *
 * Every rule is scoped to .nmf (the article) or body.nmf-feature, so nothing here
 * reaches other posts. Section classes are set on core blocks in the editor
 * (Advanced > Additional CSS class): nmf-hero (--wide), nmf-narrow, nmf-route, nmf-chapter
 * (--flip, --compact), nmf-facts, nmf-favorites, nmf-fav, nmf-box (--dark), nmf-photos,
 * nmf-pull and their __parts. Groups that hold a photo beside text take one media block:
 * an image, or an nmf-photos group for several.
 */

/* ---------- Theme overrides on feature posts only ---------- */
/* NM's header shrinks to its compact form (logo inside the bar) once a reader scrolls.
   Feature posts start compact, so the full-size logo never hangs over the hero photo.
   These are the theme's own .header.fixed rules. */
body.nmf-feature .header .header__nav { padding: 20px 0; }
body.nmf-feature .header .header__logo-container { width: 45px; height: 62px; overflow: hidden; }
body.nmf-feature .header .header-logo { top: 7px; }
body.nmf-feature #main { overflow: visible; overflow-x: clip; } /* the theme's overflow: auto stops sticky photos */
body.nmf-feature #main > .inner { padding-top: 0; }
@media (min-width: 768px) {
  body.nmf-feature #main { padding-top: 0; }
}

/* ---------- Base ---------- */
.nmf {
  --nmf-ink: #1a1919;
  --nmf-ink-deep: #141313;
  --nmf-accent: #d41c24;         /* NM red */
  --nmf-accent-on-dark: #f2545b;
  --nmf-tint: #f4f1ec;
  --nmf-rule: #ded8cf;
  --nmf-muted: #67625c;
  --nmf-muted-on-dark: #aaa49c;
  --nmf-serif: "Source Serif Pro", Georgia, serif;
  --nmf-sans: Rubik, "Helvetica Neue", Arial, sans-serif;
  --nmf-hdr: 51px;
  --nmf-hdr-top: 0px;
  display: block;
  color: var(--nmf-ink);
  font-family: var(--nmf-serif);
}
@media (min-width: 768px) {
  .nmf { --nmf-hdr: 117px; --nmf-hdr-top: 117px; padding-top: var(--nmf-hdr-top); }
}
.nmf *, .nmf *::before, .nmf *::after { box-sizing: border-box; }
/* Story options: add the class to the hero (Advanced > Additional CSS class) */
.nmf:has(.nmf-type-sans) :is(h1, h2, h3) { font-family: var(--nmf-sans); font-weight: 800; letter-spacing: -.01em; text-transform: uppercase; }
.nmf:has(.nmf-type-sans) h1 { line-height: .95; }
.nmf:has(.nmf-type-sans) :is(h2, h3) { line-height: 1.05; }
.nmf:has(.nmf-accent-orange) { --nmf-accent: #c2410c; --nmf-accent-on-dark: #f26522; } /* Nerve Gaming orange */
/* A hero that opens the post runs its dark band up under the fixed header */
.nmf > .nmf-hero:first-child { margin-top: calc(-1 * var(--nmf-hdr-top)); padding-top: var(--nmf-hdr-top); }
.nmf [id] { scroll-margin-top: calc(var(--nmf-hdr) + 24px); }
/* WordPress wraps group contents in this div for themes without theme.json; let the children lay out as if it weren't there */
.nmf .wp-block-group__inner-container { display: contents; }

.nmf p { margin: 0 0 1.15em; font-family: var(--nmf-serif); font-size: 20px; line-height: 1.65; color: inherit; }
.nmf h1, .nmf h2, .nmf h3, .nmf h4 { font-family: var(--nmf-serif); color: inherit; letter-spacing: normal; text-transform: none; }
.nmf a { color: var(--nmf-accent); }
.nmf figure { margin: 0; }
.nmf .wp-block-image img { display: block; width: 100%; height: auto; }
.nmf .wp-block-image figcaption,
.nmf .wp-element-caption { margin: 12px 0 0; font-family: var(--nmf-sans); font-size: 14px; font-style: normal; line-height: 1.45; text-align: left; color: var(--nmf-muted); }
.nmf .nmf-slug { margin: 0 0 18px; font-family: var(--nmf-sans); font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--nmf-accent); }

/* ---------- Hero: headline beside a full, uncropped photo ---------- */
.nmf .nmf-hero { margin: 0; background: var(--nmf-ink-deep); color: #fff; }
.nmf .nmf-hero .wp-block-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin: 0; }
.nmf .nmf-hero__text { align-self: center; justify-self: center; max-width: 620px; padding: 64px clamp(32px, 6vw, 96px); }
.nmf .nmf-hero .nmf-slug { color: var(--nmf-accent-on-dark); }
.nmf .nmf-hero h1 { margin: 0; font-size: clamp(48px, 6.2vw, 92px); font-weight: 400; line-height: 1; letter-spacing: -.01em; color: #fff; }
.nmf .nmf-hero .nmf-dek { margin: 28px 0 0; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.45; color: #dcd7d0; }
.nmf .nmf-hero .nmf-byline { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid #3a3836; font-family: var(--nmf-sans); font-size: 14px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.nmf .nmf-hero .nmf-byline a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.nmf .nmf-hero .nmf-byline a:hover, .nmf .nmf-hero .nmf-byline a:focus { border-bottom-color: var(--nmf-accent-on-dark); }
.nmf .nmf-byline__date { color: var(--nmf-muted-on-dark); }
.nmf .nmf-byline__date::before { content: "\00b7"; margin: 0 .55em; }
.nmf .nmf-hero .wp-block-image img { max-height: calc(100vh - var(--nmf-hdr-top) - 52px); max-height: calc(100svh - var(--nmf-hdr-top) - 52px); object-fit: contain; object-position: right top; }
.nmf .nmf-hero .wp-block-image figcaption { margin: 0; padding: 14px 20px 18px; font-size: 13px; text-align: right; color: var(--nmf-muted-on-dark); }
/* Wide variant for landscape photos: photo across the top, headline below */
.nmf .nmf-hero--wide .wp-block-columns { grid-template-columns: minmax(0, 1fr); }
.nmf .nmf-hero--wide .nmf-hero__media { order: -1; }
/* Wide heroes use a photo pre-cropped to 2:1 (prep_photos.py), shown edge to edge at that shape */
.nmf .nmf-hero--wide .nmf-hero__media { width: 100%; max-width: 1920px; margin: 0 auto; }
.nmf .nmf-hero--wide .wp-block-image img { max-height: none; }
.nmf .nmf-hero--wide .wp-block-image figcaption { max-width: 1280px; margin: 0 auto; padding: 12px 40px 0; }
.nmf .nmf-hero--wide .nmf-hero__text { justify-self: stretch; width: 100%; max-width: 1280px; margin: 0 auto; padding: 44px 40px 72px; }
.nmf .nmf-hero--wide h1 { max-width: 15em; }
.nmf .nmf-hero--wide .nmf-dek { max-width: 40em; }
.nmf .nmf-hero--wide .nmf-byline { display: inline-block; }

/* ---------- Narrow text sections (opening, closing) ---------- */
.nmf .nmf-narrow { max-width: 680px; margin: 0 auto; padding: 96px 24px 72px; }
.nmf .nmf-narrow:last-child { padding-bottom: 140px; }
.nmf .nmf-narrow + .nmf-narrow { padding-top: 0; } /* consecutive text sections read as one column */
.nmf .nmf-narrow h2 { margin: 0 0 40px;font-size: clamp(36px, 4vw, 54px); font-weight: 400; line-height: 1.08; }
.nmf .has-drop-cap:not(:focus)::first-letter { float: left; margin: .07em .09em 0 0; font-size: 5.1em; font-style: normal; font-weight: 700; line-height: .8; text-transform: none; color: var(--nmf-accent); }

/* ---------- Route map (Custom HTML block built by make_map.cjs) ---------- */
.nmf .nmf-route { padding: 24px 0; background: var(--nmf-tint); }
.nmf .route-map { display: block; width: 100%; max-width: 1280px; height: auto; margin: 0 auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-composite: intersect; }
.nmf .route-map--narrow { display: none; }
.nmf .map-land { fill: #e7e1d8; stroke: var(--nmf-tint); stroke-width: 1.4; }
.nmf .map-land--route { fill: #fff; stroke: #d3cbbf; stroke-width: 1.2; }
.nmf .map-river { fill: none; stroke: #8fb0c6; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.nmf .map-river-label { font-family: var(--nmf-serif); font-size: 17px; font-style: italic; fill: #5f89a6; }
.nmf .map-country { font-family: var(--nmf-sans); font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; fill: #a39b90; }
.nmf .map-leg { fill: none; stroke: var(--nmf-accent); stroke-width: 3.5; stroke-linecap: round; }
.nmf .map-leg-label { font-family: var(--nmf-sans); font-size: 16px; font-style: italic; fill: var(--nmf-accent); }
.nmf .map-city { cursor: pointer; outline: none; }
.nmf .map-dot { fill: var(--nmf-ink); stroke: #fff; stroke-width: 3; }
.nmf .map-dot-halo { fill: var(--nmf-accent); opacity: 0; transition: opacity .2s ease; }
.nmf .map-city:hover .map-dot-halo, .nmf .map-city:focus-visible .map-dot-halo { opacity: .18; }
.nmf .map-city:focus-visible .map-city-name { text-decoration: underline; }
.nmf .map-city-name { font-family: var(--nmf-serif); font-size: 32px; font-weight: 700; fill: var(--nmf-ink); }
.nmf .map-city-stay { font-family: var(--nmf-sans); font-size: 16px; fill: var(--nmf-muted); }

/* ---------- Chapters: text beside a photo that stays in view ---------- */
.nmf .nmf-chapter { max-width: 1280px; margin: 0 auto; padding: 128px 40px 88px; }
.nmf .nmf-chapter .wp-block-columns { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 104px); margin: 0; }
.nmf .nmf-chapter--flip .wp-block-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 620px); }
.nmf .nmf-chapter h2 { margin: 0 0 40px; font-size: clamp(36px, 4vw, 54px); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; }
.nmf .nmf-chapter__media { position: sticky; top: calc(var(--nmf-hdr) + 32px); align-self: start; }
.nmf .nmf-chapter__media .wp-block-image img { max-height: calc(100vh - var(--nmf-hdr) - 130px); max-height: calc(100svh - var(--nmf-hdr) - 130px); object-fit: contain; object-position: left top; }
.nmf .nmf-chapter__media .wp-block-image figcaption { max-width: 420px; }
.nmf .nmf-chapter--flip .nmf-chapter__media .wp-block-image img { object-position: right top; }
.nmf .nmf-chapter--flip .nmf-chapter__media .wp-block-image figcaption { margin-left: auto; text-align: right; }
/* With no photo, the fact box takes the photo's column and stays in view the same way */
.nmf .nmf-chapter__aside { position: sticky; top: calc(var(--nmf-hdr) + 32px); align-self: start; }
.nmf .nmf-chapter__aside .nmf-facts { margin-top: 0; }
/* Compact chapters hold products inside a longer story */
.nmf .nmf-chapter--compact { padding-top: 72px; padding-bottom: 56px; }
.nmf .nmf-chapter h3 { margin: 0 0 10px; font-size: clamp(30px, 3vw, 40px); font-weight: 400; line-height: 1.1; }
.nmf .nmf-display { margin: 0 0 26px; font-size: 22px; font-style: italic; line-height: 1.35; color: var(--nmf-muted); }

/* ---------- Fact box: labeled facts, paragraphs or bullet lists ---------- */
.nmf .nmf-facts { margin: 36px 0 0; padding: 26px 30px 24px; background: var(--nmf-tint); }
.nmf .nmf-facts .nmf-facts__label { margin: 20px 0 6px; font-family: var(--nmf-sans); font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: var(--nmf-accent); }
.nmf .nmf-facts .nmf-facts__label:first-child { margin-top: 0; }
.nmf .nmf-facts p { margin: 0 0 .6em; font-size: 17px; line-height: 1.55; }
.nmf .nmf-facts ul { margin: 0 0 .5em; padding: 0; list-style: none; }
.nmf .nmf-facts li { position: relative; margin: 0 0 6px; padding-left: 18px; font-family: var(--nmf-serif); font-size: 17px; line-height: 1.5; }
.nmf .nmf-facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--nmf-accent); }

/* ---------- Lists on a tinted panel: name | text | optional photo ---------- */
.nmf .nmf-favorites { margin: 0; padding: 96px 40px 80px; background: var(--nmf-tint); }
.nmf .nmf-favorites h3,
.nmf .nmf-favorites .nmf-fav { max-width: 1120px; margin-left: auto; margin-right: auto; }
.nmf .nmf-favorites h3 { margin-top: 0; margin-bottom: 44px; font-size: clamp(28px, 2.8vw, 38px); font-weight: 400; line-height: 1.15; }
.nmf .nmf-fav { display: grid; grid-template-columns: 250px minmax(0, 1fr) 296px; column-gap: 52px; margin-top: 0; margin-bottom: 0; padding: 34px 0 30px; border-top: 1px solid var(--nmf-rule); }
.nmf .nmf-fav h4 { margin: 0 0 12px; font-size: 25px; font-weight: 700; line-height: 1.2; }
.nmf .nmf-fav p { margin: 0 0 1em; font-size: 18px; line-height: 1.62; }
.nmf :is(.nmf-fav, .nmf-fav > .wp-block-group__inner-container) > * { grid-column: 2; }
.nmf :is(.nmf-fav, .nmf-fav > .wp-block-group__inner-container) > h4 { grid-column: 1; grid-row: 1 / span 9; }
.nmf :is(.nmf-fav, .nmf-fav > .wp-block-group__inner-container) > :is(.wp-block-image, .nmf-photos) { grid-column: 3; grid-row: 1 / span 9; }

/* ---------- Pull quote ---------- */
.nmf .wp-block-pullquote.nmf-pull { margin: 56px -72px; padding: 0; border: 0; text-align: left; color: var(--nmf-ink); }
.nmf .nmf-pull blockquote { margin: 0; padding: 0; border: 0; font-style: normal; }
.nmf .nmf-pull blockquote::before { content: ""; display: block; width: 48px; height: 3px; margin-bottom: 26px; background: var(--nmf-accent); }
.nmf .nmf-pull p { margin: 0; font-family: var(--nmf-serif); font-size: clamp(28px, 3.1vw, 40px); font-style: italic; line-height: 1.28; }

/* ---------- Sidebar box: text beside one photo ---------- */
.nmf .nmf-box { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; max-width: 1120px; margin: 80px auto; padding: 48px 56px 40px; background: var(--nmf-tint); }
.nmf .nmf-box--dark { background: var(--nmf-ink-deep); color: #fff; }
.nmf :is(.nmf-box, .nmf-box > .wp-block-group__inner-container) > * { grid-column: 1; }
.nmf :is(.nmf-box, .nmf-box > .wp-block-group__inner-container) > :is(.wp-block-image, .nmf-photos) { grid-column: 2; grid-row: 1 / span 20; }
.nmf .nmf-box h3 { margin: 0 0 20px; font-size: clamp(28px, 2.8vw, 36px); font-weight: 400; line-height: 1.15; }
.nmf .nmf-box p { font-size: 18px; line-height: 1.6; }
.nmf .nmf-box--dark .wp-block-image figcaption { color: var(--nmf-muted-on-dark); }
.nmf .nmf-box--dark a { color: var(--nmf-accent-on-dark); }

/* ---------- Photo row: several photos side by side, each at its own shape ---------- */
.nmf .nmf-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px 28px; align-items: start; max-width: 1280px; margin: 0 auto; padding: 24px 40px 72px; }
.nmf :is(.nmf-box, .nmf-fav, .nmf-chapter__media) .nmf-photos { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; }

/* ---------- Ads ---------- */
.nmf .nmf-ad { margin: 0; padding: 28px 20px 40px; border-top: 1px solid var(--nmf-rule); border-bottom: 1px solid var(--nmf-rule); text-align: center; }
.nmf .nmf-ad__label { margin: 0 0 12px; font-family: var(--nmf-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--nmf-muted); }
.nmf .nmf-ad .ad { display: inline-block; min-width: 250px; min-height: 250px; max-width: 100%; overflow: hidden; }
.nmf > .nmf-ad:last-child { border-bottom: 0; } /* the story's final ad sits on the comments */
.nmf .nmf-ad--wide .ad { display: block; width: 100%; max-width: 728px; min-height: 90px; margin: 0 auto; }
.nmf .nmf-ad__placeholder { display: flex; align-items: center; justify-content: center; min-height: inherit; height: 100%; border: 1px dashed var(--nmf-rule); font-family: var(--nmf-sans); font-size: 13px; color: var(--nmf-muted); }
.nmf .nmf-ad--square .nmf-ad__placeholder { width: 250px; height: 250px; }
.nmf .nmf-ad--wide .nmf-ad__placeholder { height: 90px; }

/* ---------- Comments under a feature ---------- */
.nmf-comments { max-width: 680px; margin: 0 auto; padding: 0 24px 96px; }

/* ---------- Motion (feature.js adds .nmf-motion unless the reader prefers reduced motion) ---------- */
.nmf-motion .nmf .nmf-reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s ease; }
.nmf-motion .nmf .nmf-reveal.is-in { opacity: 1; transform: none; }
.nmf-motion .nmf .route-map .map-leg { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.nmf-motion .nmf .route-map .map-city,
.nmf-motion .nmf .route-map .map-leg-label { opacity: 0; transition: opacity .6s ease; }
.nmf-motion .nmf .route-map.is-drawn .map-leg { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.65, 0, .25, 1); }
.nmf-motion .nmf .route-map.is-drawn .map-leg--2 { transition-delay: 1.35s; transition-duration: 1.1s; }
.nmf-motion .nmf .route-map.is-drawn .map-city,
.nmf-motion .nmf .route-map.is-drawn .map-leg-label { opacity: 1; }
.nmf-motion .nmf .route-map.is-drawn .map-city:nth-of-type(2) { transition-delay: 1.2s; }
.nmf-motion .nmf .route-map.is-drawn .map-city:nth-of-type(3) { transition-delay: 2.35s; }
.nmf-motion .nmf .route-map.is-drawn .map-leg-label--1 { transition-delay: .7s; }
.nmf-motion .nmf .route-map.is-drawn .map-leg-label--2 { transition-delay: 1.9s; }
@media print {
  .nmf-motion .nmf .nmf-reveal, .nmf-motion .nmf .route-map * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}

/* ---------- Tablet and phone ---------- */
@media (max-width: 960px) {
  .nmf .nmf-hero .wp-block-columns { grid-template-columns: minmax(0, 1fr); }
  .nmf .nmf-hero__text { justify-self: stretch; max-width: none; padding: 40px 20px 36px; }
  .nmf .nmf-hero .wp-block-image img { max-height: calc(100svh - var(--nmf-hdr)); object-position: center top; }
  .nmf .nmf-hero .wp-block-image figcaption { padding: 12px 20px 28px; text-align: left; }
  .nmf .nmf-narrow { padding: 64px 20px 48px; }
  .nmf .nmf-narrow:last-child { padding-bottom: 96px; }
  .nmf .nmf-chapter { padding: 64px 20px 56px; }
  .nmf .nmf-chapter .wp-block-columns,
  .nmf .nmf-chapter--flip .wp-block-columns { grid-template-columns: minmax(0, 1fr); }
  .nmf .nmf-chapter__media { position: static; order: -1; margin: 0 -20px 40px; }
  .nmf .nmf-chapter__media .wp-block-image img,
  .nmf .nmf-chapter--flip .nmf-chapter__media .wp-block-image img { max-height: calc(100svh - var(--nmf-hdr) - 60px); object-position: center top; }
  .nmf .nmf-chapter__media .wp-block-image figcaption,
  .nmf .nmf-chapter--flip .nmf-chapter__media .wp-block-image figcaption { max-width: none; margin-left: 0; padding: 0 20px; text-align: left; }
  .nmf .nmf-chapter h2 { margin-bottom: 28px; }
  .nmf .nmf-chapter__aside { position: static; }
  .nmf .nmf-favorites { padding: 64px 20px 48px; }
  .nmf .nmf-fav { display: block; }
  .nmf .nmf-fav .wp-block-image { margin-top: 24px; }
  .nmf .wp-block-pullquote.nmf-pull { margin: 44px 0; }
  .nmf .nmf-hero--wide .wp-block-image img { max-height: none; }
  .nmf .nmf-hero--wide .wp-block-image figcaption { padding: 12px 20px 0; }
  .nmf .nmf-hero--wide .nmf-hero__text { padding: 32px 20px 48px; }
  .nmf .nmf-chapter--compact { padding-top: 48px; padding-bottom: 40px; }
  .nmf .nmf-facts { padding: 22px 20px 18px; }
  .nmf .nmf-box { display: block; margin: 56px 20px; padding: 32px 22px 28px; }
  .nmf .nmf-box .wp-block-image, .nmf .nmf-box .nmf-photos { margin-top: 24px; }
  .nmf .nmf-photos { padding: 16px 20px 48px; }
}
@media (max-width: 700px) {
  .nmf p { font-size: 19px; }
  .nmf .nmf-route { padding: 8px 0; }
  .nmf .route-map--wide { display: none; }
  .nmf .route-map--narrow { display: block; }
  .nmf .route-map--narrow .map-city-name { font-size: 40px; }
  .nmf .route-map--narrow .map-city-stay,
  .nmf .route-map--narrow .map-leg-label,
  .nmf .route-map--narrow .map-river-label { font-size: 23px; }
  .nmf .route-map--narrow .map-leg { stroke-width: 4.5; }
  .nmf .route-map--narrow .map-dot { r: 9; }
}