/**
 * @file pages/blog.css
 * @project Nails-Manucure-v1
 * @description Styles blog   hero, grille, contenu editorial, cartes.
 * @version 1.1.0
 * @updated 2026-07-18
 * @depends 01-tokens.css (berry, text-soft, text-mute, sh-sm, f-display, f-body)
 */

/* ═══ BLOG HERO ═══ */
.blog-hero { position: relative; padding: var(--sp-hero-pt) clamp(20px, 3vw, 48px) var(--sp-hero-pb); text-align: center; background: linear-gradient(160deg, #2D1B28 0%, #3D2535 50%, #4A2040 100%); overflow: hidden; }
.blog-hero-content { position: relative; z-index: 2; max-width: var(--content-text); margin: 0 auto; }
.blog-hero-eyebrow { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rose-light); margin-bottom: clamp(12px, 1.5vw, 20px); }
.blog-hero h1 { font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-h1); font-weight: 400; color: #FBF9F7; line-height: 1.15; margin: 0 auto clamp(12px, 1.5vw, 20px); letter-spacing: -0.01em; }
.blog-hero-lead { font-size: var(--fs-body); color: rgba(250,247,244,0.75); line-height: 1.75; max-width: 700px; margin: 0 auto; }
.blog-hero-lead strong { color: #FBF9F7; }
.blog-hero-bg { position: absolute; inset: 0; pointer-events: none; }
.bh-orb { position: absolute; border-radius: 50%; }
.bh-orb--1 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(196,134,154,0.12) 0%, transparent 70%); top: -80px; right: -100px; }
.bh-orb--2 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(212,165,116,0.08) 0%, transparent 70%); bottom: -60px; left: -80px; }

