/*
 * Vivid Lark Gallery Theme – main.css
 * Clean, minimal gallery aesthetic.
 * Mobile-first, accessible, no framework dependencies.
 */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:         #ffffff;
  --color-surface:    #f8f8f6;
  --color-border:     #e0ddd8;
  --color-text:       #1a1a1a;
  --color-text-muted: #6b6660;
  --color-accent:     #2c2c2c;
  --color-link:       #1a1a1a;
  --color-link-hover: #555550;
  --color-badge-warn: #b45309;

  --font-serif:   'Georgia', 'Times New Roman', serif;
  --font-sans:    system-ui, -apple-system, 'Arial', sans-serif;

  --spacing-xs:   0.25rem;
  --spacing-sm:   0.5rem;
  --spacing-md:   1rem;
  --spacing-lg:   2rem;
  --spacing-xl:   3rem;
  --spacing-2xl:  5rem;

  --max-width:    1280px;
  --grid-gap:     1.5rem;

  --transition:   0.2s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-link-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--font-sans); line-height: 1.2; }
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); }
h3 { font-size: 1.2rem; }

p { margin-bottom: var(--spacing-md); }
p:last-child { margin-bottom: 0; }

/* ── Layout wrapper ───────────────────────────────────────── */
.site-wrapper { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); }

/* ── Site header ──────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) 0;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 100;
}
.site-header__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}
.site-logo { font-family: var(--font-sans); font-size: 1.4rem; letter-spacing: 0.05em; }
.site-logo a { text-decoration: none; }
.site-nav { display: flex; gap: var(--spacing-lg); list-style: none; }
.site-nav a { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; }

.lark-page { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md); }
.lark-front-page { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md); }

/* ── Prose list alignment ─────────────────────────────────── */
.lark-page ul, .lark-page ol,
.lark-single ul, .lark-single ol {
  margin-left: 25px;
}

/* ── Archive pages ────────────────────────────────────────── */
.lark-archive { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md); }

.archive-header { margin-bottom: var(--spacing-xl); }
.archive-title { margin-bottom: var(--spacing-xs); }
.archive-count { color: var(--color-text-muted); font-size: 0.9rem; }

/* ── Filters ──────────────────────────────────────────────── */
.archive-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.filter-group { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); align-items: center; width: 100%; }
.filter-pill {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.8rem;
  transition: all var(--transition);
  text-decoration: none;
}
.filter-pill:hover, .filter-pill.is-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  text-decoration: none;
}
.filter-select {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.875rem;
  background: var(--color-bg);
  cursor: pointer;
}

/* ── Artist grid ──────────────────────────────────────────── */
.artist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--grid-gap);
}
.artist-card { overflow: hidden; }
.artist-card__link { display: block; text-decoration: none; }
.artist-card__image { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.artist-card__image--placeholder {
  width: 100%; aspect-ratio: 3/4;
  background: var(--color-surface);
}
.artist-card__info { padding: var(--spacing-sm) 0; }
.artist-card__name { font-size: 1rem; font-family: var(--font-sans); margin-bottom: var(--spacing-xs); }
.artist-card__location { font-size: 0.8rem; color: var(--color-text-muted); }

/* ── Artwork grid ─────────────────────────────────────────── */
.artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--grid-gap);
}
.artwork-card { overflow: hidden; }
.artwork-card__link { display: block; text-decoration: none; }
.artwork-card__link img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.artwork-card__no-image { width: 100%; aspect-ratio: 1; background: var(--color-surface); }
.artwork-card__caption { padding: var(--spacing-sm) 0; }
.artwork-card__title { font-size: 0.95rem; font-family: var(--font-sans); }
.artwork-card__artist, .artwork-card__meta { font-size: 0.8rem; color: var(--color-text-muted); }

