/*
 * gagnezdutemps — editorial.css
 * Layout, grilles, hero, cards, citations, newsletter, print.
 * Mobile-first. Compatible Safari 15.4+.
 */

/* ---------------------------------------------------------------------------
 * 1. Variables locales (alias des tokens theme.json)
 * ------------------------------------------------------------------------- */
:root {
  --gdt-ink: var(--wp--preset--color--ink);
  --gdt-paper: var(--wp--preset--color--paper);
  --gdt-muted: var(--wp--preset--color--muted);
  --gdt-amber: var(--wp--preset--color--amber);
  --gdt-surface: var(--wp--preset--color--surface);
  --gdt-line: var(--wp--preset--color--line);

  --gdt-fr: var(--wp--preset--font-family--fraunces);
  --gdt-in: var(--wp--preset--font-family--inter);

  --gdt-xs: var(--wp--preset--spacing--xs);
  --gdt-sm: var(--wp--preset--spacing--sm);
  --gdt-md: var(--wp--preset--spacing--md);
  --gdt-lg: var(--wp--preset--spacing--lg);
  --gdt-xl: var(--wp--preset--spacing--xl);
  --gdt-2xl: var(--wp--preset--spacing--2xl);
  --gdt-3xl: var(--wp--preset--spacing--3xl);
  --gdt-4xl: var(--wp--preset--spacing--4xl);
  --gdt-5xl: var(--wp--preset--spacing--5xl);
  --gdt-6xl: var(--wp--preset--spacing--6xl);

  --gdt-content: 720px;
  --gdt-wide: 1200px;
}

/* ---------------------------------------------------------------------------
 * 2. Reset doux
 * ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease;
}

a:hover {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gdt-amber);
}

::selection {
  background: var(--gdt-amber);
  color: var(--gdt-ink);
}

/* ---------------------------------------------------------------------------
 * 3. Hero accueil
 * ------------------------------------------------------------------------- */
.gdt-hero {
  padding-block: var(--gdt-4xl) var(--gdt-3xl);
  max-width: var(--gdt-wide);
  margin-inline: auto;
}

.gdt-hero__title {
  font-family: var(--gdt-fr);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-size: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
  color: var(--gdt-ink);
  margin: 0 0 var(--gdt-lg);
  max-width: 18ch;
}

.gdt-hero__subtitle {
  font-family: var(--gdt-in);
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--gdt-muted);
  max-width: 52ch;
  margin: 0;
}

.gdt-hero__accent {
  color: var(--gdt-amber);
  font-style: italic;
}

@media (min-width: 1024px) {
  .gdt-hero {
    padding-block: var(--gdt-5xl) var(--gdt-4xl);
  }
}

/* ---------------------------------------------------------------------------
 * 4. Grille de cards (home, archives)
 * ------------------------------------------------------------------------- */
.gdt-cards {
  display: grid;
  gap: var(--gdt-xl);
  max-width: var(--gdt-wide);
  margin-inline: auto;
  padding-block: var(--gdt-2xl);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .gdt-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gdt-2xl);
  }
}

@media (min-width: 1024px) {
  .gdt-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gdt-2xl) var(--gdt-xl);
  }
}

.gdt-card {
  display: flex;
  flex-direction: column;
  gap: var(--gdt-md);
  padding-block: var(--gdt-md);
  border-top: 1px solid var(--gdt-line);
}

.gdt-card__cover {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gdt-surface);
}

.gdt-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gdt-card:hover .gdt-card__cover img {
  transform: scale(1.03);
}

.gdt-card__kicker {
  font-family: var(--gdt-in);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gdt-amber);
}

.gdt-card__title {
  font-family: var(--gdt-fr);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--gdt-ink);
  margin: 0;
}

.gdt-card__title a {
  color: inherit;
  text-decoration: none;
}

.gdt-card__title a:hover {
  color: var(--gdt-amber);
}

.gdt-card__excerpt {
  font-family: var(--gdt-in);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gdt-muted);
  margin: 0;
}

.gdt-card__meta {
  display: flex;
  gap: var(--gdt-md);
  font-family: var(--gdt-in);
  font-size: 0.8125rem;
  color: var(--gdt-muted);
  margin-top: auto;
}

.gdt-card__meta time::before {
  content: "·";
  margin-right: var(--gdt-md);
}

.gdt-card__meta time:first-child::before {
  content: "";
  margin-right: 0;
}

/* ---------------------------------------------------------------------------
 * 5. Layout single article (asymetrique)
 * ------------------------------------------------------------------------- */
