/* =============================================================================
   BIBI HOUSE · blog.css
   Blog, standalone pages and the sports page, layered on styles.css (tokens, .nav, .btn, .foot, .prose).
   ============================================================================= */


/* ==== 01 · PAGE SHELL ============================================= */

.blog { padding-bottom: var(--band); }


/* ==== 02 · BREADCRUMB ============================================= */

.breadcrumb {
  padding-top: 28px;
  font-size: var(--fs-0);
  color: var(--c-ink-3);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 10px; opacity: .5; }
.breadcrumb a { transition: color var(--t-fast) var(--ease); }
.breadcrumb a:hover { color: var(--c-ink); }
.breadcrumb [aria-current="page"] { color: var(--c-ink-2); }


/* ==== 03 · BLOG INDEX ============================================= */

.blog-list__head { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 48px); }
.blog-list__intro { margin-bottom: clamp(40px, 6vw, 72px); }

.blog-list__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
  padding-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--c-line);
}
.blog-list__grid > :first-child { grid-column: 1 / -1; }
.blog-list__grid > :first-child .post-card__title { font-size: var(--fs-5); max-width: 22ch; }
.blog-list__grid > :first-child .post-card__desc { font-size: var(--fs-2); }

.blog-list__cta { margin: clamp(48px, 7vw, 96px) 0 0; }
.blog-list__empty { color: var(--c-ink-3); font-family: var(--f-display); font-style: italic; padding: 40px 0; }

@media (max-width: 720px) { .blog-list__grid { grid-template-columns: 1fr; } }


/* ==== 04 · POST CARD ============================================== */

.post-card { display: grid; gap: 10px; align-content: start; max-width: 62ch; }
.post-card__media {
  display: block; overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-grey);
  aspect-ratio: 3 / 2;
  margin-bottom: 8px;
}
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__meta, .post__meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-size: var(--fs-0); color: var(--c-ink-3);
}
.post-card__cat { color: var(--c-versa); }
.post-card__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-4); line-height: 1.15; letter-spacing: -.01em;
}
.post-card__title a { transition: color var(--t-fast) var(--ease); }
.post-card__title a:hover { color: var(--c-versa); }
.post-card__desc { color: var(--c-ink-2); }
.post-card__more {
  justify-self: start;
  margin-top: -8px;
  padding: 12px 0;
  font-weight: 500; font-size: var(--fs-0);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(26, 32, 30, .3);
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.post-card__more:hover { text-decoration-color: currentColor; }


/* ==== 05 · POST PAGE ============================================== */

.post__head {
  max-width: 760px;
  padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
}
.post__meta { margin-bottom: 22px; }
.post__cat a { color: var(--c-versa); }
.post__cat a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post__title { text-wrap: balance; }

.post__hero { margin: 0 0 clamp(40px, 6vw, 80px); }
.post__hero img { width: 100%; max-height: 70vh; object-fit: cover; border-radius: var(--radius); }
.post__hero figcaption { padding: 10px 0 0; font-size: var(--fs-0); color: var(--c-ink-3); }

.post__body { max-width: 680px; }

.prose h2 {
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-4); line-height: 1.15; letter-spacing: -.01em;
  color: var(--c-ink);
}
.prose h3 {
  margin-top: clamp(28px, 4vw, 44px);
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--fs-3); line-height: 1.3;
  color: var(--c-ink);
}
.prose ul, .prose ol { padding-left: 1.4em; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 6px; }
.prose blockquote {
  margin: clamp(28px, 4vw, 44px) 0;
  padding-left: clamp(18px, 2.5vw, 28px);
  border-left: 2px solid var(--c-armerie);
  font-family: var(--f-display); font-style: italic;
  font-size: var(--fs-3); line-height: 1.4;
  color: var(--c-sariette);
}
.prose figure { margin: clamp(32px, 5vw, 56px) 0; }
.prose figure img { width: 100%; border-radius: var(--radius); }
.prose figure figcaption { padding: 10px 0 0; font-size: var(--fs-0); color: var(--c-ink-3); }

.post__cta-end { max-width: 760px; margin: clamp(56px, 8vw, 110px) 0 0; }

.post__related { margin-top: clamp(60px, 9vw, 120px); }
.post__related-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-4); letter-spacing: -.01em;
  margin-bottom: clamp(24px, 4vw, 40px);
}
.post__related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--c-line);
}
@media (max-width: 900px) { .post__related-grid { grid-template-columns: 1fr; } }

