/**
 * Exhibitions: the /exhibitions index (patterns/template-archive-exhibition.php) and the single
 * exhibition / fair page (patterns/template-single-exhibition.php). Loaded on both. The single
 * page also loads assets/css/artist.css for the components it shares with the artist page — the
 * hero (.cg-artist-hero), the anchor row (.cg-artist-anchors), the works grid (.cg-work-grid, hung),
 * the buttons (.cg-button) and the closing call to action (.cg-artist-cta) — and this file adds
 * the fair-specific sections: the facts-and-text intro, the artist strip, the per-artist work
 * groups and the visit block. Tokens from theme.json presets.
 */

/* ---------- Shared ---------- */
.cg-exhibition-kicker { margin: 0 0 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.cg-artist-hero .cg-exhibition-kicker { opacity: .85; }
.cg-artist-hero.is-plain .cg-exhibition-kicker { color: var(--wp--preset--color--accent-2); }

/* Split hero: a portrait featured image (the fair's poster) shown whole at the right on a field of its own
   ground colour (--cg-hero-bg, sampled from the image's corners), the title text at the left, both in the
   page column; on phones the poster sits above the text. The text and credit keep their hero styling but
   flow instead of floating, and the image is contained, never cropped. */
.cg-exhibition-hero.is-split { --cg-gutter: max(var(--wp--style--root--padding-left, 20px), calc((100% - var(--wp--style--global--wide-size, 1400px)) / 2)); height: auto; min-height: min(78vh, 760px); background: var(--cg-hero-bg, #111); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: clamp(30px, 4vw, 60px); padding: clamp(40px, 6vw, 80px) var(--cg-gutter) 0; }
.cg-exhibition-hero.is-split::after { content: none; }
.cg-exhibition-hero.is-split .cg-artist-hero-text { position: static; order: -1; padding: 0 0 clamp(40px, 6vw, 80px); left: auto; right: auto; }
.cg-exhibition-hero.is-split .cg-exhibition-poster { margin: 0; justify-self: end; width: min(100%, 520px); }
.cg-exhibition-hero.is-split .cg-artist-hero-image { width: 100%; height: auto; max-height: min(70vh, 700px); object-fit: contain; object-position: bottom right; }
.cg-exhibition-hero.is-split .cg-artist-hero-credit { position: static; text-align: right; margin: 10px 0 14px; right: auto; }
@media (max-width: 900px) {
	.cg-exhibition-hero.is-split { grid-template-columns: 1fr; align-items: start; min-height: 0; padding-top: clamp(30px, 6vw, 60px); }
	.cg-exhibition-hero.is-split .cg-exhibition-poster { justify-self: center; width: min(100%, 360px); order: -1; }
	.cg-exhibition-hero.is-split .cg-artist-hero-image { max-height: 60vh; object-position: center; }
	.cg-exhibition-hero.is-split .cg-artist-hero-credit { text-align: center; }
	.cg-exhibition-hero.is-split .cg-artist-hero-text { order: 0; padding-bottom: 40px; }
}

/* Full-bleed hero on narrow screens: the credit (long here — image maker and photographer) leaves the
   bottom corner, where it would run into the title's tagline, and sits at the top right of the hero,
   which is empty there; it may take two lines. */
@media (max-width: 900px) {
	.cg-exhibition-hero:not(.is-split) .cg-artist-hero-credit { top: 14px; bottom: auto; left: var(--cg-gutter); right: var(--cg-gutter); text-align: right; line-height: 1.4; }
}

/* ---------- Index ---------- */
/* Two groups, each opened by a small uppercase head on a light rule: "Current and upcoming" as feature cards
   (image beside text), "Past" as compact cards in three columns. */
.cg-exhibitions + .cg-exhibitions { margin-top: clamp(50px, 7vw, 90px); }
.cg-exhibitions-head { margin: 0 0 clamp(24px, 3vw, 36px); padding-bottom: 14px; border-bottom: 1px solid var(--wp--preset--color--accent-4); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.cg-exhibition-card { display: grid; gap: clamp(16px, 2vw, 24px); }
.cg-exhibition-card + .cg-exhibition-card { margin-top: clamp(40px, 6vw, 80px); }
.cg-exhibition-card.is-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; gap: clamp(30px, 5vw, 70px); }
/* A portrait image (a poster) takes the narrower column and the text the wider one. */
.cg-exhibition-card.is-feature.is-portrait { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; }
.cg-exhibition-card.is-feature.is-portrait .cg-exhibition-card-image { max-width: 420px; }
@media (max-width: 900px) { .cg-exhibition-card.is-feature, .cg-exhibition-card.is-feature.is-portrait { grid-template-columns: 1fr; } }
.cg-exhibition-card-media { display: block; color: inherit; }
.cg-exhibition-card-image { width: 100%; height: auto; display: block; transition: opacity .3s ease; }
.cg-exhibition-card-media:hover .cg-exhibition-card-image { opacity: .85; }
.cg-exhibition-card-blank { display: block; aspect-ratio: 4 / 3; background: var(--wp--preset--color--accent-5); }
.cg-exhibition-card-title { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.cg-exhibition-card:not(.is-feature) .cg-exhibition-card-title { font-size: 1.25rem; line-height: 1.3; }
.cg-exhibition-card-title a { color: inherit; text-decoration: none; }
.cg-exhibition-card-title a:hover, .cg-exhibition-card-title a:focus-visible { text-decoration: underline; }
/* Place and dates: body size, a little weight — the same accent as the artist pages' "On view at …" line. */
.cg-exhibition-card-meta { margin: 12px 0 0; font-size: 15px; font-weight: 500; letter-spacing: .02em; }
.cg-exhibition-card:not(.is-feature) .cg-exhibition-card-meta { margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--wp--preset--color--accent-2); }
.cg-exhibition-card-artists { margin: 18px 0 0; font-size: 15px; color: var(--wp--preset--color--accent-2); }
.cg-exhibition-card-summary { margin: 18px 0 0; max-width: 520px; }
.cg-exhibition-card-more { margin: 26px 0 0; }
.cg-exhibition-card-more .cg-button, .cg-exhibition-card-more a { display: inline-block; background: var(--wp--preset--color--accent-2); color: var(--wp--preset--color--base); padding: 14px 32px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; transition: background-color 180ms ease, color 180ms ease; }
.cg-exhibition-card-more a:hover, .cg-exhibition-card-more a:focus-visible { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); }
.cg-exhibition-card-more a:focus { outline: none; }
.cg-exhibition-card-more a:focus-visible { outline: 1px solid var(--wp--preset--color--accent-4); outline-offset: 2px; }
.cg-exhibitions-past { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 5vw, 60px) clamp(30px, 4vw, 50px); }
@media (max-width: 900px) { .cg-exhibitions-past { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cg-exhibitions-past { grid-template-columns: 1fr; } }
.cg-exhibitions-past .cg-exhibition-card + .cg-exhibition-card { margin-top: 0; }

/* ---------- Single page ---------- */
/* Page column: like the artist page, every section below the hero sits in the theme's wide column,
   never closer to the viewport edge than the root gutter. */
.cg-exhibition-intro, .cg-exhibition-artists, .cg-exhibition-visit { --cg-gutter: max(var(--wp--style--root--padding-left, 20px), calc((100% - var(--wp--style--global--wide-size, 1400px)) / 2)); padding-inline: var(--cg-gutter); padding-top: clamp(40px, 6vw, 80px); scroll-margin-top: 65px; }
.cg-exhibition-artists h2, .cg-exhibition-visit h2 { margin: 0 0 clamp(28px, 4vw, 44px); font-size: clamp(1.75rem, 3vw, 2.5rem); }
/* The anchor row: the way back to the index sits at the right end. */
.cg-exhibition-anchors .cg-exhibition-all { margin-left: auto; }

/* Intro: facts as a definition list on the left, the exhibition's text on the right. */
.cg-exhibition-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(30px, 4vw, 50px); }
@media (max-width: 900px) { .cg-exhibition-intro { grid-template-columns: 1fr; } }
.cg-exhibition-facts { margin: 0; font-size: 14px; max-width: 420px; }
.cg-exhibition-facts > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--wp--preset--color--accent-5); }
.cg-exhibition-facts > div:first-child { border-top: 1px solid var(--wp--preset--color--accent-5); }
.cg-exhibition-facts dt { margin: 0; padding-top: 3px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--accent-2); }
.cg-exhibition-facts dd { margin: 0; line-height: 1.5; }
.cg-exhibition-facts a { color: inherit; }
.cg-exhibition-text { max-width: 720px; }
.cg-exhibition-text > p:first-child { font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.5; margin-top: 0; }
.cg-exhibition-text p { margin: 0 0 1em; }
.cg-exhibition-text p:last-child { margin-bottom: 0; }

