/*
Theme Name: Karoutza (Twenty Twenty-Two Child)
Theme URI: https://www.karoutza.com
Description: Thème enfant de Twenty Twenty-Two pour Karoutza — la mémoire des lieux. Couleurs et polices pilotées par l'Éditeur de site.
Author: Aegnar
Template: twentytwentytwo
Version: 1.1.7
Requires at least: 6.0
Tested up to: 7.0
License: GNU General Public License v2 or later
Text Domain: twentytwentytwo-child
*/

/* Règle du projet : ce CSS ne référence QUE des variables var(--wp--preset--*)
   (jamais de hex/police en dur) pour rester piloté par Éditeur → Styles. */

/* ===== Fallback layout WP 6.0 ===== */
/* Le type de layout "constrained" n'existe qu'à partir de WP 6.1 : sous 6.0,
   les groupes de section ne contraignent pas leurs enfants. Sur 6.1+ cette
   règle duplique à l'identique le CSS généré par le cœur — sans effet. */
:where(.wp-block-group.alignfull) > :where(:not(.alignwide):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size, 960px);
  margin-left: auto;
  margin-right: auto;
}

/* ===== Utilitaire eyebrow (sur-titre) ===== */
.eyebrow {
  font-family: var(--wp--preset--font-family--system-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--wp--preset--color--primary);
}

/* ===== États de survol (impossibles en theme.json sous WP 6.0) ===== */
.wp-element-button:hover,
.wp-block-button__link:hover {
  background-color: var(--wp--preset--color--primary-dark) !important;
}

/* ===== Placeholders quand aucune image n'est posée ===== */
.karoutza-photo-fallback .wp-block-cover__background {
  background-color: var(--wp--preset--color--line);
}
.karoutza-thumb-fallback {
  background-color: var(--wp--preset--color--line);
  margin-bottom: 20px;
}

/* ===== HERO (image = dernier article Minute d'histoire) ===== */
/* TT2 (parent) étire les covers racine en pleine largeur via
   `.wp-site-blocks > .wp-block-cover { margin: … !important }` : on passe
   au-dessus. Le fond bleu nuit sert de repli sans image à la une. */
.wp-site-blocks .wp-block-cover.karoutza-hero,
.karoutza-hero,
.karoutza-hero-query,
.karoutza-tiles {
  max-width: var(--wp--style--global--content-size, 960px);
  margin-left: auto !important;
  margin-right: auto !important;
}
.karoutza-hero {
  border-radius: 2px;
  background-color: var(--wp--preset--color--foreground);
}

/* Lien « Voir toutes les collections → » */
.karoutza-more-link a {
  font-family: var(--wp--preset--font-family--system-font);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--primary);
  border-bottom: 1px solid var(--wp--preset--color--primary);
  padding-bottom: 4px;
  text-decoration: none;
}
.karoutza-more-link a:hover { color: var(--wp--preset--color--primary-dark); }

/* ===== TUILES COLLECTIONS (accueil) ===== */
.karoutza-tiles .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
/* margin-block-start:0 : neutralise la marge de flux du cœur (`> * + *`)
   qui décale verticalement les items 2+ dans une grille. */
.karoutza-tiles .wp-block-post-template > li,
.karoutza-posts3 .wp-block-post-template > li,
.karoutza-collgrid .wp-block-post-template > li,
.karoutza-expogrid .wp-block-post-template > li {
  width: 100% !important;
  margin-block-start: 0 !important;
}
.karoutza-tile {
  overflow: hidden;
  background-color: var(--wp--preset--color--foreground);
}
.karoutza-tile .wp-block-cover__inner-container { width: 100%; }
.karoutza-tile .wp-block-post-title a { text-decoration: none; }

/* ===== Lien étendu sur les cartes ===== */
/* Toute la carte (image comprise) est cliquable, pas seulement le titre :
   tuiles collections (accueil), cartes séries (accueil), cartes des pages
   Collections et Séries. Débords négatifs volontairement énormes : quel que
   soit l'ancêtre positionné de référence (inner-container ou cover), le
   pseudo-élément dépasse la carte et l'overflow:hidden le clippe pile
   à ses bords. */
.karoutza-expo,
.karoutza-coll-card,
.karoutza-expo-card { overflow: hidden; }
.karoutza-tile .wp-block-post-title a::after,
.karoutza-expo .wp-block-post-title a::after,
.karoutza-coll-card .wp-block-post-title a::after,
.karoutza-expo-card .wp-block-post-title a::after {
  content: "";
  position: absolute;
  top: -2000px;
  right: -2000px;
  bottom: -2000px;
  left: -2000px;
  z-index: 5;
}

/* ===== SECTIONS À FOND ALTERNATIF ===== */
.karoutza-surface.wp-block-group { border-bottom: 1px solid var(--wp--preset--color--line); }

/* ===== SÉRIES (accueil) ===== */
.karoutza-expo { border-radius: 2px; }
.karoutza-expo .wp-block-post-title {
  font-family: var(--wp--preset--font-family--source-serif-pro);
  line-height: 1.08;
}
.karoutza-expo .wp-block-post-title a { text-decoration: none; }
.karoutza-expo .wp-block-post-title a:hover { opacity: .85; }
.karoutza-expo-enter {
  border-bottom: 1px solid var(--wp--preset--color--primary);
  padding-bottom: 4px;
  display: inline-block;
}

/* ===== JOURNAL — grille accueil (3 colonnes) ===== */
.karoutza-posts3 .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.karoutza-posts3 .wp-block-post-featured-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

