/* =========================================================
   single-post.css — Template article Verrerie de Biot
   ========================================================= */

/* ---------- Conteneur global ---------- */
.vdb-article {
    background-color: var(--vdb-beige-tres-clair);
    color: var(--vdb-bleu-marine);
    overflow-x: hidden;
}

.vdb-article > * {
    box-sizing: border-box;
}

/* ---------- En-tête de l'article ---------- */
.vdb-article__header {
    max-width: var(--vdb-content-max-width);
    margin: 0 auto;
    padding: 80px 24px 40px;
    text-align: center;
}

.vdb-article__title {
    font-family: "Baskervville", "Baskerville", "Times New Roman", Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.15;
    margin: 0 0 24px;
    color: var(--vdb-bordeaux-moyen);
}

.vdb-article__chapeau {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--vdb-bleu-marine);
    opacity: 0.85;
}

.vdb-article__hero {
    margin: 56px 0 0;
    padding: 0;
}

.vdb-article__hero img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Corps Gutenberg ----------
   Le body est pleine largeur. Chaque enfant direct prend une largeur
   selon sa classe d'alignement (default = 823px, wide = 1180px,
   full = 100vw). Plus simple et plus fiable que les hacks transform.
*/
.vdb-article__body {
    width: 100%;
    padding: 64px 0;
    overflow-x: clip; /* sécurité contre tout débordement horizontal */
}

/* Largeur de lecture par défaut */
.vdb-article__body > * {
    max-width: var(--vdb-text-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}

/* Alignements Gutenberg — wide = même largeur que la section "Produits de la scène" */
.vdb-article__body > .alignwide {
    max-width: var(--vdb-content-max-width);
}

.vdb-article__body > .alignfull {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Espacement vertical entre les blocs */
.vdb-article__body > * + * {
    margin-top: 1.5em;
}

.vdb-article__body p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0;
}

.vdb-article__body h2 {
    font-family: "Baskervville", "Baskerville", "Times New Roman", Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--vdb-bordeaux-moyen);
    margin-bottom: 0.5em;
}

/* ---------- Pattern "Détail" (image / texte) ---------- */
.vdb-pattern-detail {
    gap: 48px;
    margin: 80px auto;
    align-items: center;
}

.vdb-pattern-detail .wp-block-image {
    margin: 0;
}

.vdb-pattern-detail .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.vdb-pattern-detail h2 {
    font-family: "Baskervville", "Baskerville", "Times New Roman", Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    margin: 0 0 0.6em;
    color: var(--vdb-bordeaux-moyen);
}

.vdb-pattern-detail p {
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .vdb-pattern-detail {
        gap: 24px;
    }
    .vdb-pattern-detail .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* ---------- Pattern "Citation pleine largeur" (wp:group + paragraphe centré) ---------- */
.vdb-pattern-citation {
    background-color: var(--vdb-bleu-marine);
    color: var(--vdb-beige-tres-clair);
    padding: 80px 24px;
    margin: 64px 0;
    text-align: center;
}

.vdb-pattern-citation p {
    max-width: 760px;
    margin: 0 auto;
    font-family: "Baskervville", "Baskerville", "Times New Roman", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.5;
    color: var(--vdb-beige-tres-clair);
}

/* ---------- Pattern "Galerie masonry 2 colonnes" ----------
   column-count gère le masonry nativement en CSS : les images
   conservent leur ratio naturel et s'empilent dans la colonne
   la moins remplie. break-inside évite qu'une image soit coupée
   entre deux colonnes.
*/
.vdb-pattern-galerie-4 {
    --vdb-gallery-gap: 16px;
    display: block !important;
    column-count: 2;
    /* !important pour battre le gap par défaut de .wp-block-gallery (WP core ~0.5em) */
    column-gap: var(--vdb-gallery-gap) !important;
    gap: var(--vdb-gallery-gap) !important;
    margin-top: 80px !important;
    margin-bottom: 80px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.vdb-pattern-galerie-4 .wp-block-image {
    break-inside: avoid;
    width: 100% !important;
    margin: 0 0 var(--vdb-gallery-gap) 0 !important;
    display: block;
}

.vdb-pattern-galerie-4 .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .vdb-pattern-galerie-4 {
        --vdb-gallery-gap: 8px;
        column-count: 1;
    }
}

/* ---------- Section "Produits de la scène" ---------- */
.vdb-produits {
    max-width: var(--vdb-content-max-width);
    margin: 80px auto 0;
    padding: 0 24px;
}

.vdb-produits__header {
    margin-bottom: 32px;
}

.vdb-produits__title {
    font-family: "Baskervville", "Baskerville", "Times New Roman", Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    margin: 0;
    color: var(--vdb-bordeaux-moyen);
}

.vdb-produits__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 24px;
}

