/* ==========================================================================
   components.css — buttons, pills, cards, arches, ribbon, steps, quotes,
   forms, pagination. BEM, so the markup moves into PHP as is.
   ========================================================================== */

/* Eyebrow pill ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0.9rem; border-radius: 999px;
  border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.4;
}
.eyebrow::before, .eyebrow::after { content: "✦"; font-size: 0.65rem; color: var(--link); }
.surface-ink .eyebrow::before, .surface-ink .eyebrow::after,
.surface-primary .eyebrow::before, .surface-primary .eyebrow::after { color: var(--c-secondary); }

/* Buttons: label + round arrow --------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 0.4rem 0.4rem 0.4rem 1.25rem; min-height: 3rem;
  border-radius: 999px; border: 0; text-decoration: none;
  font-weight: 700; font-size: 0.95rem; line-height: 1.2;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn__icon {
  display: grid; place-items: center; flex: none;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--btn-fg); color: var(--btn-bg);
}
.btn__icon svg { width: 1rem; height: 1rem; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost .btn__icon { background: var(--fg); color: var(--bg); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.link-arrow { color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 0.25em; }

/* Chips -------------------------------------------------------------------- */
.chip {
  display: inline-block; padding: 0.2rem 0.7rem; border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
  background: var(--c-paper); color: var(--c-ink);
}
.chip--dark { background: var(--c-ink); color: var(--c-paper); }
.chip--gold { background: var(--c-secondary); color: var(--c-ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Filter chips (static preview; taxonomy links in WordPress) */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filters__btn {
  padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; font-weight: 600; font-size: var(--fs-sm);
}
.filters__btn[aria-pressed="true"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

/* Home hero ---------------------------------------------------------------- */
/* Fills the screen below the sticky header (header height + its 1px border). */
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center;
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 55%, transparent) 0%, color-mix(in srgb, var(--c-ink) 72%, transparent) 60%, var(--c-ink) 100%);
}
.hero__inner { display: grid; justify-items: center; text-align: center; gap: var(--space-6); padding-block: clamp(1.5rem, 5svh, 6rem) clamp(1.5rem, 4svh, 4rem); }
.hero__arabic { font-family: var(--font-arabic); font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); line-height: 1.3; color: var(--c-secondary); }
.hero h1 { font-size: var(--fs-hero); max-width: 17ch; }
.hero .lead { color: var(--muted); max-width: 46ch; }

/* Statement + badges -------------------------------------------------------- */
.statement { position: relative; text-align: center; display: grid; justify-items: center; gap: var(--space-6); }
.statement__text { font-family: var(--font-display); font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.15; max-width: 24ch; }
.statement__text em { color: var(--c-primary); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.badge {
  display: grid; place-items: center; align-content: center; text-align: center; gap: var(--space-2);
  width: 9.5rem; aspect-ratio: 1; padding: var(--space-4);
  background: var(--c-secondary); color: var(--c-ink);
  clip-path: polygon(50% 0%, 61% 9%, 75% 6%, 80% 20%, 94% 25%, 91% 39%, 100% 50%, 91% 61%, 94% 75%, 80% 80%, 75% 94%, 61% 91%, 50% 100%, 39% 91%, 25% 94%, 20% 80%, 6% 75%, 9% 61%, 0% 50%, 9% 39%, 6% 25%, 20% 20%, 25% 6%, 39% 9%);
}
.badge:nth-child(even) { background: color-mix(in srgb, var(--c-primary) 22%, var(--c-paper)); transform: rotate(6deg); }
.badge:nth-child(odd) { transform: rotate(-5deg); }
.badge__title { font-weight: 800; font-size: 0.95rem; line-height: 1.2; }
.badge__ar { font-family: var(--font-arabic); font-size: 2rem; line-height: 1.3; }

/* Arch cards (category carousel) ------------------------------------------- */
.arches {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(70%, 16rem); gap: var(--space-6);
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-4);
  scrollbar-width: thin;
}
@media (min-width: 64rem) { .arches { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }
.arch { scroll-snap-align: start; text-align: center; text-decoration: none; color: inherit; display: grid; gap: var(--space-4); }
.arch__media { border-radius: 999px 999px var(--radius) var(--radius); overflow: hidden; aspect-ratio: 3 / 4; }
.arch__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.arch:hover .arch__media img { transform: scale(1.05); }
.arch:nth-child(even) { margin-top: var(--space-8); }
@media (max-width: 63.99rem) { .arch:nth-child(even) { margin-top: 0; } }
.arch__title { font-family: var(--font-display); font-size: var(--fs-xl); }
.arch__text { font-size: var(--fs-sm); color: var(--muted); }

/* Cards ---------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; overflow: hidden; height: 100%;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-primary) 6%, var(--c-paper));
  color: var(--c-ink);
}
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__media .chip-row { position: absolute; left: var(--space-4); bottom: var(--space-4); }
/* No photo yet: show the logo small and centred instead of a cropped full-bleed logo. */
.card__media:has(.media-fallback), .arch__media:has(.media-fallback) { display: grid; place-items: center; background: color-mix(in srgb, var(--c-primary) 10%, var(--c-paper)); }
.card__media img.media-fallback, .arch__media img.media-fallback { width: 46%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 50%; }
.card__body { display: grid; gap: var(--space-2); padding: var(--space-6); flex: 1; align-content: start; }
.card__title { font-size: 1.4rem; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }
.card__text { color: color-mix(in srgb, var(--c-ink) 72%, var(--c-paper)); font-size: 0.95rem; }
.card__meta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin-top: auto; padding: var(--space-4) var(--space-6) var(--space-6);
  font-size: var(--fs-sm); font-weight: 600;
  border-top: 1px dashed color-mix(in srgb, var(--c-ink) 25%, var(--c-paper)); margin-inline: var(--space-6); padding-inline: 0;
}
.card--wide .card__media { aspect-ratio: 16 / 9; }
.card--poster .card__media { aspect-ratio: 1; }