.post__byline {
  max-width: 680px;
  margin: clamp(48px, 7vw, 96px) 0 0;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--c-line);
  display: flex; align-items: center; gap: 18px;
}
.post__byline-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.post__byline-name a { color: var(--c-versa); }
.post__byline-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post__byline-role { font-family: var(--f-display); font-style: italic; color: var(--c-ink-3); }


/* ==== 06 · CTA CARD (WhatsApp) ==== */

.cta-card {
  position: relative;
  background: var(--c-church);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  color: var(--c-ink);
  display: grid; gap: 14px; justify-items: start;
}
.cta-card--article-end, .cta-card--blog-index {
  background: var(--c-green); color: var(--c-cream);
  --btn-bg: var(--c-cream); --btn-fg: var(--c-green); --btn-bg-hover: #fff;
}

.cta-card__eyebrow { font-family: var(--f-display); font-style: italic; font-size: var(--fs-2); opacity: .8; }
.cta-card__title {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-4); line-height: 1.12; letter-spacing: -.01em;
  max-width: 24ch;
}
.cta-card__lede { font-size: var(--fs-1); line-height: 1.55; opacity: .9; max-width: 52ch; }
.cta-card .wa-cta { margin-top: 10px; }


/* ==== 07 · PAGES (author, legal) =================================== */

.page { max-width: 720px; }
.page__head { padding: clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 40px); }
.author-portrait { margin: 0 0 clamp(24px, 4vw, 40px); max-width: 180px; }
.author-portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; }

/* Media kit (/media-kit/, /en/media-kit/): in-page index, logo tiles, swatches, type specimens, photo grid. */
.kit-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-1); }
.kit-tiles, .kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 28px); }
.kit-tiles figure, .kit-grid figure { margin: 0; }
.kit-tiles figure { display: grid; place-items: center; padding: 12%; border: 1px solid var(--c-line-2); border-radius: var(--radius); }
.kit-tiles--wide { grid-template-columns: 1fr; }
.kit-tiles--wide figure { padding: 8% 12%; }
.kit-tile--cream { background: var(--c-cream); }
.kit-tile--green { background: var(--c-green); }
.kit-tiles img { width: 100%; max-width: 220px; height: auto; border-radius: 0; }
.kit-tiles--wide img { max-width: 420px; }
.kit-dl { font-size: var(--fs-1); }
.kit-grid .photo img { border-radius: var(--radius); }
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px; font-size: var(--fs-0); }
.kit-swatches + p { margin-top: 1.6em; }
.kit-swatch { margin: 0; }
.kit-swatch span { display: block; aspect-ratio: 3 / 2; margin-bottom: 6px; border: 1px solid var(--c-line-2); border-radius: var(--radius); background: var(--sw); }
.kit-swatch code { color: var(--c-ink-3); }
.kit-specimen { padding: 18px 0; border-top: 1px solid var(--c-line-2); color: var(--c-ink); line-height: 1.15; }
.kit-specimen + .kit-specimen { margin-top: 0; }
.kit-specimen--display { font-family: var(--f-display); font-weight: 500; font-size: var(--fs-4); letter-spacing: -.01em; }
.kit-specimen--sans { font-family: var(--f-sans); font-size: var(--fs-3); }
.kit-specimen--mark { font-family: var(--f-mark); font-size: var(--fs-5); text-transform: uppercase; line-height: .9; }
.kit-specimen small { display: block; margin-top: 10px; font-family: var(--f-sans); font-weight: 400; font-size: var(--fs-0); letter-spacing: 0; text-transform: none; color: var(--c-ink-3); }
@media (max-width: 600px) {
  .kit-tiles, .kit-grid { grid-template-columns: 1fr; }
}


/* ==== 08 · SPORT (/sport/, /en/sport/) ============================ */

/* The member page's agenda (app.css, "agenda" and "session"), in the site's tokens; "Réserver" opens the dialog
   (sport.js) or, without it, leads to the band at the bottom of the page. */
.sport { max-width: 960px; }
.sport__title { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-4); line-height: 1.15; color: var(--c-ink); }
.sport__empty { margin-top: 18px; color: var(--c-ink-2); }
.agenda { margin-top: 18px; }
.agenda__day { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 18px; }
.agenda__day + .agenda__day { margin-top: 18px; border-top: 1px solid var(--c-line); }
.agenda__anchor { scroll-margin-top: calc(var(--nav-h) + 16px); }
.agenda__date { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-sans); font-weight: 400; }
.agenda__num { font-family: var(--f-display); font-weight: 300; font-size: 2.6rem; line-height: .9; color: var(--c-green); font-variant-numeric: lining-nums; }
.agenda__words { display: flex; gap: 6px; font-size: var(--fs-1); color: var(--c-ink-2); }
.agenda__words span:first-child { font-weight: 500; color: var(--c-ink); }
@media (min-width: 720px) {
  .agenda__day { grid-template-columns: 7.5rem 1fr; gap: 24px; padding-top: 24px; }
  .agenda__day + .agenda__day { margin-top: 24px; }
  .agenda__date { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; flex-direction: column; gap: 6px; }
  .agenda__num { font-size: 3.4rem; }
  .agenda__words { flex-direction: column; gap: 0; line-height: 1.4; }
}
.agenda__more { display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 36px); }