.vdb-produits--count-1 .vdb-produits__grid { grid-template-columns: repeat(1, 1fr); max-width: 320px; }
.vdb-produits--count-2 .vdb-produits__grid { grid-template-columns: repeat(2, 1fr); }
.vdb-produits--count-3 .vdb-produits__grid { grid-template-columns: repeat(3, 1fr); }
.vdb-produits--count-4 .vdb-produits__grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .vdb-produits--count-3 .vdb-produits__grid,
    .vdb-produits--count-4 .vdb-produits__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .vdb-produits__grid {
        grid-template-columns: 1fr !important;
    }
}

.vdb-produits__item {
    margin: 0;
    list-style: none;
}

.vdb-produits__link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.vdb-produits__link:hover {
    opacity: 0.85;
}

.vdb-produits__media {
    margin: 0 0 12px;
    aspect-ratio: 3 / 4;
    background-color: var(--vdb-beige-clair);
    overflow: hidden;
}

.vdb-produits__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vdb-produits__name {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 4px;
    color: var(--vdb-bleu-marine);
}

.vdb-produits__price {
    font-size: 0.9rem;
    color: var(--vdb-bordeaux);
}

.vdb-produits__price .price del {
    color: var(--vdb-bleu-marine);
    opacity: 0.5;
    margin-right: 6px;
}

/* ---------- Bandeau "Conclusion" ----------
   Layout 2 colonnes : image à gauche, contenu (titre + texte + CTA) à droite.
   Sans image, le bandeau bleu marine prend toute la largeur (mode --no-image).
*/
.vdb-article__conclusion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    max-width: var(--vdb-content-max-width);
    margin: 80px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.vdb-article__conclusion--no-image {
    grid-template-columns: 1fr;
}

.vdb-article__conclusion-media {
    margin: 0;
    overflow: hidden;
}

.vdb-article__conclusion-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vdb-article__conclusion-content {
    background-color: var(--vdb-bleu-marine);
    color: var(--vdb-beige-tres-clair);
    padding: 56px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.vdb-article__conclusion-title {
    font-family: "Baskervville", "Baskerville", "Times New Roman", Georgia, serif;
    font-style: normal;
    font-weight: 400;
    font-size: clamp(1.8rem, 2.6vw, 2.4rem);
    line-height: 1.2;
    margin: 0;
    color: var(--vdb-beige-tres-clair);
}

.vdb-article__conclusion-inner {
    font-size: 1rem;
    line-height: 1.65;
}

.vdb-article__conclusion-inner p {
    margin: 0 0 0.8em;
}

.vdb-article__conclusion-inner p:last-child {
    margin-bottom: 0;
}

.vdb-article__conclusion-inner a {
    color: var(--vdb-beige-tres-clair);
    text-decoration: underline;
}

.vdb-article__conclusion-cta {
    align-self: flex-start;
    display: inline-block;
    padding: 12px 28px;
    background-color: var(--vdb-creme-pale);
    color: var(--vdb-bleu-marine);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--vdb-creme-pale);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    margin-top: 4px;
}

.vdb-article__conclusion-cta:hover,
.vdb-article__conclusion-cta:focus {
    background-color: var(--vdb-bordeaux-moyen);
    color: var(--vdb-beige-tres-clair);
    border-color: var(--vdb-bordeaux-moyen);
}

/* Responsive : pile en mobile, image dessus, marges latérales conservées */
@media (max-width: 768px) {
    .vdb-article__conclusion {
        grid-template-columns: 1fr;
        margin: 56px auto;
        padding: 0 24px;
    }
    .vdb-article__conclusion-content {
        padding: 40px 24px;
    }
}