/* CTA card (dashed inner border, stacked thumbs) ----------------------------- */
.cta-card {
  position: relative; border-radius: calc(var(--radius) * 1.4); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  display: grid; gap: var(--space-8); align-items: center; max-width: 54rem; margin-inline: auto;
}
.cta-card::before { content: ""; position: absolute; inset: 0.6rem; border: 1px dashed var(--line); border-radius: var(--radius); pointer-events: none; }
@media (min-width: 48rem) { .cta-card { grid-template-columns: auto 1fr; } }
.cta-card__thumbs { position: relative; width: 13rem; height: 9.5rem; margin-inline: auto; }
.cta-card__thumbs img { position: absolute; width: 7rem; height: 9rem; object-fit: cover; border-radius: 1rem; outline: 3px solid var(--bg); }
.cta-card__thumbs img:nth-child(1) { left: 0; top: 0.4rem; transform: rotate(-8deg); }
.cta-card__thumbs img:nth-child(2) { left: 3rem; top: 0; z-index: 2; }
.cta-card__thumbs img:nth-child(3) { left: 6rem; top: 0.4rem; transform: rotate(8deg); }
.cta-card__body { display: grid; gap: var(--space-4); justify-items: start; position: relative; }
.cta-card h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); }

/* Tilted ribbon marquee ------------------------------------------------------ */
.ribbon-wrap { overflow: hidden; padding-block: var(--space-12); }
.ribbon {
  transform: rotate(-3deg); margin-inline: -2rem;
  padding-block: var(--space-6);
  --dot: 9px;
  -webkit-mask: radial-gradient(circle var(--dot) at 50% 0, transparent 98%, var(--c-ink)) top / 26px 51% repeat-x,
                radial-gradient(circle var(--dot) at 50% 100%, transparent 98%, var(--c-ink)) bottom / 26px 51% repeat-x;
          mask: radial-gradient(circle var(--dot) at 50% 0, transparent 98%, var(--c-ink)) top / 26px 51% repeat-x,
                radial-gradient(circle var(--dot) at 50% 100%, transparent 98%, var(--c-ink)) bottom / 26px 51% repeat-x;
}
.ribbon__track { display: flex; width: max-content; gap: var(--space-8); animation: ribbon 40s linear infinite; }
.ribbon__item { display: inline-flex; align-items: center; gap: var(--space-8); font-family: var(--font-display); font-size: clamp(2rem, 1.2rem + 3vw, 4rem); white-space: nowrap; }
.ribbon__item::after { content: "✦"; font-size: 0.5em; color: var(--c-secondary); }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* Agenda list ------------------------------------------------------------------ */
.agenda { display: grid; gap: var(--space-4); }
.agenda__item {
  display: grid; gap: var(--space-4); align-items: center;
  padding: var(--space-6); border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-paper) 55%, var(--c-secondary));
}
@media (min-width: 48rem) { .agenda__item { grid-template-columns: 6rem 1fr auto; } }
.agenda__date { display: grid; justify-items: center; padding: var(--space-3); border-radius: 1rem; background: var(--c-ink); color: var(--c-paper); width: 6rem; }
.agenda__day { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.agenda__month { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.agenda__title { font-size: var(--fs-xl); }
.agenda__meta { font-size: var(--fs-sm); color: var(--muted); }

/* Steps 01–04 ------------------------------------------------------------------ */
.steps { display: grid; gap: var(--space-6); counter-reset: step; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-6); border-top: 1px dashed var(--line); }
.step__num { font-family: var(--font-display); font-style: italic; font-size: 3rem; line-height: 1; color: var(--c-primary); }
.surface-primary .step__num, .surface-ink .step__num { color: var(--c-secondary); }
.step__title { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-lg); }
.step__text { color: var(--muted); font-size: 0.95rem; }