.sessions { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.session {
  display: grid; grid-template-columns: 4.25rem 1fr; gap: 12px 16px; align-items: start;
  padding: 16px clamp(16px, 2.4vw, 22px);
  background: var(--c-cream-2); border: 1px solid var(--c-line-2); border-radius: var(--radius-lg);
}
.session__time { display: flex; flex-direction: column; line-height: 1.15; font-variant-numeric: tabular-nums; }
.session__start { font-family: var(--f-display); font-size: var(--fs-3); color: var(--c-ink); }
.session__end { font-size: var(--fs-0); color: var(--c-ink-3); }
.session__main { min-width: 0; }
.session__name { font-family: var(--f-display); font-size: var(--fs-3); line-height: 1.2; color: var(--c-ink); overflow-wrap: anywhere; }
.session__detail { margin-top: 2px; font-size: var(--fs-1); color: var(--c-ink-2); }
.session__host { margin-top: 4px; font-size: var(--fs-1); color: var(--c-ink-3); }
.session__about { margin-top: 4px; font-size: var(--fs-1); color: var(--c-ink-2); max-width: 60ch; }
.session__more { margin-top: 8px; }
.session__main:has(.session__more) { cursor: pointer; }
.session__more > summary {
  display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  font-size: var(--fs-0); font-weight: 500; color: var(--c-sariette); border-radius: 4px;
}
.session__more > summary::-webkit-details-marker { display: none; }
.session__more > summary::before {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.session__more[open] > summary::before { transform: translateY(1px) rotate(-135deg); }
.session__more > summary:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.session__more-close, .session__more[open] .session__more-open { display: none; }
.session__more[open] .session__more-close { display: inline; }
.session__text {
  margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--c-armerie); max-width: 62ch;
  font-size: var(--fs-1); line-height: 1.6; color: var(--c-ink-2);
}
.session__text > p { white-space: pre-line; }
.session__text > p + p { margin-top: .65em; }
.session__side { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.session__side .btn { padding: 11px 18px; font-size: 14px; }
/* Told whether a session is full, never how many places are left. */
.session__full { font-size: var(--fs-0); font-weight: 500; color: color-mix(in srgb, var(--c-leather) 55%, var(--c-ink)); }
@media (min-width: 640px) {
  .session { grid-template-columns: 4.75rem 1fr auto; }
  .session__side { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 8px; }
}
.lang-note {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: middle;
  font-size: 11px; letter-spacing: .02em; color: var(--c-ink-2); background: var(--c-line-2);
}

/* How a member books, with WhatsApp and signing in: the band at the bottom, and the dialog. */
.sport__join { margin-top: clamp(48px, 7vw, 88px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--c-line); scroll-margin-top: calc(var(--nav-h) + 16px); }
.sport__included { margin-top: 12px; max-width: 52ch; color: var(--c-ink-2); }
.sport__included a { color: var(--c-versa); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sport__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 22px; }

.sport-dialog {
  width: min(28rem, calc(100% - 2 * var(--gutter))); margin: auto; padding: 0;
  color: var(--c-ink); background: var(--c-cream-2); border: 1px solid var(--c-line-2); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(26, 32, 30, .05), 0 18px 40px -24px rgba(26, 32, 30, .35);
}
.sport-dialog::backdrop { background: rgba(26, 32, 30, .45); }
.sport-dialog__box { padding: clamp(20px, 4vw, 28px); }
.sport-dialog__what { font-family: var(--f-display); font-weight: 400; font-size: var(--fs-3); line-height: 1.25; }
.sport-dialog__what:focus { outline: none; }
.sport-dialog .sport__actions { flex-direction: column; }
.sport-dialog .sport__actions .btn { width: 100%; }
.sport-dialog__back {
  display: block; margin: 14px auto 0; padding: 8px; font: inherit; font-size: 14px; font-weight: 500; color: var(--c-ink-2);
  background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}
.sport-dialog__back:hover { color: var(--c-ink); }