/* ==========================================================================
   Components: buttons, section header, event rows, book rail,
   article cards, gallery, pull-quote, ornaments, floating WhatsApp
   button. Header, menu drawer and footer live in chrome.css; hero slider and lightbox in overlays.css.
   ========================================================================== */

/* ---------- Stretched link: whole card clickable through its title link ---------- */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.stretched-link:focus-visible { outline: none; }
:is(.event-row, .book-card, .article-card):has(.stretched-link:focus-visible) {
  outline: 2px solid var(--saffron);
  outline-offset: 6px;
  border-radius: var(--radius-1);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  --btn-bg: var(--maroon);
  --btn-fg: var(--on-maroon);
  --btn-border: var(--maroon);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1.75rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out);
}
.btn__arrow { transition: transform var(--dur-ui) var(--ease-out); }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--primary:hover { --btn-bg: var(--maroon-hover); --btn-border: var(--maroon-hover); }

.btn--saffron { --btn-bg: var(--saffron); --btn-fg: var(--maroon); --btn-border: var(--saffron); }
.btn--saffron:hover { --btn-bg: var(--saffron-hover); --btn-border: var(--saffron-hover); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--maroon); --btn-border: var(--hairline-strong); }
.btn--ghost:hover { --btn-bg: var(--maroon); --btn-fg: var(--on-maroon); --btn-border: var(--maroon); }
.btn--ghost.btn--on-maroon { --btn-fg: var(--on-maroon); --btn-border: rgb(250 246 238 / 0.35); }
.btn--ghost.btn--on-maroon:hover { --btn-bg: var(--on-maroon); --btn-fg: var(--maroon); --btn-border: var(--on-maroon); }

/* Text link with a growing saffron underline */
.btn--link,
.text-link {
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-fg: var(--maroon);
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--saffron), var(--saffron)) left bottom / 0% 1px no-repeat,
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) left bottom / 100% 1px no-repeat;
  background-position: left calc(100% - 0.55rem), left calc(100% - 0.55rem);
  transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.btn--link:hover,
.btn--link:focus-visible,
.text-link:hover,
.text-link:focus-visible {
  background-size: 100% 1px, 100% 1px;
  --btn-fg: var(--saffron-ink);
}
.btn--link.btn--on-maroon {
  --btn-fg: var(--on-maroon);
  background-image:
    linear-gradient(var(--saffron-on-maroon), var(--saffron-on-maroon)),
    linear-gradient(rgb(250 246 238 / 0.3), rgb(250 246 238 / 0.3));
}
.btn--link.btn--on-maroon:hover { --btn-fg: var(--saffron-on-maroon); }

.text-link {
  display: inline-flex;
  align-items: center;
  color: var(--maroon);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
}
.text-link:hover { color: var(--saffron-ink); }

/* ==========================================================================
   Section header + block layout (head / body / action)
   ========================================================================== */
.section-head { max-width: 42rem; }
.section-head__eyebrow { margin-bottom: var(--space-4); }
.section-head__title { font-size: var(--text-h2); }
.section-head__deck {
  margin-top: var(--space-4);
  max-width: 52ch;
  color: var(--muted);
}
.section-head__deck--serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-h4);
  line-height: 1.4;
  color: var(--ink);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .section-head__deck { margin-inline: auto; }

.block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "action";
}
.block__head { grid-area: head; margin-bottom: var(--section-gap); }
.block__body { grid-area: body; min-width: 0; }
.block__action {
  grid-area: action;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-7);
}

@media (min-width: 900px) {
  .block {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head action" "body body";
    column-gap: var(--space-7);
  }
  .block__action {
    align-self: end;
    justify-content: flex-end;
    margin-top: 0;
    margin-bottom: var(--section-gap);
  }
}

/* ==========================================================================
   Pull-quote
   ========================================================================== */
.pull-quote {
  margin-block: var(--space-6);
  padding-left: var(--space-5);
  border-left: 2px solid var(--saffron);
}
.pull-quote blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: var(--text-quote);
  line-height: 1.3;
  color: var(--maroon);
  text-wrap: balance;
}
.pull-quote__cite {
  margin-top: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.pull-quote__cite::before { content: "— "; color: var(--saffron); }

/* ==========================================================================
   Lotus divider
   ========================================================================== */
.lotus-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  color: var(--saffron);
}
.lotus-divider__rule {
  flex: 0 1 7.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline-strong));
}
.lotus-divider__rule:last-child { background: linear-gradient(90deg, var(--hairline-strong), transparent); }
.lotus-divider--maroon { color: var(--saffron-on-maroon); }
.lotus-divider--maroon .lotus-divider__rule { background: var(--hairline-on-maroon); }

/* ==========================================================================
   Event rows
   ========================================================================== */
.event-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--hairline-strong);
}
.event-row {
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--hairline-strong);
}
.event-row__date {
  display: grid;
  align-content: start;
  justify-items: start;
}
.event-row__day {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: var(--text-date);
  line-height: 0.85;
  color: var(--maroon);
  white-space: nowrap;
}
.event-row__day-end { font-size: 0.55em; color: var(--muted); }
.event-row__month {
  margin-top: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--saffron-ink);
  white-space: nowrap;
}
.event-row__weekday { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; }