.gdt-single {
  max-width: var(--gdt-wide);
  margin-inline: auto;
  padding-block: var(--gdt-2xl);
  display: grid;
  gap: var(--gdt-xl);
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "toc"
    "content"
    "meta";
}

.gdt-single__header { grid-area: header; }
.gdt-single__toc    { grid-area: toc; }
.gdt-single__content{ grid-area: content; }
.gdt-single__meta   { grid-area: meta; }

/* Tablette : pile + TOC pliable */
@media (min-width: 768px) {
  .gdt-single {
    gap: var(--gdt-2xl);
    padding-block: var(--gdt-3xl);
  }

  .gdt-single__toc[open],
  .gdt-single__toc {
    background: var(--gdt-surface);
    padding: var(--gdt-lg);
  }
}

/* Desktop : 3 colonnes asymetriques */
@media (min-width: 1024px) {
  .gdt-single {
    grid-template-columns: 240px minmax(0, 720px) 200px;
    grid-template-areas:
      "header header header"
      "toc content meta"
      ".    content meta";
    gap: var(--gdt-3xl);
    align-items: start;
    justify-content: center;
  }

  .gdt-single__toc {
    position: sticky;
    top: var(--gdt-xl);
    max-height: calc(100vh - var(--gdt-xl) * 2);
    overflow-y: auto;
    padding: 0;
    background: transparent;
  }

  .gdt-single__meta {
    position: sticky;
    top: var(--gdt-xl);
    font-size: 0.875rem;
  }
}

/* ---------------------------------------------------------------------------
 * 6. Article header
 * ------------------------------------------------------------------------- */
.gdt-article-header {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
  padding-block: var(--gdt-2xl) var(--gdt-xl);
  border-bottom: 1px solid var(--gdt-line);
}

.gdt-article-header__kicker {
  font-family: var(--gdt-in);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gdt-amber);
  margin-bottom: var(--gdt-md);
}

.gdt-article-header__title {
  font-family: var(--gdt-fr);
  font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gdt-ink);
  margin: 0 0 var(--gdt-lg);
}

.gdt-article-header__lede {
  font-family: var(--gdt-fr);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.55;
  color: var(--gdt-muted);
  margin: 0;
}

.gdt-article-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gdt-md);
  font-family: var(--gdt-in);
  font-size: 0.875rem;
  color: var(--gdt-muted);
  margin-top: var(--gdt-lg);
}

/* ---------------------------------------------------------------------------
 * 7. Pull-quote (grand, italique serif)
 * ------------------------------------------------------------------------- */
.wp-block-pullquote,
.gdt-pullquote {
  font-family: var(--gdt-fr);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  line-height: 1.3;
  color: var(--gdt-muted);
  text-align: center;
  margin-block: var(--gdt-3xl);
  padding-block: var(--gdt-2xl);
  border-top: 1px solid var(--gdt-line);
  border-bottom: 1px solid var(--gdt-line);
  position: relative;
}

.wp-block-pullquote::before,
.gdt-pullquote::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--gdt-amber);
  margin: 0 auto var(--gdt-lg);
}

.wp-block-pullquote cite,
.gdt-pullquote cite {
  display: block;
  font-style: normal;
  font-family: var(--gdt-in);
  font-size: 0.875rem;
  color: var(--gdt-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: var(--gdt-md);
}

/* ---------------------------------------------------------------------------
 * 8. Citations standard (border-left amber)
 * ------------------------------------------------------------------------- */
.wp-block-quote,
blockquote {
  font-family: var(--gdt-fr);
  font-style: italic;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  line-height: 1.5;
  color: var(--gdt-ink);
  border-left: 3px solid var(--gdt-amber);
  padding-left: var(--gdt-xl);
  padding-block: var(--gdt-md);
  margin-inline: 0;
  margin-block: var(--gdt-xl);
}

.wp-block-quote cite,
blockquote cite {
  display: block;
  font-family: var(--gdt-in);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--gdt-muted);
  margin-top: var(--gdt-md);
}

/* ---------------------------------------------------------------------------
 * 9. Newsletter inline
 * ------------------------------------------------------------------------- */
.gdt-newsletter {
  background: var(--gdt-surface);
  padding: var(--gdt-2xl) var(--gdt-xl);
  margin-block: var(--gdt-3xl);
  max-width: var(--gdt-wide);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .gdt-newsletter {
    padding: var(--gdt-3xl) var(--gdt-3xl);
  }
}

.gdt-newsletter__title {
  font-family: var(--gdt-fr);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--gdt-ink);
  margin: 0 0 var(--gdt-md);
  max-width: 28ch;
}

.gdt-newsletter__lead {
  font-family: var(--gdt-in);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gdt-muted);
  margin: 0 0 var(--gdt-xl);
  max-width: 50ch;
}