/* Artist strip: one tile per artist, the artist page's hero image (a detail meant to be cropped) filling a
   4:5 box at its focal point, the name under it, five across, three on tablets, two on phones. */
.cg-exhibition-artist-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px); }
@media (max-width: 900px) { .cg-exhibition-artist-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cg-exhibition-artist-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cg-exhibition-artist a { display: block; color: inherit; text-decoration: none; }
.cg-exhibition-artist-image { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.cg-exhibition-artist-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }
.cg-exhibition-artist-blank { display: block; width: 100%; height: 100%; background: var(--wp--preset--color--accent-5); }
.cg-exhibition-artist-name { display: block; margin-top: 12px; font-family: var(--wp--preset--font-family--inter); font-weight: 400; font-size: 1rem; line-height: 1.3; }
.cg-exhibition-artist a:hover img, .cg-exhibition-artist a:focus-visible img { opacity: .85; }
.cg-exhibition-artist a:hover .cg-exhibition-artist-name, .cg-exhibition-artist a:focus-visible .cg-exhibition-artist-name { text-decoration: underline; }

/* Works: one group per artist, opened by the name (a link to the artist page) and the series on a light rule;
   the grid itself is the artist pages' hung wall (assets/css/artist.css). */
.cg-exhibition-group + .cg-exhibition-group { margin-top: clamp(60px, 8vw, 110px); }
.cg-exhibition-group { scroll-margin-top: 65px; }
.cg-exhibition-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px; margin: 0 0 clamp(24px, 3vw, 36px); padding-top: 18px; border-top: 1px solid var(--wp--preset--color--accent-4); }
.cg-exhibition-group-head h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); }
.cg-exhibition-group-head h3 a { color: inherit; text-decoration: none; }
.cg-exhibition-group-head h3 a:hover, .cg-exhibition-group-head h3 a:focus-visible { text-decoration: underline; }
.cg-exhibition-group-series { margin: 0; font-size: 14px; color: var(--wp--preset--color--accent-2); }

/* Visit: opening hours as a list, the stand and address beside it, a button to the fair's site. */
.cg-exhibition-visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 50px); max-width: 960px; }
@media (max-width: 600px) { .cg-exhibition-visit-grid { grid-template-columns: 1fr; } }
.cg-exhibition-visit-block h3 { margin: 0 0 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.cg-exhibition-hours { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.cg-exhibition-hours li { padding: 7px 0; border-bottom: 1px solid var(--wp--preset--color--accent-5); }
.cg-exhibition-address { margin: 0; font-size: 14px; line-height: 1.6; }
.cg-exhibition-visit-more { margin: 26px 0 0; }

/* Call to action: the heading takes the row's free width beside the button (the artist page caps it at
   760px, too narrow for this sentence at heading size); if it must wrap, the lines are balanced. */
.cg-exhibition-cta h2 { max-width: none; flex: 1 1 560px; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
	.cg-exhibition-card-image, .cg-exhibition-artist-image img { transition: none; }
}