/* ============================================
   L'EXPRESS-STYLE NEWSPAPER GRID - CRITICAL FIX
   Overrides all base CSS with proper newspaper layout
   Uses high specificity + !important to win CSS cascade
   ============================================ */

/* --- CRITICAL BASE FIXES (apply to ALL screen sizes) --- */

/* Fix the microscopic design tokens at the source */
:root {
  --paper: #f4efe4 !important;
  --paper-warm: #f0ebe0 !important;
  --ink: #0d0d0d !important;
  --ink-body: #1a1a18 !important;
  --ink-light: #333 !important;
  --ink-dim: #666 !important;
  --ink-faint: #999 !important;
  --rule: #c8c2b6 !important;
  --red: #c0392b !important;
}

/* --- PAPER CONTAINER FIXES --- */

main .paper {
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- ROW LAYOUT WITH PROPER GUTTERS --- */

main .paper .row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 32px !important;
  width: 100% !important;
}

/* --- PANEL STYLING FIXES --- */

/* Apply to ALL panel variants with maximum specificity */
main .paper .panel,
main .paper .panel-text,
main .paper .panel-headline,
main .paper .panel-quote,
main .paper .panel-img-inline,
main .paper .panel-img-lebanon,
main .paper .panel-img-lebanon-hero,
main .paper .panel-recipe,
main .paper .panel-tiny,
main .paper .panel-opinion {
  padding: 24px !important;
  border-right: none !important;
  border-bottom: 1px solid var(--ink-dim) !important;
  background: var(--paper) !important;
  box-sizing: border-box !important;
  min-height: 100px !important;
}

/* Remove bottom border from last panel in each row */
main .paper .row .panel:last-child,
main .paper .row .panel-text:last-child,
main .paper .row .panel-headline:last-child,
main .paper .row .panel-quote:last-child {
  border-bottom: none !important;
}

/* --- SMART COLUMN SIZING FIXES --- */

/* Convert flex values to readable widths */
main .paper .row .panel[style*="flex:1"],
main .paper .row .panel-text[style*="flex:1"],
main .paper .row .panel-headline[style*="flex:1"] {
  flex: 1 1 calc(25% - 15px) !important;
  min-width: 280px !important;
  max-width: 380px !important;
}

main .paper .row .panel[style*="flex:2"],
main .paper .row .panel-text[style*="flex:2"] {
  flex: 2 1 calc(50% - 15px) !important;
  min-width: 480px !important;
  max-width: 720px !important;
}

main .paper .row .panel[style*="flex:1.5"],
main .paper .row .panel-text[style*="flex:1.5"] {
  flex: 1.5 1 calc(37.5% - 15px) !important;
  min-width: 380px !important;
  max-width: 540px !important;
}

main .paper .row .panel[style*="flex:1.3"],
main .paper .row .panel-text[style*="flex:1.3"] {
  flex: 1.3 1 calc(32.5% - 15px) !important;
  min-width: 320px !important;
  max-width: 460px !important;
}

/* --- TYPOGRAPHY FIXES (CRITICAL - override microscopic defaults) --- */

/* Body text - MUST BE READABLE */
main .paper .panel p,
main .paper .panel-text p,
main .paper .panel-headline p,
main .paper .twocol p,
main .paper .panel-tiny p,
main .paper .panel-opinion p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}

/* Headlines */
main .paper .med-hl,
main .paper .panel h3,
main .paper .panel-text h3 {
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}

main .paper .big-hl,
main .paper .panel h2,
main .paper .panel-headline h2 {
  font-size: 2rem !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}

/* Labels and tags */
main .paper .panel-tag,
main .paper .mast-sm,
main .paper .mast-sub {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

/* Captions */
main .paper .cap,
main .paper .cap--lead,
main .paper .cap--mini,
main .paper .story-img-caption {
  font-size: 13px !important;
  margin-top: 8px !important;
}

/* --- FEATURED HEADLINE FIXES --- */

main .paper .featured-headline {
  grid-column: span 4 !important;
  width: 100% !important;
  text-align: center !important;
  padding: 48px 0 32px !important;
  border-bottom: 4px solid var(--ink) !important;
  border-top: 4px solid var(--ink) !important;
  background: var(--paper-warm) !important;
  margin-bottom: 0 !important;
}

main .paper .featured-headline__section {
  display: block !important;
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 14px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  color: #c0392b !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  font-variant: all-small-caps !important;
}

main .paper .featured-headline__main {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(3.5rem, 10vw, 6rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin-bottom: 16px !important;
}

main .paper .featured-headline__deck {
  display: block !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: clamp(1.2rem, 3vw, 1.8rem) !important;
  font-style: italic !important;
  color: var(--ink-light) !important;
  line-height: 1.3 !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* --- MASTHEAD FIXES --- */

main .paper .mast {
  padding: 24px 20px !important;
  gap: 40px !important;
  background: var(--ink) !important;
}

main .paper .mast-sub {
  padding: 16px 0 !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
}

/* --- RULES AND DIVIDERS FIXES --- */

main .paper .doublerule {
  height: 16px !important;
  border-width: 4px !important;
  margin: 24px 0 !important;
}

main .paper .thintop {
  height: 1px !important;
  background: var(--rule) !important;
  margin: 16px 0 !important;
}

main .paper .redrule {
  height: 2px !important;
  background: #c0392b !important;
  margin: 16px 0 !important;
}

/* --- IMAGES FIXES --- */

main .paper .story-img--wide {
  max-height: 360px !important;
  width: 100% !important;
  object-fit: cover !important;
}

main .paper .panel img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* --- MOBILE RESPONSIVE FIXES --- */

@media (max-width: 768px) {
  main .paper {
    padding: 0 16px !important;
  }

  main .paper .row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  main .paper .panel,
  main .paper .panel-text,
  main .paper .panel-headline,
  main .paper .panel-quote,
  main .paper .panel-img-inline,
  main .paper .panel-img-lebanon,
  main .paper .panel-recipe,
  main .paper .panel-tiny {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-width: auto !important;
    padding: 20px 24px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ink-dim) !important;
  }

  main .paper .featured-headline {
    padding: 32px 16px 24px !important;
  }

  main .paper .featured-headline__main {
    font-size: clamp(2.5rem, 12vw, 4rem) !important;
  }

  main .paper .featured-headline__deck {
    font-size: 1.1rem !important;
  }

  main .paper .panel p,
  main .paper .panel-text p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* --- LARGE DESKTOP FIXES --- */

@media (min-width: 1600px) {
  main .paper {
    padding: 0 32px !important;
  }

  main .paper .panel,
  main .paper .panel-text,
  main .paper .panel-headline {
    padding: 32px 40px !important;
  }

  main .paper .featured-headline__main {
    font-size: clamp(4.5rem, 12vw, 8rem) !important;
  }

  main .paper .featured-headline__deck {
    font-size: 2rem !important;
  }

  main .paper .panel p,
  main .paper .panel-text p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
}

/* --- UTILITY: FORCE SCROLLBAR FIX --- */

::-webkit-scrollbar {
  width: 12px !important;
}

::-webkit-scrollbar-track {
  background: var(--paper) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--rule) !important;
  border-radius: 6px !important;
}