/* Tilted photo strip --------------------------------------------------------------- */
.strip { display: flex; gap: var(--space-4); margin-top: var(--space-12); overflow: hidden; justify-content: center; padding-block: var(--space-6); }
.strip__img { flex: none; width: clamp(12rem, 8rem + 14vw, 20rem); aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }
.strip__img:nth-child(odd) { transform: rotate(-3deg); }
.strip__img:nth-child(even) { transform: rotate(3deg) translateY(1rem); }

.bigquote { display: grid; justify-items: center; text-align: center; gap: var(--space-6); }
.bigquote__text { font-family: var(--font-display); font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3.6rem); line-height: 1.12; max-width: 22ch; }
.bigquote__text em { color: var(--c-secondary); }
.bigquote__cite { font-style: normal; font-weight: 600; color: var(--muted); }

/* Testimonials / quotes masonry ---------------------------------------------------- */
.quotes { columns: 1; column-gap: var(--space-6); }
@media (min-width: 40rem) { .quotes { columns: 2; } }
@media (min-width: 64rem) { .quotes { columns: 3; } }
.quote {
  break-inside: avoid; margin-bottom: var(--space-6);
  padding: var(--space-6); border-radius: var(--radius);
  background: color-mix(in srgb, var(--c-primary) 6%, var(--c-paper));
  display: grid; gap: var(--space-4);
}
.quote--gold { background: color-mix(in srgb, var(--c-secondary) 45%, var(--c-paper)); }
.quote__who { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px dashed color-mix(in srgb, var(--c-ink) 25%, var(--c-paper)); }
.quote__avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-paper); font-weight: 800; overflow: hidden;
}
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote__name { font-weight: 800; line-height: 1.2; }
.quote__role { font-size: var(--fs-xs); color: color-mix(in srgb, var(--c-ink) 65%, var(--c-paper)); }
.quote__text { font-size: 1.02rem; }

/* Closing CTA -------------------------------------------------------------------- */
.closing { text-align: center; display: grid; justify-items: center; gap: var(--space-8); }
.closing__title { font-size: clamp(2.6rem, 1.4rem + 5.5vw, 6rem); max-width: 14ch; }
.closing__title em { color: var(--c-secondary); }

/* Pagination ------------------------------------------------------------------- */
.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); }
.pagination a, .pagination span {
  display: grid; place-items: center; min-width: 2.75rem; height: 2.75rem; padding: 0 var(--space-3);
  border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-weight: 700;
}
.pagination [aria-current="page"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }

/* Media + facts ----------------------------------------------------------------- */
.media-frame { border-radius: var(--radius); overflow: hidden; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--arch { border-radius: 999px 999px var(--radius) var(--radius); }
/* Side photo shown only when the split sits side by side (desktop). */
.media-frame--desktop { display: none; }
@media (min-width: 56rem) { .media-frame--desktop { display: block; margin-top: var(--space-8); } }
.facts { display: grid; gap: var(--space-4); }
.facts__row { display: grid; grid-template-columns: 2rem 1fr; gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: 1px dashed var(--line); }
.facts__icon { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--c-secondary); color: var(--c-ink); }
.facts__icon svg { width: 1rem; height: 1rem; }
.facts__label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.facts__value { font-weight: 600; }
.facts__value a { color: var(--link); }