/* ═══ BLOG TRUST MINI ═══ */
.blog-trust { background: #F5EDEF; text-align: center; padding: clamp(12px, 2vw, 18px) 24px; }
.blog-trust-inner { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2vw, 20px); flex-wrap: wrap; font-size: var(--fs-small); color: #5C4858; font-weight: 500; }
.bt-sep { color: var(--rose); }

/* ═══ ARTICLE BODY ═══ */
.blog-content { max-width: var(--content-text); margin: 0 auto; padding: var(--sp-section) clamp(20px, 3vw, 48px); }
.blog-content h2 { font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-h2); font-weight: 500; color: #2D1B28; margin: 2em 0 0.6em; line-height: 1.25; }
.blog-content h2::before { display: block; content: ""; width: clamp(30px, 3vw, 40px); height: 2px; background: #C4869A; margin-bottom: clamp(10px, 1.2vw, 16px); }
.blog-content h3 { font-size: var(--fs-h3); font-weight: 600; color: #2D1B28; margin: 1.8em 0 0.5em; }
.blog-content p { font-size: var(--fs-body); line-height: 1.85; color: #4A3A44; margin-bottom: 1em; }
.blog-content strong { color: #2D1B28; font-weight: 600; }
.blog-content i, .blog-content em { font-style: italic; color: #8B3A52; }
.blog-content ul, .blog-content ol { margin: 1em 0; padding-left: 1.5em; }
.blog-content li { font-size: var(--fs-body); line-height: 1.8; color: #4A3A44; margin-bottom: 0.3em; }

/* Tables   scroll wrapper required in HTML: <div class="table-scroll"><table>...</table></div> */
.blog-content table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: var(--fs-body); }
.blog-content thead th { background: #2D1B28; color: #FBF9F7; padding: clamp(10px, 1.5vw, 12px) clamp(12px, 1.5vw, 16px); text-align: left; font-weight: 500; font-size: var(--fs-small); letter-spacing: 0.05em; text-transform: uppercase; }
.blog-content tbody td { padding: clamp(10px, 1.5vw, 12px) clamp(12px, 1.5vw, 16px); border-bottom: 1px solid #F0EAE5; color: #4A3A44; }
.blog-content tbody tr:nth-child(even) { background: #FBF9F7; }
.blog-content tbody tr:hover { background: #F5EDEF; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .blog-content table { min-width: 560px; }

/* ═══ SOURCES ═══ */
.blog-sources { margin-top: 3em; padding-top: 2em; border-top: 1px solid #F0EAE5; }
.blog-sources p { font-size: var(--fs-small); color: #6A5A64; line-height: 1.6; }

/* ═══ BLOG GRID (index) ═══ */
.blog-grid { display: grid; grid-template-columns: var(--grid-2); gap: clamp(20px, 2.5vw, 28px); max-width: var(--container); margin: 2em auto; padding: 0 clamp(16px, 3vw, 48px); }
/* Asymmetrical bento: featured card spans 2 columns on wide screens */
@media (min-width: 900px) { .blog-card--featured { grid-column: span 2; } }

/* ═══ BLOG CARD — double-bezel ═══ */
.blog-card { background: transparent; border-radius: 20px; transition: opacity 0.3s, transform 0.3s; }
.has-js .blog-card.reveal { opacity: 0; transform: translateY(36px); }
.has-js .blog-card.reveal.visible { opacity: 1; transform: none; }
.blog-card__inner { background: #FBF9F7; border: 1px solid #F0EAE5; border-radius: 16px; padding: clamp(20px, 3vw, 32px); box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,0.8); transition: transform 0.35s var(--ease-q), box-shadow 0.35s var(--ease-q), border-color 0.35s var(--ease-q); display: flex; flex-direction: column; gap: 10px; height: 100%; }
.blog-card:hover .blog-card__inner { transform: translateY(-3px); box-shadow: var(--sh-md), inset 0 1px 0 rgba(255,255,255,0.8); border-color: var(--rose-light); }

/* Featured card — légèrement plus grand visuellement */
.blog-card--featured .blog-card__inner { background: linear-gradient(135deg, #FDF5F0 0%, #FBF9F7 100%); border-color: var(--rose-pale); }

.blog-card__category { display: inline-block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--berry); background: var(--rose-pale); padding: 4px 12px; border-radius: 100px; width: fit-content; }
.blog-card__title { font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; }
.blog-card__title a { color: #2D1B28; text-decoration: none; }
.blog-card__title a:hover { color: #8B3A52; }
.blog-card__excerpt { font-size: var(--fs-body); color: #6A5A64; line-height: 1.7; flex: 1; }
.blog-card__footer { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid #F0EAE5; }
.blog-card__footer time { font-size: var(--fs-small); color: #6A5A64; }
.blog-card__link { font-size: var(--fs-small); color: #8B3A52; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.3s var(--ease-q); }
.blog-card__link:hover { gap: 8px; }
.blog-card__link span { transition: transform 0.3s var(--ease-e); }
.blog-card__link:hover span { transform: translateX(3px); }

/* ═══ BREADCRUMB ═══ */
.breadcrumb { max-width: var(--container); margin: 0 auto; padding: clamp(58px, 7vw, 72px) clamp(16px, 3vw, 48px) clamp(12px, 2vw, 16px); font-size: var(--fs-small); color: #6A5A64; }
.breadcrumb a { color: #8B3A52; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ═══ LEAD ═══ */
.lead { font-size: var(--fs-body); line-height: 1.7; color: #4A3A44; max-width: var(--content-text); margin: 0 auto; }

/* ═══ CTA SECTION (shared with services.css) ═══ */
.cta-section { background: #FBF9F7; padding: var(--sp-section) clamp(20px, 3vw, 48px); text-align: center; }
.cta-inner { max-width: var(--content-text); margin: 0 auto; }
.cta-section h2 { font-family: "Playfair Display", Georgia, serif; font-size: var(--fs-h2); font-weight: 400; color: #2D1B28; margin-bottom: clamp(8px, 1vw, 16px); }
.cta-section h2 em { font-style: italic; color: #8B3A52; }
.cta-section p { font-size: var(--fs-body); color: #6A5A64; line-height: 1.7; margin-bottom: clamp(20px, 2.5vw, 28px); }
.btn-cta { display: inline-flex; align-items: center; gap: clamp(6px, 1vw, 10px); padding: clamp(14px, 2vw, 16px) clamp(32px, 5vw, 44px); background: #8B3A52; color: #FBF9F7; border-radius: 100px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em; text-decoration: none; transition: background-color 0.35s var(--ease-e, cubic-bezier(0.34,1.56,0.64,1)), box-shadow 0.35s var(--ease-e, cubic-bezier(0.34,1.56,0.64,1)), transform 0.35s var(--ease-e, cubic-bezier(0.34,1.56,0.64,1)); box-shadow: var(--sh-berry, 0 10px 36px rgba(139,58,82,0.28)); }
.btn-cta:hover { background: #6D2A3E; transform: scale(1.03); box-shadow: 0 14px 44px rgba(139,58,82,0.35); }
.btn-cta:active { transform: scale(0.97); }

/* ═══ UTILITY CENTER ═══ */
.u-center { text-align: center; }

/* ═══ FOCUS VISIBLE ═══ */
.breadcrumb a:focus-visible,
.blog-grid h2 a:focus-visible,
.blog-card__title a:focus-visible,
.blog-card__link:focus-visible { outline: 2px solid #8B3A52; outline-offset: 3px; border-radius: 4px; }

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .blog-card, .blog-card.reveal, .blog-card.reveal.visible, .blog-card__inner { transition: none; transform: none; opacity: 1; }
  .blog-content tbody tr:hover { background: inherit; }
  .blog-card__link:hover span { transform: none; }
}

/* ═══ TABLET + MOBILE ═══ */
@media (max-width: 820px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card--featured { grid-column: span 1; }
}
@media (max-width: 480px) {
  .blog-hero { padding: 60px 20px 40px; }
  .blog-content { padding: 32px 20px; }
  .blog-card__footer { flex-direction: column; align-items: flex-start; gap: 8px; }
  .blog-trust-inner { gap: 6px; font-size: 0.72rem; }
}