/* Titres et liens des listes d'articles (bleu foncé, orange au survol) */
.karoutza-journal .wp-block-post-title,
.karoutza-artlist .wp-block-post-title {
  font-family: var(--wp--preset--font-family--source-serif-pro);
  line-height: 1.18;
}
.karoutza-journal .wp-block-post-title a,
.karoutza-artlist .wp-block-post-title a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}
.karoutza-journal .wp-block-post-title a:hover,
.karoutza-artlist .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.karoutza-journal .wp-block-read-more,
.karoutza-artlist .wp-block-read-more {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
}
.karoutza-journal .wp-block-read-more:hover,
.karoutza-artlist .wp-block-read-more:hover { color: var(--wp--preset--color--primary-dark); }
.karoutza-journal .wp-block-post-excerpt__more-text,
.karoutza-journal .wp-block-post-excerpt__more-link,
.karoutza-artlist .wp-block-post-excerpt__more-text,
.karoutza-artlist .wp-block-post-excerpt__more-link,
.karoutza-expo .wp-block-post-excerpt__more-text,
.karoutza-expo .wp-block-post-excerpt__more-link,
.karoutza-card-count .wp-block-post-excerpt__more-text,
.karoutza-card-count .wp-block-post-excerpt__more-link { display: none; }

/* ===== LISTE D'ARTICLES (pages Journal / Minute d'histoire) ===== */
.karoutza-artlist .karoutza-art {
  padding: 34px 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.karoutza-artlist .wp-block-post-featured-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.karoutza-artlist .karoutza-art .karoutza-thumb-fallback { margin-bottom: 0; }

/* ===== GRILLE COLLECTIONS (page) ===== */
.karoutza-collgrid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.karoutza-coll-card { background-color: var(--wp--preset--color--foreground); }
.karoutza-coll-card .wp-block-post-title { font-family: var(--wp--preset--font-family--source-serif-pro); line-height: 1.05; }
.karoutza-coll-card .wp-block-post-title a { text-decoration: none; }

/* ===== GRILLE SÉRIES (page) ===== */
.karoutza-expogrid .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.karoutza-expo-card { background-color: var(--wp--preset--color--foreground); }
.karoutza-expo-card .wp-block-post-title { font-family: var(--wp--preset--font-family--source-serif-pro); line-height: 1.1; }
.karoutza-expo-card .wp-block-post-title a { text-decoration: none; }
.karoutza-card-count p { margin: 0; }

/* ===== MINUTE D'HISTOIRE (accueil + œuvre du mois) ===== */
.karoutza-story-query .wp-block-post-featured-image img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 2px;
}
.karoutza-story-query .wp-block-post-title {
  font-family: var(--wp--preset--font-family--source-serif-pro);
  line-height: 1.12;
}
.karoutza-story-query .wp-block-post-title a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;
}
.karoutza-story-query .wp-block-post-title a:hover { color: var(--wp--preset--color--primary); }
.karoutza-story-query .wp-block-post-excerpt__more-text,
.karoutza-story-query .wp-block-post-excerpt__more-link { display: none; }
.karoutza-sign { color: var(--wp--preset--color--foreground); }

/* ===== PAGINATION ===== */
.wp-block-query-pagination {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--wp--preset--color--muted);
}
.wp-block-query-pagination a { color: var(--wp--preset--color--primary); text-decoration: none; }
.wp-block-query-pagination .current { color: var(--wp--preset--color--foreground); }

/* ===== À PROPOS ===== */
.karoutza-signature { color: var(--wp--preset--color--primary); }

/* ===== NEWSLETTER ===== */
.karoutza-field {
  display: flex;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--wp--preset--color--line);
}
.karoutza-field input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--wp--preset--font-family--system-font);
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
  color: var(--wp--preset--color--foreground);
}
.karoutza-field button {
  border: none;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--system-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  padding: 0 22px;
  cursor: pointer;
}
.karoutza-field button:hover { background: var(--wp--preset--color--primary-dark); }

/* ===== FORMULAIRE CONTACT (visuel) ===== */
.karoutza-contact .row { display: flex; gap: 18px; }
.karoutza-contact .row .fg { flex: 1; }
.karoutza-contact .fg { margin-bottom: 20px; }
.karoutza-contact label {
  display: block;
  font-family: var(--wp--preset--font-family--system-font);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.karoutza-contact input,
.karoutza-contact textarea {
  width: 100%;
  border: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--background);
  font-family: var(--wp--preset--font-family--system-font);
  font-size: 17px;
  padding: 13px 14px;
  color: var(--wp--preset--color--foreground);
  outline: none;
  border-radius: 2px;
}
.karoutza-contact input:focus,
.karoutza-contact textarea:focus { border-color: var(--wp--preset--color--primary); }
.karoutza-contact textarea { min-height: 150px; resize: vertical; }
.karoutza-contact .send {
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--background);
  border: none;
  font-family: var(--wp--preset--font-family--system-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  padding: 15px 32px;
  cursor: pointer;
  border-radius: 2px;
}
.karoutza-contact .send:hover { background: var(--wp--preset--color--primary-dark); }

/* ===== FOOTER (sombre) ===== */
/* Fond = token foreground : suit la palette du client. Les blancs/gris clairs
   fixes sont du texte « sur fond sombre », comme dans le hero. */
.karoutza-footer-heading { color: var(--wp--preset--color--primary); }
.karoutza-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color .2s;
}
.karoutza-footer a:hover { color: var(--wp--preset--color--primary); }
.karoutza-footer .karoutza-footer-sep {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: none;
  width: 100%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 760px) {
  .karoutza-hero { min-height: 440px !important; }
  .karoutza-posts3 .wp-block-post-template,
  .karoutza-tiles .wp-block-post-template { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .karoutza-collgrid .wp-block-post-template,
  .karoutza-expogrid .wp-block-post-template { grid-template-columns: 1fr; }
  .karoutza-contact .row { flex-direction: column; gap: 0; }
}