.gdt-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--gdt-md);
  max-width: 480px;
}

@media (min-width: 540px) {
  .gdt-newsletter__form {
    flex-direction: row;
  }
}

.gdt-newsletter__input {
  flex: 1;
  font-family: var(--gdt-in);
  font-size: 1rem;
  padding: var(--gdt-md) var(--gdt-lg);
  background: var(--gdt-paper);
  color: var(--gdt-ink);
  border: 1px solid var(--gdt-line);
  border-radius: 0;
}

.gdt-newsletter__input:focus {
  outline: 2px solid var(--gdt-amber);
  outline-offset: 0;
  border-color: var(--gdt-amber);
}

.gdt-newsletter__submit {
  font-family: var(--gdt-in);
  font-weight: 500;
  font-size: 1rem;
  padding: var(--gdt-md) var(--gdt-xl);
  background: var(--gdt-amber);
  color: var(--gdt-ink);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gdt-newsletter__submit:hover,
.gdt-newsletter__submit:focus {
  background: var(--gdt-ink);
  color: var(--gdt-paper);
}

/* ---------------------------------------------------------------------------
 * 10. Pattern asymetrique : decalage subtle d'images
 * ------------------------------------------------------------------------- */
.gdt-single__content .wp-block-image.alignwide {
  margin-block: var(--gdt-2xl);
}

@media (min-width: 1280px) {
  .gdt-single__content .wp-block-image.alignwide {
    margin-inline: calc(var(--gdt-3xl) * -1);
  }

  /* Decalage limite, alterne via :nth-of-type pour rythme editorial */
  .gdt-single__content > .wp-block-image:not(.alignwide):not(.alignfull):nth-of-type(odd) {
    margin-left: calc(var(--gdt-xl) * -0.5);
  }

  .gdt-single__content > .wp-block-image:not(.alignwide):not(.alignfull):nth-of-type(even) {
    margin-right: calc(var(--gdt-xl) * -0.5);
  }
}

/* ---------------------------------------------------------------------------
 * 11. Caption italique muted
 * ------------------------------------------------------------------------- */
.wp-block-image figcaption,
figcaption {
  font-family: var(--gdt-in);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--gdt-muted);
  text-align: left;
  margin-top: var(--gdt-md);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * 12. Header / Footer site
 * ------------------------------------------------------------------------- */
.gdt-site-header {
  padding-block: var(--gdt-lg);
  border-bottom: 1px solid var(--gdt-line);
}

.gdt-site-footer {
  padding-block: var(--gdt-3xl) var(--gdt-2xl);
  margin-top: var(--gdt-4xl);
  border-top: 1px solid var(--gdt-line);
  font-family: var(--gdt-in);
  font-size: 0.875rem;
  color: var(--gdt-muted);
}

/* ---------------------------------------------------------------------------
 * 13. Focus visible global
 * ------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gdt-amber);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 14. Reduced motion
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * 15. Container queries (cards qui s'adaptent au conteneur)
 * ------------------------------------------------------------------------- */
@supports (container-type: inline-size) {
  .gdt-cards {
    container-type: inline-size;
  }

  @container (min-width: 720px) {
    .gdt-card__title {
      font-size: 1.375rem;
    }
  }
}

/* ---------------------------------------------------------------------------
 * 16. :has() — espacements adaptatifs
 * ------------------------------------------------------------------------- */
@supports selector(:has(*)) {
  .gdt-single__content:has(> .gdt-tldr:first-child) {
    padding-top: 0;
  }

  .wp-block-image:has(figcaption) {
    margin-bottom: var(--gdt-xl);
  }
}

/* ---------------------------------------------------------------------------
 * 17. Print styles
 * ------------------------------------------------------------------------- */
@media print {
  :root {
    --gdt-ink: #000;
    --gdt-paper: #fff;
    --gdt-muted: #444;
    --gdt-amber: #000;
    --gdt-surface: #f4f4f4;
    --gdt-line: #ccc;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
  }

  .gdt-site-header,
  .gdt-site-footer,
  .gdt-newsletter,
  .gdt-single__toc,
  .gdt-single__meta,
  nav,
  .wp-block-navigation,
  .gdt-progress {
    display: none !important;
  }

  .gdt-single {
    display: block;
    max-width: none;
    padding: 0;
  }

  .gdt-single__content {
    max-width: none;
  }

  .gdt-article-header__title {
    font-size: 24pt;
    page-break-after: avoid;
  }

  h2, h3, h4 {
    page-break-after: avoid;
  }

  p, blockquote, figure {
    page-break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  @page {
    margin: 2cm;
    size: A4;
  }
}