/* ── Exhibition list ──────────────────────────────────────── */
.exhibition-list-full { display: flex; flex-direction: column; gap: var(--spacing-xl); }
.exhibition-row__link {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-lg);
  text-decoration: none;
  align-items: start;
}
@media (max-width: 640px) {
  .exhibition-row__link { grid-template-columns: 1fr; }
}
.exhibition-row__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.exhibition-row__image--placeholder { width: 100%; aspect-ratio: 4/3; background: var(--color-surface); }
.exhibition-row__title { font-size: 1.3rem; margin-bottom: var(--spacing-xs); }
.exhibition-row__dates { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: var(--spacing-sm); }
.exhibition-row__excerpt { color: var(--color-text-muted); font-size: 0.9rem; }
.exhibition-row__artist-count { font-size: 0.8rem; color: var(--color-text-muted); margin-top: var(--spacing-sm); }

/* ── Single artist ────────────────────────────────────────── */
.lark-single { max-width: var(--max-width); margin: 0 auto; padding: var(--spacing-xl) var(--spacing-md); }

.artist-header {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
  align-items: start;
}
@media (max-width: 680px) {
  .artist-header { grid-template-columns: 1fr; }
}
.artist-header__image img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.artist-name { margin-bottom: var(--spacing-sm); }
.artist-location { color: var(--color-text-muted); margin-bottom: var(--spacing-md); }
.artist-links { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.artist-link {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  padding-bottom: 1px;
}

.section-heading { margin-bottom: var(--spacing-lg); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.1em; }
.artist-bio, .artist-statement, .artist-artworks, .artist-exhibitions, .artwork-exhibitions { margin-bottom: var(--spacing-2xl); }
.artwork-exhibitions { margin-top: var(--spacing-xl); }
.artwork-exhibitions .exhibition-list { margin-left: 0; }
.artist-statement__text { border-left: 3px solid var(--color-border); padding-left: var(--spacing-lg); font-style: italic; }

.exhibition-list { list-style: none; }
.exhibition-list__item { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); display: flex; gap: var(--spacing-md); align-items: baseline; }
.exhibition-year { font-size: 0.8rem; color: var(--color-text-muted); }

/* ── Single artwork ───────────────────────────────────────── */
.lark-single--artwork .artwork-detail {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--spacing-xl);
  align-items: start;
}
@media (max-width: 860px) {
  .lark-single--artwork .artwork-detail { grid-template-columns: 1fr; }
}
.artwork-detail__primary-image { display: block; width: auto; max-width: 100%; height: auto; object-fit: contain; }
.artwork-gallery { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-sm); }
.artwork-gallery__item img { width: 80px; height: 80px; object-fit: cover; cursor: pointer; }
.artwork-title { margin-bottom: var(--spacing-sm); }
.artwork-artist { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: var(--spacing-lg); }
.artwork-meta { width: 100%; border-collapse: collapse; margin-bottom: var(--spacing-lg); }
.artwork-meta th, .artwork-meta td { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.artwork-meta th { width: 36%; color: var(--color-text-muted); font-weight: normal; }
.artwork-status { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.8rem; background: var(--color-surface); }
.artwork-status--available { color: #166534; background: #dcfce7; }
.artwork-status--sold { color: #991b1b; background: #fee2e2; }
.artwork-description { margin-bottom: var(--spacing-lg); font-size: 0.95rem; }

/* ── Single exhibition ────────────────────────────────────── */
.exhibition-hero img { width: 100%; max-height: 480px; object-fit: cover; margin-bottom: var(--spacing-xl); }
.exhibition-header__info { margin-bottom: var(--spacing-xl); }
.exhibition-title { margin-bottom: var(--spacing-md); }
.exhibition-meta { margin-bottom: var(--spacing-lg); }
.exhibition-dates, .exhibition-location, .exhibition-curator { font-size: 0.9rem; color: var(--color-text-muted); }
.artist-pill-list { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); list-style: none; margin-top: var(--spacing-sm); }
.artist-pill {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all var(--transition);
}
.artist-pill:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); text-decoration: none; }
.exhibition-artworks, .exhibition-gallery, .exhibition-description { margin-bottom: var(--spacing-2xl); }
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--grid-gap); }
.image-grid__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.image-grid figcaption { font-size: 0.8rem; color: var(--color-text-muted); padding: var(--spacing-xs) 0; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  border: 1px solid var(--color-accent);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.btn--enquire { background: var(--color-accent); color: #fff; }
.btn--enquire:hover { background: transparent; color: var(--color-accent); text-decoration: none; }

/* ── Review badge (admin only) ────────────────────────────── */
.lark-review-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: #fef3c7;
  color: var(--color-badge-warn);
  border: 1px solid #fcd34d;
  border-radius: 3px;
  font-size: 0.75rem;
  margin-bottom: var(--spacing-sm);
}

/* ── Pagination ───────────────────────────────────────────── */
.pagination { margin-top: var(--spacing-2xl); display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; }
.pagination .page-numbers {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--color-border);
  text-decoration: none;
  font-size: 0.9rem;
}
.pagination .page-numbers.current { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* ── No results ───────────────────────────────────────────── */
.no-results { color: var(--color-text-muted); padding: var(--spacing-2xl) 0; }

/* ── Site footer ──────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-xl) var(--spacing-md);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Footer nav links */
.site-footer__nav {
  margin-bottom: var(--spacing-sm);
}
.site-footer__nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: normal;
  transition: color 0.15s ease;
}
.site-footer__nav a:hover {
  color: var(--color-text);
}

/* Scroll-to-top button */
#lark-scroll-top {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-bg, #fff);
  border: none;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#lark-scroll-top.lark-scroll-top--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#lark-scroll-top:hover {
  background: var(--color-accent, #555);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .artwork-grid { grid-template-columns: repeat(2, 1fr); }
  .artist-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile nav / hamburger ───────────────────────────────── */
.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.site-nav__toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
/* Animate to X when open */
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 680px) {
  .site-nav__toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    gap: 0;
    padding: var(--spacing-sm) 0;
    z-index: 200;
    list-style: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav .site-nav__item,
  .site-nav li { display: block; }
  .site-nav a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
  }
  .site-nav li:last-child a { border-bottom: none; }

  .site-header { position: relative; } /* needed for absolute nav dropdown */
}

/* ── Auth navigation ──────────────────────────────────────── */
.site-auth-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* Logged-in: avatar + name pill linking to dashboard */
.site-auth-nav__dashboard {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color var(--transition), background var(--transition);
}
.site-auth-nav__dashboard:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  text-decoration: none;
}
.site-auth-nav__avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.site-auth-nav__avatar--initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent, #6b7280);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.site-auth-nav__name {
  font-size: 0.85rem;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Logged-in: logout link */
.site-auth-nav__logout {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.3rem 0.4rem;
  transition: color var(--transition);
}
.site-auth-nav__logout:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* Logged-out: Log in link */
.site-auth-nav__login {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.35rem 0.5rem;
  transition: color var(--transition);
}
.site-auth-nav__login:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

.wp-block-separator {
    border: none;
    border-top: 5px solid;
    color: #aaa;
}

/* Logged-out: Join button */
.site-auth-nav__join {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  background: var(--color-accent);
  color: #fff;
  transition: background var(--transition), color var(--transition);
}
.site-auth-nav__join:hover {
  background: transparent;
  color: var(--color-accent);
  text-decoration: none;
}

/* Keep header inner aligned with the new third element */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* On small screens, collapse auth nav below the main row */
@media (max-width: 600px) {
  .site-auth-nav__name { display: none; }
  .site-auth-nav__join,
  .site-auth-nav__login { font-size: 0.8rem; padding: 0.3rem 0.6rem; }
}

/* ── Exhibition labels (Open Call / Current) ──────────────── */
.exhibition-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25em 0.65em;
  border-radius: 2px;
  margin-bottom: var(--spacing-xs);
}

.exhibition-label--open-call {
  background: #fff4e5;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.exhibition-label--current {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

/* ── Exhibition row — View Exhibition CTA ─────────────────── */
.exhibition-row__cta {
  display: inline-block;
  margin-top: var(--spacing-md);
  padding: 0.45em 1.1em;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.exhibition-row__link:hover .exhibition-row__cta {
  background: var(--color-accent);
  color: #fff;
}

/* ── Single exhibition — remove hero gap when no image ───── */
.exhibition-header__info {
  padding-top: var(--spacing-md);
}

/* ── WordPress block separator ────────────────────────────── */
.wp-block-separator {
  border-color: #ccc;
  color: #ccc;
}

/* ── Exhibition archive — partial-link row layout ─────────── */
/* Row is now a plain block; image and title are independent links */
.exhibition-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}
@media (max-width: 640px) {
  .exhibition-row { grid-template-columns: 1fr; }
}
.exhibition-row__image-link {
  display: block;
  text-decoration: none;
}
.exhibition-row__image-link img,
.exhibition-row__image-link .exhibition-row__image--placeholder {
  display: block;
  width: 100%;
}
.exhibition-row__title a {
  text-decoration: none;
  color: inherit;
}
.exhibition-row__title a:hover {
  text-decoration: underline;
}

/* ── Purchase enquiry modal ───────────────────────────────── */
.enquiry-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}
.enquiry-modal-backdrop.is-open {
  display: flex;
}

.enquiry-modal {
  background: var(--color-bg);
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
}

.enquiry-modal__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  transition: color var(--transition);
  padding: 0;
}
.enquiry-modal__close:hover { color: var(--color-text); }
.enquiry-modal__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.enquiry-modal__eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}
.enquiry-modal__title {
  font-size: 1.2rem;
  margin-bottom: var(--spacing-xs);
}
.enquiry-modal__subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.enquiry-modal__field {
  margin-bottom: var(--spacing-md);
}
.enquiry-modal__label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}
.enquiry-modal__label .optional {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}
.enquiry-modal__input,
.enquiry-modal__textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text);
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
}
.enquiry-modal__input:focus,
.enquiry-modal__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.enquiry-modal__textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.enquiry-modal__error {
  font-size: 0.85rem;
  color: #991b1b;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid #fca5a5;
  background: #fef2f2;
}

.enquiry-modal__actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}
.enquiry-modal__submit {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  padding: 0.65rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.enquiry-modal__submit:hover {
  background: transparent;
  color: var(--color-accent);
}
.enquiry-modal__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.enquiry-modal__cancel {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.65rem 0.5rem;
  transition: color var(--transition);
}
.enquiry-modal__cancel:hover { color: var(--color-text); }

.enquiry-modal__success {
  text-align: center;
  padding: var(--spacing-xl) 0 var(--spacing-md);
}
.enquiry-modal__success-mark {
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  display: block;
}
.enquiry-modal__success h2 {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-sm);
}
.enquiry-modal__success p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Prevent body scroll while modal is open */
body.enquiry-modal-open { overflow: hidden; }

@media (max-width: 560px) {
  .enquiry-modal { padding: var(--spacing-lg) var(--spacing-md); max-height: 100vh; }
}


/* ══════════════════════════════════════════════════════════════
   Exhibition artwork & artist cards
   Classes prefixed exh- to scope these to the exhibition context
   without colliding with .artwork-card or .artist-card used on
   archive pages.
   ══════════════════════════════════════════════════════════════ */

/* ── Shared section spacing ───────────────────────────────── */
.exh-section {
  margin-bottom: var(--spacing-2xl);
}

/* The .section-heading rule already exists in main.css and covers
   the h2 inside these sections — no override needed. */


/* ── Artwork grid ─────────────────────────────────────────── */
.exh-artwork-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1024px) {
  .exh-artwork-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .exh-artwork-grid {
    grid-template-columns: 1fr;
  }
}


/* ── Artwork card ─────────────────────────────────────────── */
.exh-artwork-card {
  display: flex;
  flex-direction: column;
  min-width: 0;                        /* prevent grid blowout */
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  overflow: hidden;
}

/* Image link — fixed aspect ratio container */
.exh-artwork-card__image-link {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface);
  text-decoration: none;
}

/* Actual <img> produced by get_the_post_thumbnail */
.exh-artwork-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}

.exh-artwork-card:hover .exh-artwork-card__image {
  transform: scale(1.03);
}

/* Placeholder when no featured image is set */
.exh-artwork-card__image--placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-surface);
}

/* Card body */
.exh-artwork-card__body {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.exh-artwork-card__title {
  font-size: 1rem;
  font-family: var(--font-sans);
  line-height: 1.25;
  margin: 0 0 var(--spacing-xs);
}

.exh-artwork-card__title a {
  color: var(--color-text);
  text-decoration: none;
}
.exh-artwork-card__title a:hover {
  text-decoration: underline;
}

.exh-artwork-card__artist {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-xs);
}
.exh-artwork-card__artist a {
  color: var(--color-text-muted);
}
.exh-artwork-card__artist a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.exh-artwork-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-xs);
}

/* View Work link — pushed to bottom of the card body */
.exh-artwork-card__cta {
  display: inline-block;
  margin-top: auto;
  padding-top: var(--spacing-sm);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity var(--transition);
}
.exh-artwork-card__cta:hover {
  opacity: 0.7;
  text-decoration: none;
}


/* ── Artist grid ──────────────────────────────────────────── */
.exh-artist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 1024px) {
  .exh-artist-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .exh-artist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .exh-artist-grid {
    grid-template-columns: 1fr;
  }
}


/* ── Artist card ──────────────────────────────────────────── */
.exh-artist-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  min-width: 0;
}

.exh-artist-card__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition);
}
.exh-artist-card__link:hover {
  background: var(--color-surface);
  text-decoration: none;
}
.exh-artist-card__link:hover .exh-artist-card__name {
  text-decoration: underline;
}

/* Avatar circle */
.exh-artist-card__avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.exh-artist-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Initials fallback — matches the site-auth-nav__avatar--initial pattern */
.exh-artist-card__initials {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  line-height: 1;
  user-select: none;
}

.exh-artist-card__body {
  min-width: 0;
  flex: 1;
}

.exh-artist-card__name {
  font-size: 0.95rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  margin: 0 0 var(--spacing-xs);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exh-artist-card__count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--spacing-xs);
}

.exh-artist-card__cta {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent);
}


/* ── Exhibition hero image ────────────────────────────────── */
/* Overrides the bare .exhibition-hero img rule above for the
   card-based template; keeps aspect-ratio consistent.         */
.lark-single--exhibition .exhibition-hero {
  margin-bottom: var(--spacing-xl);
}

.lark-single--exhibition .exhibition-hero img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  display: block;
}


/* ══════════════════════════════════════════════════════════════
   Exhibition artwork lightbox
   ══════════════════════════════════════════════════════════════ */

/* Backdrop — full-screen overlay */
.exh-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  gap: var(--spacing-md);
}

/* hidden attribute hides it; remove to open */
.exh-lightbox-backdrop[hidden] { display: none; }

/* Prevent page scroll while open */
body.exh-lightbox-open { overflow: hidden; }

/* ── Close button ─────────────────────────────────────────── */
.exh-lightbox__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
  z-index: 2;
}
.exh-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.exh-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Prev / next nav buttons ──────────────────────────────── */
.exh-lightbox__nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.exh-lightbox__nav:hover  { background: rgba(255, 255, 255, 0.22); }
.exh-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Stage: image + info side by side ────────────────────── */
/* ── Stage panel — the white-background container ────────── */
.exh-lightbox__panel {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1100px;
  max-height: calc(100vh - 4rem);
  background: var(--color-bg);
  overflow: hidden;
}

/* ── Stage: image + info side by side ────────────────────── */
.exh-lightbox__stage {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-height: calc(100vh - 4rem);
  overflow: hidden;
}

/* Image column — takes remaining space, constrains to viewport */
.exh-lightbox__image-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: calc(100vh - 4rem);
  overflow: hidden;
  background: var(--color-surface);
}

.exh-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 4rem);
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.15s ease;
}

.exh-lightbox__image.is-loading {
  opacity: 0.35;
}

/* Info panel — fixed width, scrollable if needed */
.exh-lightbox__info {
  flex: 0 0 240px;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
}

.exh-lightbox__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}

.exh-lightbox__artist {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}
.exh-lightbox__artist a {
  color: var(--color-text-muted);
  text-decoration: underline;
}
.exh-lightbox__artist a:hover { color: var(--color-text); }

.exh-lightbox__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}
.exh-lightbox__meta[hidden] { display: none; }

.exh-lightbox__counter {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin: 0;
  margin-top: auto;     /* push counter + CTA to bottom of panel */
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.exh-lightbox__cta {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 0.5em 1.1em;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
  align-self: flex-start;
}
.exh-lightbox__cta:hover {
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
}
.exh-lightbox__cta:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

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

/* Tablet: stack image above info inside the panel */
@media (max-width: 800px) {
  .exh-lightbox__panel {
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  .exh-lightbox__stage {
    flex-direction: column;
    align-items: stretch;
    max-height: none;
    overflow: visible;
  }

  .exh-lightbox__image-wrap {
    max-height: 55vh;
  }

  .exh-lightbox__image {
    max-height: 55vh;
  }

  .exh-lightbox__info {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    border-left: none;
    border-top: 1px solid var(--color-border);
  }
}

/* Mobile: shrink padding, move nav arrows below the panel */
@media (max-width: 560px) {
  .exh-lightbox-backdrop {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  .exh-lightbox__panel {
    order: 1;
    width: 100%;
  }

  .exh-lightbox__nav--prev { order: 2; }
  .exh-lightbox__nav--next { order: 3; }

  .exh-lightbox__nav {
    width: 44px;
    height: 44px;
  }

  .exh-lightbox__image-wrap {
    max-height: 50vh;
  }
  .exh-lightbox__image {
    max-height: 50vh;
  }
}


/* ══════════════════════════════════════════════════════════════
   Share bar
   ══════════════════════════════════════════════════════════════ */

.lark-share {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--spacing-xl);
}

.lark-share__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.lark-share__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  list-style: none;
}

/* Shared button/link treatment */
.lark-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.lark-share__btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

.lark-share__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.lark-share__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

/* "Copied!" feedback state */
.lark-share__btn--copy.is-copied {
  border-color: #166534;
  background: #dcfce7;
  color: #166534;
}

@media (max-width: 480px) {
  .lark-share {
    gap: var(--spacing-sm);
  }
  .lark-share__btn-label {
    /* hide text labels on very small screens, keep icons readable */
    display: none;
  }
  .lark-share__btn {
    padding: 0.4rem;
    border-radius: 50%;
  }
  .lark-share__icon {
    width: 16px;
    height: 16px;
  }
}

/* ── VividArtMagazine: photography / video notice ──────────────────────────── */
.lark-photo-notice {
    display: flex;
    gap: var(--spacing-sm, 0.75rem);
    align-items: flex-start;
    background: #fafaf7;
    border: 1px solid #e5e2d5;
    border-left: 4px solid var(--color-gold, #b8973a);
    border-radius: 4px;
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.25rem);
    margin: var(--spacing-lg, 1.5rem) 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-muted, #666);
}

.lark-photo-notice__icon {
    margin: 0;
    font-size: 1.1rem;
    flex-shrink: 0;
    padding-top: 0.1em;
}

.lark-photo-notice__text {
    margin: 0;
}

.lark-photo-notice__text strong {
    color: var(--color-text, #1a1a1a);
}