.gallery { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56rem) { .gallery { grid-template-columns: repeat(4, 1fr); } .gallery__item--wide { grid-column: span 2; } }
.gallery__item { border-radius: 1rem; overflow: hidden; aspect-ratio: 1; }
.gallery__item--wide { aspect-ratio: auto; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* People ----------------------------------------------------------------------------- */
.person { display: grid; gap: var(--space-1); align-content: start; text-align: center; padding: var(--space-3) var(--space-3) var(--space-5); border-radius: var(--radius); background: color-mix(in srgb, var(--c-primary) 6%, var(--c-paper)); }
/* Portrait photo (3:4); without a photo it shows the initial on a tinted tile. */
.person__photo {
  display: grid; place-items: center; aspect-ratio: 3 / 4; margin-bottom: var(--space-3);
  border-radius: calc(var(--radius) * 0.7); overflow: hidden;
  background: color-mix(in srgb, var(--c-primary) 16%, var(--c-paper)); color: var(--c-primary);
  font-family: var(--font-display); font-size: 3.5rem;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.person__name { font-weight: 800; font-size: var(--fs-base); line-height: 1.25; }
.person__role { font-size: var(--fs-sm); color: color-mix(in srgb, var(--c-ink) 65%, var(--c-paper)); }

/* Bidang & korwil list under the committee cards */
.roster { margin-top: var(--space-16); }
.roster__title { font-family: var(--font-display); font-size: var(--fs-xl); text-align: center; margin-bottom: var(--space-6); }
.roster__list { display: grid; column-gap: var(--space-12); margin: 0; }
@media (min-width: 48rem) { .roster__list { grid-template-columns: 1fr 1fr; } }
.roster__row { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px dashed var(--line); }
.roster__row dt { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.roster__row dd { margin: 0; font-weight: 600; }

/* Sample marker (draft only) --------------------------------------------------------- */
.sample-note {
  display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px dashed currentColor; opacity: 0.8;
}

/* Forms -------------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-4); }
.form__row { display: grid; gap: var(--space-4); }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: var(--space-2); }
.form__label { font-weight: 700; font-size: var(--fs-sm); }
.form__hint { font-size: var(--fs-xs); color: var(--muted); }
.form__input, .form__select, .form__textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--c-ink) 22%, var(--c-paper));
  background: var(--c-paper); color: var(--c-ink);
}
.form__textarea { min-height: 8rem; resize: vertical; }
.form__hp { position: absolute; left: -9999px; }
.panel { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: calc(var(--radius) * 1.2); background: color-mix(in srgb, var(--c-primary) 7%, var(--c-paper)); color: var(--c-ink); }
.panel--gold { background: color-mix(in srgb, var(--c-secondary) 40%, var(--c-paper)); }

/* QRIS box --------------------------------------------------------------------------- */
.qris { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.qris__code {
  width: min(100%, 16rem); aspect-ratio: 1; border-radius: 1.25rem; display: grid; place-items: center; padding: var(--space-6);
  background: var(--c-paper); color: var(--c-ink); border: 2px dashed color-mix(in srgb, var(--c-ink) 35%, var(--c-paper));
  font-weight: 700; font-size: var(--fs-sm);
}

/* Map ----------------------------------------------------------------------------- */
.map { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; border: 0; }
.map iframe { width: 100%; height: 100%; border: 0; }

/* Search ----------------------------------------------------------------------------- */
.searchbar { display: flex; gap: var(--space-2); padding: var(--space-2); border-radius: 999px; background: var(--c-paper); max-width: 36rem; width: 100%; margin-inline: auto; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-ink) 18%, var(--c-paper)); }
.searchbar__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--space-4); color: var(--c-ink); }
.searchbar__input:focus-visible { outline: none; }
.searchbar:focus-within { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.searchbar .btn { --btn-bg: var(--c-accent); --btn-fg: var(--c-paper); }

.result { display: grid; gap: var(--space-2); padding-block: var(--space-6); border-bottom: 1px dashed var(--line); }
.result__type { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.result__title { font-size: var(--fs-xl); }
.result__title a { text-decoration: none; }
.result__title a:hover { text-decoration: underline; }

/* Article ---------------------------------------------------------------------------- */
.article-head { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.article-cover { display: grid; justify-items: center; margin-block: var(--space-12); }
/* Show the whole image: landscape photos fill the width, tall posters fit the screen height. */
.article-cover img { width: auto; max-width: 100%; max-height: min(85svh, 60rem); border-radius: var(--radius); }
.share { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px dashed var(--line); }
.sidebar { display: grid; gap: var(--space-6); }

/* Reveal on scroll (progressive; main.js adds .is-visible) ------------------------------ */
.js .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }