/*
 * layout.css — Page Shell & Shared Layout Utilities
 * ─────────────────────────────────────────────────────────────────
 * Minimal scaffold. Add page-specific stylesheets as content grows.
 * (e.g. css/pages/festival.css, css/pages/about.css)
 * ─────────────────────────────────────────────────────────────────
 */

/* ── Section title (shared base) ─────────────────────────────────
 * Common look for every "section heading" across the site
 * (.gallery-teaser__title, .gallery-section__title, .about-overview__title,
 * .sponsors-title, .volunteer-form-title, .books-page-title). Each class
 * keeps only its own alignment/margin/letter-spacing on top of this.
 * ─────────────────────────────────────────────────────────────────── */

.gallery-teaser__title,
.gallery-section__title,
.about-overview__title,
.sponsors-title,
.volunteer-form-title,
.books-page-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  color: var(--clr-ink);
}

/* ── Container ─────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Section ───────────────────────────────────────────────────── */

.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

/* ── Hero Placeholder ──────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--gutter);
  text-align: center;
  overflow: hidden;
}

/* Slider — slides sit behind content */
.hero__slider {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-color: var(--clr-ink);
  background-size: cover;
  background-position: top center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

/* Dark overlay so text stays readable over photos */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 40% 40% at center,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.45) 45%,
      rgba(0, 0, 0, 0.2) 70%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.3) 40%,
      rgba(0, 0, 0, 0.5) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-4);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--clr-on-accent);
  margin-bottom: var(--space-6);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.hero__title--sm {
  font-size: var(--text-2xl);
}

.hero__sub {
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  color: rgb(255, 255, 255);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-5);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.hero__art-forms {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.hero__art-forms li {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.hero__art-forms li + li::before {
  content: '·';
  margin: 0 var(--space-3);
  color: rgba(255, 255, 255, 0.35);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* .btn--outline's default ink-2 text is meant for light backgrounds (it's
   reused on the Gallery/Community Art sections) - on the hero's dark photo
   it needs to rest white instead. Hover is left alone since it already
   reads fine there (light accent-lt background behind ink text). */
.hero__actions .btn--outline {
  color: rgba(255, 255, 255, 0.9);
}

/* Static page hero (e.g. Events) — single image, no slider */
.hero--page {
  min-height: 55vh;
  background-color: var(--clr-ink);
  background-size: cover;
  background-position: center;
}

/* Tighten the gap below the hero on the Art Gallery and Volunteer pages */
.page-template-template-art-sales-php .hero--page + .section,
.page-template-template-volunteer-php .hero--page + .section,
.page-template-template-page-hero-php .hero--page + .section {
  padding-top: var(--space-8);
}

/* ── Buttons (minimal base — UI kit will override) ─────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--clr-accent);
  color: var(--clr-on-accent);
}

.btn--primary:hover {
  background: var(--clr-accent-dk);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn--outline {
  background: transparent;
  color: var(--clr-ink-2);
  border-color: var(--clr-border-dark);
}

.btn--outline:hover {
  color: var(--clr-ink);
  border-color: var(--clr-ink-2);
  background: var(--clr-accent-lt);
}

/* ── Content Placeholder ───────────────────────────────────────── */

.placeholder {
  background: var(--clr-surface);
  border: 1px dashed var(--clr-border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-12);
  text-align: center;
  color: var(--clr-ink-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── Footer ────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--clr-border);
  padding: var(--space-12) var(--gutter) var(--space-8);
  margin-top: var(--section-gap);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--space-8);
}

.site-footer__brand .nav__logo {
  margin-bottom: var(--space-4);
  flex-shrink: 1;
  min-width: 0;
}

.site-footer__brand .nav__logo-text {
  min-width: 0;
}

.site-footer__brand .nav__logo-primary {
  white-space: normal;
}

.site-footer__brand p {
  font-size: var(--text-sm);
  color: var(--clr-ink-3);
  line-height: var(--leading-normal);
  max-width: 280px;
}

.site-footer__col h4 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--clr-ink-2);
  margin-bottom: var(--space-4);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__col a {
  font-size: var(--text-sm);
  color: var(--clr-ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__col a:hover {
  color: var(--clr-accent);
}

.site-footer__bottom {
  max-width: var(--max-width);
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--clr-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--clr-ink-3);
  letter-spacing: var(--tracking-wide);
}

/* ── Interior Page Banner ──────────────────────────────────────── */

.page-banner {
  padding: var(--space-10) 0 var(--space-8);
  border-bottom: 1px solid var(--clr-border);
}

.page-banner__breadcrumb {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--clr-ink-3);
  margin-bottom: var(--space-3);
}

.page-banner__breadcrumb a {
  color: var(--clr-ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}

.page-banner__breadcrumb a:hover {
  color: var(--clr-accent);
}

.page-banner__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-tight);
  color: var(--clr-ink);
  line-height: var(--leading-tight);
}

/* ── Rendered content (block editor / the_content output) ───────────
 * Shared by every place raw post content gets rendered: page bodies
 * (.page-content), tabbed panels (.art-tabs__panel — Art Sales, Contest
 * Results), and the event card's Results preview
 * (.event-row__results-content, css/events.css). The global reset
 * (base.css) zeroes margin on every element, so paragraph/heading/list
 * spacing has to be restored here for all of them in one place — do not
 * re-declare this block elsewhere; add the new selector to this group
 * instead, so a fix here can never drift out of sync with the others. */

.page-content {
  max-width: 740px;
  margin: 0 auto;
}

.page-content h2,
.page-content h3,
.art-tabs__panel h2,
.art-tabs__panel h3,
.event-row__results-content h2,
.event-row__results-content h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--clr-ink);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.page-content h2,
.art-tabs__panel h2,
.event-row__results-content h2 { font-size: var(--text-xl); }

.page-content h3,
.art-tabs__panel h3,
.event-row__results-content h3 { font-size: var(--text-lg); }

.page-content h2:first-child,
.page-content h3:first-child,
.art-tabs__panel h2:first-child,
.art-tabs__panel h3:first-child,
.event-row__results-content h2:first-child,
.event-row__results-content h3:first-child {
  margin-top: 0;
}

.page-content p,
.page-content ul,
.page-content ol,
.art-tabs__panel p,
.art-tabs__panel ul,
.art-tabs__panel ol,
.event-row__results-content p,
.event-row__results-content ul,
.event-row__results-content ol {
  font-size: var(--text-base);
  color: var(--clr-ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

.page-content li,
.art-tabs__panel li,
.event-row__results-content li {
  margin-bottom: var(--space-2);
}

.page-content a {
  color: var(--clr-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-content a:hover {
  color: var(--clr-accent-dk);
}

/* ── AEI Books ─────────────────────────────────────────────────── */

.books-intro {
  max-width: 740px;
  margin: 0 auto var(--space-12);
}

.books-intro p {
  font-size: var(--text-base);
  color: var(--clr-ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
}

.books-section-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--clr-ink);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--clr-border);
}

.books-contact-note {
  font-size: var(--text-sm);
  color: var(--clr-ink-3);
  margin-bottom: var(--space-8);
  margin-top: calc(-1 * var(--space-4));
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}

/* Shared by the books gallery (.book-card) and the general gallery
   (.gallery-card) - same card shape, different info-block contents below. */
.book-card,
.gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-surface);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.book-card:hover,
.gallery-card:hover {
  box-shadow: var(--shadow-md);
}

.book-card__cover,
.gallery-card__cover {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: top;
  border-bottom: 1px solid var(--clr-border);
}

.book-card__info {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.book-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--clr-ink);
  line-height: var(--leading-snug);
}

.book-card__meta {
  font-size: var(--text-xs);
  color: var(--clr-ink-3);
  line-height: var(--leading-normal);
}

.book-card__desc {
  font-size: var(--text-sm);
  color: var(--clr-ink-2);
  line-height: var(--leading-normal);
}

.book-card__price {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--clr-accent);
}

.book-card__contact {
  font-size: var(--text-xs);
  color: var(--clr-ink-3);
}

.book-card__contact a {
  color: var(--clr-accent);
}

.book-card__btn,
a.book-card__btn {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding: var(--space-2) var(--space-4);
  background: var(--clr-accent);
  color: var(--clr-on-accent) !important;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
  align-self: flex-start;
}

.book-card__btn:hover,
a.book-card__btn:hover {
  background: var(--clr-accent-dk);
}

/* Gallery card - cover-only display for books gallery (card shape shared
   with .book-card, declared above) */

.gallery-card__info {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gallery-card__title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--clr-ink);
  line-height: var(--leading-snug);
}

.gallery-card__author {
  font-size: var(--text-xs);
  color: var(--clr-ink-3);
  line-height: var(--leading-normal);
}

.books-library {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--clr-border);
}

.books-library h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  color: var(--clr-ink);
  margin-bottom: var(--space-4);
}

.books-library > p {
  font-size: var(--text-base);
  color: var(--clr-ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
  max-width: 680px;
}

.books-library__list {
  list-style: disc;
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.books-library__list li {
  font-size: var(--text-sm);
  color: var(--clr-ink-2);
  line-height: var(--leading-normal);
}

/* ── Art Sales Tabs ────────────────────────────────────────────── */

.art-sales-intro {
  max-width: 740px;
  margin-bottom: var(--space-10);
}

.art-sales-intro p {
  font-size: var(--text-base);
  color: var(--clr-ink-2);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-3);
}

.art-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--clr-border);
  padding-bottom: var(--space-3);
}

.art-tabs__tab {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--clr-ink-3);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.art-tabs__tab:hover {
  color: var(--clr-ink);
  background: var(--clr-accent-lt);
}

.art-tabs__tab.is-active {
  color: var(--clr-accent);
  border-color: var(--clr-accent);
  background: var(--clr-accent-lt);
}

.art-tabs__panel {
  display: none;
}

.art-tabs__panel.is-active {
  display: block;
}

/* .art-tabs__panel prose spacing (p/ul/ol/li/h2/h3) is declared in the
   shared "Rendered content" block above, alongside .page-content and
   .event-row__results-content. */

.art-tabs__desc {
  font-size: var(--text-base);
  color: var(--clr-ink-2);
  line-height: var(--leading-normal);
  max-width: 740px;
  margin-bottom: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background: var(--clr-surface);
  border-left: 3px solid var(--clr-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.books-page-title {
  margin-bottom: var(--space-8);
}

/* Shared "nothing here yet" message - also used by .events-empty
   (css/events.css) and .contest-results__empty (css/contest-results.css). */
.books-empty,
.events-empty,
.contest-results__empty {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--clr-ink-3);
}

.books-empty a,
.events-empty a,
.contest-results__empty a {
  color: var(--clr-accent);
}

/* ── Responsive ────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .hero__title {
    font-size: var(--text-2xl);
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}