.event-row__title { font-size: var(--text-h3); }
.event-row__title a {
  background: linear-gradient(var(--saffron), var(--saffron)) left 100% / 0% 1px no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.event-row:hover .event-row__title a { background-size: 100% 1px; }
.event-row__meta { margin-top: var(--space-2); }
.event-row__loc { display: block; }
.event-row__excerpt { margin-top: var(--space-3); max-width: 58ch; color: var(--ink); }

.event-row__arrow {
  display: none;
  place-items: center;
  align-self: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-round);
  color: var(--maroon);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
}
.event-row:hover .event-row__arrow {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--on-maroon);
  transform: translateX(4px);
}
@media (min-width: 640px) {
  .event-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--space-6); }
  .event-row__arrow { display: grid; }
}

/* ==========================================================================
   Book rail
   ========================================================================== */
.book-rail {
  display: flex;
  gap: var(--space-5);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-3) var(--gutter) var(--space-5);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}
.book-card {
  position: relative;
  flex: 0 0 min(58vw, 15rem);
  scroll-snap-align: start;
}
.book-card__cover {
  box-shadow: var(--shadow-cover);
  transition: transform var(--dur-reveal) var(--ease-out);
}
.book-card:hover .book-card__cover { transform: translateY(-6px); }
.book-card__blank {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--space-5);
  text-align: center;
  font-size: 1.4rem;
  color: var(--maroon);
}
.book-card__body { padding-top: var(--space-5); }
.book-card__title { font-size: var(--text-h4); line-height: 1.2; }
.book-card__title a { transition: color var(--dur-hover) var(--ease-out); }
.book-card:hover .book-card__title a { color: var(--saffron-ink); }
.book-card__author { margin-top: var(--space-1); }
.book-card__desc { margin-top: var(--space-3); font-size: var(--text-small); line-height: 1.6; color: var(--ink); }
.book-card__price {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--maroon);
}
.book-card__stock { font-weight: var(--weight-regular); color: var(--muted); }

@media (min-width: 900px) {
  .book-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-7);
    margin-inline: 0;
    padding: var(--space-3) 0 0;
    overflow: visible;
  }
}

/* ==========================================================================
   Article cards (editorial grid)
   ========================================================================== */
.article-grid {
  display: grid;
  gap: var(--space-7);
  list-style: none;
  padding: 0;
}
.article-card { position: relative; }
.article-card:hover .frame > img { transform: scale(var(--hover-zoom)); }
.article-card__body { padding-top: var(--space-5); }
.article-card__date { color: var(--saffron-ink); }
.article-card__title { margin-top: var(--space-3); font-size: var(--text-h3); }
.article-card__title a { transition: color var(--dur-hover) var(--ease-out); }
.article-card:hover .article-card__title a { color: var(--saffron-ink); }
.article-card__excerpt { margin-top: var(--space-3); color: var(--muted); max-width: 54ch; }
.article-card__more {
  display: inline-block;
  margin-top: var(--space-4);
  padding-bottom: 0.2rem;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--maroon);
  background:
    linear-gradient(var(--saffron), var(--saffron)) left bottom / 0% 1px no-repeat,
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) left bottom / 100% 1px no-repeat;
  transition: background-size var(--dur-ui) var(--ease-out);
}
.article-card:hover .article-card__more { background-size: 100% 1px, 100% 1px; }
.article-card--feature .article-card__title { font-size: var(--text-h3-lg); }

@media (min-width: 640px) {
  .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .article-card--feature { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .article-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    column-gap: var(--space-8);
    row-gap: var(--space-7);
  }
  .article-card--feature { grid-column: 1; grid-row: 1 / span 2; }
  .article-card:not(.article-card--feature) .article-card__more { display: none; }
}

/* ==========================================================================
   Gallery (masonry columns); the lightbox is in overlays.css
   ========================================================================== */
.gallery {
  columns: 2;
  column-gap: var(--space-3);
  list-style: none;
  padding: 0;
}
@media (min-width: 768px) { .gallery { columns: 3; } }
@media (min-width: 1200px) { .gallery { columns: 4; } }
.gallery__item { break-inside: avoid; margin-bottom: var(--space-3); }
.gallery__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-1);
  background: var(--hairline);
}
.gallery__link img {
  width: 100%;
  transition: transform var(--dur-reveal) var(--ease-out);
}
.gallery__link:hover img { transform: scale(var(--hover-zoom)); }
.gallery__zoom {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-round);
  background: rgb(250 246 238 / 0.92);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.gallery__zoom::before,
.gallery__zoom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--maroon);
  transform: translate(-50%, -50%);
}
.gallery__zoom::after { transform: translate(-50%, -50%) rotate(90deg); }
.gallery__link:hover .gallery__zoom,
.gallery__link:focus-visible .gallery__zoom { opacity: 1; transform: none; }

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-round);
  background: var(--maroon);
  color: var(--on-maroon);
  box-shadow: var(--shadow-float), inset 0 0 0 1px rgb(246 160 76 / 0.55);
  transition: transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.wa-float:hover { background: var(--maroon-hover); transform: translateY(-2px); }
.wa-float__label {
  position: absolute;
  right: calc(100% + 0.75rem);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--maroon);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 20px -10px rgb(74 28 12 / 0.4);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
@media (hover: hover) {
  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label { opacity: 1; transform: none; }
}
@media (min-width: 900px) {
  .wa-float { right: 1.75rem; bottom: 1.75rem; }
}