/* ==========================================================================
   theme.css — the magazine's brand, layered on top of Bootstrap 5.3.

   Load order on every page:  bootstrap.min.css  →  theme.css

   This file only (1) overrides Bootstrap's own CSS variables and (2) adds
   the few things Bootstrap doesn't have. Everything else — grid, navbar,
   cards, buttons, forms, spacing, utilities — is stock Bootstrap.
   Dark mode uses Bootstrap's own data-bs-theme="dark".
   ========================================================================== */

/* ---- 1. Brand variables ------------------------------------------------ */

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/assets/fonts/material-symbols-outlined-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
/* Material Symbols: only the icons search, play_arrow and swap_horiz, fixed at
   FILL 0, wght 400, GRAD 0, opsz 24. To add an icon, rebuild the subset (DESIGN.md). */

/* Fonts: hosted here, limited to what the site uses (latin, Archivo wght 400-800
   and wdth 68-100, DM Serif Display regular). Files in /assets/fonts/. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth-wght.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 68% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/assets/fonts/dm-serif-display-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-bs-theme="light"] {
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-serif-display: "DM Serif Display", Georgia, "Times New Roman", serif;

  /* White paper, wet-bark ink. Body text uses system fonts (see DESIGN.md) */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #1f2a24;
  --bs-body-color-rgb: 31, 42, 36;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #1f2a24;
  --bs-emphasis-color-rgb: 31, 42, 36;
  --bs-secondary-color: #4f5c60;       /* muted text, 5.9:1 on paper */
  --bs-secondary-color-rgb: 79, 92, 96;
  --bs-secondary-bg: #f3f4f1;
  --bs-secondary-bg-rgb: 243, 244, 241;
  --bs-tertiary-bg: #f3f4f1;           /* very light gray: bands and sunken areas, page stays white */
  --bs-tertiary-bg-rgb: 243, 244, 241;
  --bs-border-color: #b8c0bb;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;

  /* Flagging-tape pink = primary, moss = secondary */
  --bs-primary: #d4205f;
  --bs-primary-rgb: 212, 32, 95;
  --bs-secondary: #3f5e3a;
  --bs-secondary-rgb: 63, 94, 58;
  --bs-dark: #1f2a24;
  --bs-dark-rgb: 31, 42, 36;

  /* Links use the deeper pink, which passes contrast for small text */
  --bs-link-color: #a8114a;
  --bs-link-color-rgb: 168, 17, 74;
  --bs-link-hover-color: #7d0c37;
  --bs-link-hover-color-rgb: 125, 12, 55;
}

[data-bs-theme="dark"] {
  --bs-body-color: #e6eae1;
  --bs-body-color-rgb: 230, 234, 225;
  --bs-body-bg: #141a16;
  --bs-body-bg-rgb: 20, 26, 22;
  --bs-emphasis-color: #e6eae1;
  --bs-emphasis-color-rgb: 230, 234, 225;
  --bs-secondary-color: #a3afa7;
  --bs-secondary-color-rgb: 163, 175, 167;
  --bs-secondary-bg: #1c2520;
  --bs-secondary-bg-rgb: 28, 37, 32;
  --bs-tertiary-bg: #1c2520;
  --bs-tertiary-bg-rgb: 28, 37, 32;
  --bs-border-color: #34423a;

  --bs-secondary: #96bd8c;
  --bs-secondary-rgb: 150, 189, 140;
  --bs-link-color: #ff7aa3;
  --bs-link-color-rgb: 255, 122, 163;
  --bs-link-hover-color: #ffa3c0;
  --bs-link-hover-color-rgb: 255, 163, 192;
}

/* ---- 2. Typography ----------------------------------------------------- */
/* Headlines: condensed Archivo. UI text: normal-width Archivo. Reading
   text: Newsreader (the body font above). Sentence case, never all caps.  */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--font-display);
  font-stretch: 68%;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1, .h1 { font-size: clamp(2.75rem, 1.8rem + 4.2vw, 5rem); line-height: 0.95; }
h2, .h2 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); }
h3, .h3 { font-size: 2rem; }
h4, .h4 { font-size: 1.5rem; }
.display-1 { font-size: clamp(2.75rem, 1.1rem + 5.6vw, 5.75rem); }

/* Big headlines (page title, landing hero, article title) use DM Serif Display */
h1, .h1, .display-1 {
  font-family: var(--font-serif-display);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* DM Serif Display on any heading that should look like the logo type */
.font-serif-display {
  font-family: var(--font-serif-display);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

p { text-wrap: pretty; }

/* UI text (labels, meta, captions, nav) uses the normal-width Archivo */
.font-ui,
.navbar,
.btn,
.form-label,
.form-control,
.figure-caption,
.small-meta {
  font-family: var(--font-display);
  font-stretch: 100%;
}

.small-meta {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.measure { max-width: 66ch; }

/* ---- 3. Bootstrap components, restyled via their own variables ---------- */

/* Strong 2px rule in the body-text color (works in light and dark) */
.border-strong { border-color: var(--bs-body-color) !important; }

/* Navbar */
.navbar {
  --bs-navbar-color: var(--bs-body-color);
  --bs-navbar-hover-color: var(--bs-link-color);
  --bs-navbar-active-color: var(--bs-body-color);
  --bs-navbar-brand-color: var(--bs-body-color);
  --bs-navbar-brand-hover-color: var(--bs-link-color);
  --bs-navbar-brand-font-size: 2rem;
  --bs-navbar-toggler-border-color: var(--bs-body-color);
  --bs-navbar-toggler-border-radius: 0;
}

.navbar-brand { line-height: 1; }

.navbar .nav-link {
  font-weight: 600;
  border-bottom: 2px solid transparent;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  border-bottom-color: var(--bs-primary);
}

/* Buttons: square, 2px border, bold UI font.
   One control height for every button, button group, form field and the
   navbar toggler, so they always line up (change --control-height only). */
:root { --control-height: 2.75rem; }

.btn {
  --bs-btn-font-weight: 700;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 0;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  line-height: 1;
  white-space: nowrap;
}

/* Small variants keep the same height; only the side padding is tighter */
.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0;
}

.btn-group > .btn { padding-left: 1rem; padding-right: 1rem; }

.navbar-toggler {
  height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d4205f;
  --bs-btn-border-color: #d4205f;
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-focus-shadow-rgb: 212, 32, 95;
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
  --bs-btn-disabled-bg: #d4205f;
  --bs-btn-disabled-border-color: #d4205f;
}

/* The ghost button. Overridden so it adapts to light and dark mode. */
.btn-outline-dark {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-body-color);
  --bs-btn-hover-color: var(--bs-body-bg);
  --bs-btn-hover-bg: var(--bs-body-color);
  --bs-btn-hover-border-color: var(--bs-body-color);
  --bs-btn-focus-shadow-rgb: var(--bs-body-color-rgb);
  --bs-btn-active-color: var(--bs-body-bg);
  --bs-btn-active-bg: var(--bs-body-color);
  --bs-btn-active-border-color: var(--bs-body-color);
}

/* Icon-only button (Google Material Symbols). Square, same height as every control. */
.btn-icon { width: var(--control-height); padding: 0; }
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
}

/* Search: the magnifier button opens a text box that grows to its left.
   No animation (DESIGN.md: motion is rare). */
.search-form { display: flex; align-items: center; }
.search-input { display: none; width: 16rem; max-width: calc(100vw - 9rem); margin-right: -2px; }
.search-form.is-open .search-input { display: block; }
/* No pink glow around the search box when it opens; its 2px dark border stays. */
.search-form .search-input:focus { box-shadow: none; outline: none; }

/* Forms */
.form-label {
  font-size: 0.875rem;
  font-weight: 700;
}

.form-control {
  height: var(--control-height);
  padding-top: 0;
  padding-bottom: 0;
  border: 2px solid var(--bs-body-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

.form-control:focus {
  border-color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.35);
}

.form-control::placeholder { color: var(--bs-secondary-color); }

/* Cards are the story cards: no border, no background, image then text */
.card {
  --bs-card-border-width: 0;
  --bs-card-bg: transparent;
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 2px;
  --bs-card-color: var(--bs-body-color);
}

.card-img-top { border-radius: 2px; }
.card-body { padding: 1rem 0 0; }

/* Card title links stay plain until hover */
.card-title a,
.story-title a {
  color: var(--bs-body-color);
  text-decoration: none;
}

.card:hover .card-title a,
.story-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--bs-primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

/* Featured article titles (home hero, section featured): never underlined,
   not even on hover */
.story-link,
.story-link:hover,
.story-title a.story-link,
.story-title a.story-link:hover {
  color: var(--bs-body-color);
  text-decoration: none;
}

/* ---- 4. Magazine-only additions ----------------------------------------- */

/* Tape: the signature element. A strip of flagging tape with a diagonal cut.
   Marks every section name and category. Works on h2, span or a.          */
.tape {
  display: inline-block;
  width: fit-content;
  justify-self: start;
  margin: 0;
  padding: 0.5rem 1.5rem 0.5rem 0.75rem;
  background: var(--bs-primary);
  color: #fff;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%);
}

.tape-secondary {
  background: var(--bs-secondary);
  color: #fff;
}

[data-bs-theme="dark"] .tape-secondary { color: #141a16; }

/* Image placeholder. Replace with a real <img class="object-fit-cover"> */
.ph {
  border-radius: 2px;
  background-color: #3f5e3a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'%3E%3Cpath d='M0 200V128l38-30 30 22 52-60 40 40 36-26 46 52 28-20 30 28v66z' fill='%23000' fill-opacity='.28'/%3E%3Cpath d='M0 200v-48l50-18 44 24 60-34 56 30 48-22 42 20v48z' fill='%23000' fill-opacity='.28'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #3f5e3a, #1f2a24);
  background-size: 100% 100%;
}

/* Containers are 10% narrower than Bootstrap's from the lg breakpoint up, so
   cards, images and text blocks read slightly smaller. Navbar, hero and
   sections all share these widths, so their edges stay aligned.            */
@media (min-width: 992px)  { .container { max-width: 864px; } }
@media (min-width: 1200px) { .container { max-width: 1026px; } }
@media (min-width: 1400px) { .container { max-width: 1188px; } }

/* Logo: contour-line symbol + RELIEVE in the Ducados typeface, both as SVG
   outlines. It takes the text color, so it works on light and dark.        */
.wordmark { display: block; height: 2.25rem; width: auto; fill: currentColor; }
.wordmark-lg { height: 3.5rem; }

/* Phones and tablets: a slimmer logo keeps the top bar short so the content
   stays the focus. */
@media (max-width: 991.98px) { .navbar .wordmark { height: 1.75rem; } }

/* Full-bleed photos on phones: story photos inside a container run edge to edge
   (the container side padding is 0.75rem); text keeps its margins. */
@media (max-width: 767.98px) {
  main .container .ratio:is(.ph, :has(> img)) {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    border-radius: 0;
  }
}

/* Extra aspect ratios for Bootstrap's .ratio helper */
.ratio-3x2 { --bs-aspect-ratio: 66.6667%; }
.ratio-2x1 { --bs-aspect-ratio: 50%; }

/* Text laid over a photo. The soft dark fade at the top keeps white text
   readable on any picture. */
.hero-overlay {
  padding: 2rem 0 5rem;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}

/* Pull quote for articles (use on <blockquote class="blockquote pullquote">) */
.pullquote {
  max-width: 22ch;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-stretch: 68%;
  font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
  font-weight: 800;
  line-height: 0.98;
  text-wrap: balance;
}

/* ---- 5. Bilingual switching --------------------------------------------
   Every translatable string is written twice: lang="es" and lang="en".   */

html[data-lang="es"] body [lang="en"],
html[data-lang="en"] body [lang="es"] {
  display: none !important;
}

/* ---- 6. Article page ----------------------------------------------------
   Hero, swipeable panoramas and the reading flow. See DESIGN.md, "Article
   page". Motion is none: scrolling and playing the video are the reader's. */

/* Hero: always the photo, always full bleed. 4:3 on phones, 16:9 from 768px
   up (capped at 85% of the screen height on very large screens; the sides
   crop). The title sits over the photo from 992px up and under it below. */
.article-hero { display: grid; grid-template-columns: minmax(0, 1fr); }

.hero-frame {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bs-tertiary-bg);
}

@media (min-width: 768px) {
  .hero-frame { aspect-ratio: 16 / 9; max-height: 85vh; }
}

/* While the video plays the frame is always 16:9, the player's own shape */
.hero-frame.is-playing { aspect-ratio: 16 / 9; }

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Small "click to watch video" control, bottom right of the photo */
.hero-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding-bottom: 1rem;
}

.hero-credit { grid-row: 2; grid-column: 1; }

.hero-text { grid-row: 3; grid-column: 1; padding: 1.5rem 0 0; }

.hero-title { font-size: clamp(2.5rem, 1rem + 3.5vw, 4.75rem); }

@media (min-width: 992px) {
  .hero-controls { padding-bottom: 2.5rem; }

  .hero-text {
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: 1;
    padding: 6rem 0 2.5rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
    pointer-events: none;
  }

  .hero-title { max-width: 20ch; }
  .article-hero.is-playing .hero-text { display: none; }
}

/* Panorama: full bleed with a limited height. The photo fills the height and
   what does not fit in the width is reached by swiping sideways. */
.pano { position: relative; }

.pano { --pano-limit: clamp(15rem, 50vh, 34rem); }
.pano-tall { --pano-limit: clamp(20rem, 65vh, 44rem); }

/* Height: the limit above, or taller when the photo needs it. site.js sets
   --pano-min (screen width divided by the photo's proportion) so the photo is
   never cropped at the bottom: its whole height always shows. */
.pano-scroll {
  height: max(var(--pano-limit), var(--pano-min, 0px));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* hidden: the "Desliza para ver más" hint and the drag cursor guide the reader */
  cursor: grab;
}
.pano-scroll::-webkit-scrollbar { display: none; }

/* Whole panorama: full bleed, natural proportions, no sliding ({% pano "id", "completa" %}) */
.pano-full-frame .pano-img { height: auto; width: 100%; min-width: 0; }

.pano-scroll.is-dragging { cursor: grabbing; user-select: none; }
.pano-scroll:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }

.pano-img {
  display: block;
  height: 100%;
  width: auto;
  min-width: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
}

/* "Swipe to see more" hint: only when the photo is wider than the screen,
   and gone after the first swipe, drag, wheel or key press. */
.pano-hint {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  background: var(--bs-body-color);
  color: var(--bs-body-bg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}

.pano.has-overflow:not(.is-touched) .pano-hint { display: inline-flex; }

/* Reading flow. The text sits in a 46rem column (about 66 characters); wide photos, panoramas and
   pull quotes break out of it (shortcodes in eleventy.config.js). */
.article-body { font-size: 1.125rem; }

.article-body > :is(p, h2, h3, ul, ol, .article-column) {
  width: min(46rem, 100% - 1.5rem); /* ~66 characters of body text; in rem so headings line up with it */
  margin-inline: auto;
}

.article-body > .article-column { display: block; }

/* Photo credits and sources at the end: same column as the text */
.article-end { width: min(46rem, 100% - 1.5rem); margin-inline: auto; }

/* Phones: every photo in an article runs edge to edge. The reading column keeps
   0.75rem of margin on each side, so the photo cancels it. Captions keep it. */
@media (max-width: 767.98px) {
  .article-body > .article-column .ratio {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
}
.article-body > p { margin-bottom: 1.25rem; }

.article-body > h2 {
  margin-top: 3.5rem;
  margin-bottom: 1rem;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem);
}