/*!
 * Theme Engine — Omeka Classic additions.
 *
 * engine.css is shared with the Omeka S engine (keep it in step with it);
 * this file adds what only Classic pages have: the theme's own home page,
 * Classic's metadata, search, tag and message markup, Exhibit Builder and
 * Simple Pages. Rules sit in the engine's cascade layers (declared in
 * engine.css, which loads first), so themes override them the same way.
 */

@layer engine.components {
    /* A kicker sits close to the title it introduces: .v-flow's gap is 1em
       of the following element, which is large for a big title. */
    .v-flow > .v-kicker + * { margin-block-start: var(--v-space-2xs); }

    /* Element set headings ("Dublin Core", "Still Image Item Type Metadata"):
       a small label above each set's rows, not a page-level heading. */
    .v-values + .v-values { margin-block-start: var(--v-space-l); }
    .v-values__heading {
        margin: 0 0 var(--v-space-2xs);
        font-family: var(--v-font-body);
        font-size: var(--v-step-n1);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--v-text-muted);
    }
    .v-values dl { margin: 0; }

    /* What plugins add to a card (public_items_browse_each) stays clickable
       above the card's stretched title link. */
    .v-card__extra { position: relative; z-index: 2; margin-block-start: var(--v-space-2xs); font-size: var(--v-step-n1); }

    .v-panel__subtitle { margin: var(--v-space-s) 0 var(--v-space-2xs); font-family: var(--v-font-body); font-size: var(--v-step-n1); font-weight: 700; color: var(--v-text-muted); }
    .v-panel > p:last-child { margin-block-end: 0; }

    /* Tag cloud */
    .v-tag-cloud { gap: var(--v-space-2xs); }
    .v-tag-cloud .v-chip[data-weight="2"] { font-size: var(--v-step-0); }
    .v-tag-cloud .v-chip[data-weight="3"] { font-size: var(--v-step-1); }
    .v-tag-cloud .v-chip[data-weight="4"] { font-size: var(--v-step-2); }
    .v-chip__count { font-size: var(--v-step-n2); color: var(--v-text-muted); font-variant-numeric: tabular-nums; }

    /* Classic's search filters (item_search_filters(), search_filters()):
       each filter as a chip. */
    :is(.v-search-filters, .v-search-results) :is(#item-filters, #search-filters) ul {
        display: flex; flex-wrap: wrap; gap: var(--v-space-2xs); list-style: none; margin: 0 0 var(--v-space-m); padding: 0;
    }
    :is(.v-search-filters, .v-search-results) :is(#item-filters, #search-filters) li {
        margin: 0; padding: 0.2em 0.75em; border-radius: 999px;
        background: var(--v-primary-subtle); color: var(--v-on-primary-subtle); font-size: var(--v-step-n1);
    }
    :is(.v-search-filters, .v-search-results) :is(#item-filters, #search-filters) li ul { display: inline; margin: 0; }
    :is(.v-search-filters, .v-search-results) :is(#item-filters, #search-filters) li li { display: inline; padding: 0; background: none; }
    .v-search-results__form { max-width: 36rem; margin-block-end: var(--v-space-m); }

    .v-browse__more { margin-block-start: var(--v-space-m); }

    /* Flash messages (#flash > ul > li.success|error|alert). */
    .v-messages { margin-block: var(--v-space-s); }
    .v-messages #flash ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v-space-2xs); }
    .v-messages #flash li {
        margin: 0; padding: var(--v-space-xs) var(--v-space-s);
        border-inline-start: 4px solid var(--v-notice-info);
        border-radius: var(--v-radius-sm);
        background: var(--v-notice-info-bg); color: var(--v-text);
    }
    .v-messages #flash li.success { border-color: var(--v-notice-success); background: var(--v-notice-success-bg); }
    .v-messages #flash li:is(.error, .alert) { border-color: var(--v-notice-danger); background: var(--v-notice-danger-bg); }
    .v-messages #flash li.warning { border-color: var(--v-notice-warning); background: var(--v-notice-warning-bg); }

    /* Error pages */
    .v-error { padding-block: var(--v-space-2xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-s); justify-items: start; }
    .v-error__search { width: min(100%, 32rem); }
    .v-error__detail { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--v-step-n1); }
    .v-error__details { max-width: 100%; }
}

@layer engine.content {
    /* --- Home page --------------------------------------------------------- */
    .v-home__section { margin-block: var(--v-space-2xl); }
    .v-home__intro { margin-block: var(--v-space-2xl) 0; }
    .v-home__intro > :where(p, ul, ol, dl, h2, h3, h4, blockquote) { max-width: var(--v-measure); }
    .v-home__intro > :where(p, ul, ol) { font-size: var(--v-step-1); }
    .v-home__intro + .v-home__section { margin-block-start: var(--v-space-xl); }
    .v-home__exhibits .v-spotlight__media img { width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--v-radius); }

    /* A banner with no picture: a band in the primary color, sized to its
       text rather than to the window. */
    .v-home__hero.v-hero--plain {
        min-height: 0;
        background: var(--v-primary);
        color: var(--v-on-primary);
        --v-heading: var(--v-on-primary);
    }
    .v-home__hero.v-hero--plain .v-hero__content { padding-block: var(--v-space-2xl); }
    .v-home__hero.v-hero--plain .v-button { background: var(--v-on-primary); border-color: var(--v-on-primary); color: var(--v-primary); }
    .v-home__hero .v-hero__text > * { margin: 0; }
    .v-home__hero .v-hero__text a { color: inherit; }
    .v-hero__credit { font-size: var(--v-step-n1); }
    .v-hero__credit a { color: inherit; }

    /* Image beside the text */
    .v-home__hero.v-hero--split:not(.v-hero--plain) {
        min-height: 0;
        align-items: stretch;
        background: var(--v-surface-alt);
        color: var(--v-text);
        --v-heading: var(--v-heading-color, var(--v-text));
        --v-focus: var(--v-primary);
        --v-focus-halo: var(--v-bg);
    }
    .v-home__hero.v-hero--split:not(.v-hero--plain)::before { display: none; }
    .v-home__hero.v-hero--split:not(.v-hero--plain) .v-hero__image { position: static; z-index: auto; aspect-ratio: 4 / 3; }
    .v-home__hero.v-hero--split:not(.v-hero--plain) .v-hero__content { width: auto; padding: var(--v-space-xl) var(--v-gutter); align-self: center; }
    .v-home__hero.v-hero--split:not(.v-hero--plain) .v-button { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-on-primary); }
    .v-home__hero.v-hero--split:not(.v-hero--plain) .v-button:hover { background: var(--v-primary-hover); color: var(--v-on-primary-hover); }
    @media (min-width: 48em) {
        .v-home__hero.v-hero--split:not(.v-hero--plain) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
        .v-home__hero.v-hero--split:not(.v-hero--plain) .v-hero__image { aspect-ratio: auto; height: 100%; min-height: 26rem; }
        .v-home__hero.v-hero--split:not(.v-hero--plain) .v-hero__content { padding-inline: var(--v-space-xl) max(var(--v-gutter), calc((100vw - var(--v-container)) / 2)); }
    }

    /* Text below the image */
    .v-home__hero.v-hero--below:not(.v-hero--plain) {
        min-height: 0;
        background: transparent;
        color: var(--v-text);
        --v-heading: var(--v-heading-color, var(--v-text));
        --v-focus: var(--v-primary);
        --v-focus-halo: var(--v-bg);
    }
    .v-home__hero.v-hero--below:not(.v-hero--plain)::before { display: none; }
    .v-home__hero.v-hero--below:not(.v-hero--plain) .v-hero__image { position: static; z-index: auto; height: clamp(16rem, 48vh, 34rem); }
    .v-home__hero.v-hero--below:not(.v-hero--plain) .v-hero__content { padding-block: var(--v-space-l) 0; }
    .v-home__hero.v-hero--below:not(.v-hero--plain) .v-button { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-on-primary); }

    /* --- Advanced item search (items/search-form.php) -------------------- */
    /* minmax(0, 1fr): a long option in a select (element names) must not
       widen the column past a phone's width. */
    .v-advanced-search form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-m); max-width: 52rem; margin-block-end: var(--v-space-2xl); }
    .v-advanced-search .field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2xs); margin: 0; }
    .v-advanced-search .field > label, .v-advanced-search .field > .label, .v-advanced-search .visible-label, .v-advanced-search legend { font-weight: 700; }
    .v-advanced-search .inputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v-space-2xs); }
    .v-advanced-search .search-entry > * { min-width: 0; }
    .v-advanced-search .search-entry { gap: var(--v-space-2xs); align-items: center; }
    .v-advanced-search .search-entry :is(select, input[type=text]) { margin: 0; }
    .v-advanced-search :is(input[type=text], input[type=search], select) { width: auto; max-width: 100%; }
    .v-advanced-search .remove_search { padding: 0.3em 0.8em; }
    .v-advanced-search fieldset { border: 0; margin: 0; padding: 0; }
    .v-advanced-search #submit_search_advanced { justify-self: start; }
}

@layer engine.content {
    /* --- Page text: Simple Pages and exhibit text blocks ----------------- */
    .v-prose { padding-block-end: var(--v-space-2xl); }
    .v-prose > :where(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote, table, pre),
    .v-exhibit-text > :where(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote, table, pre) { max-width: var(--v-measure); }
    /* Text spacing at any depth: pages wrap text in the content classes
       (v-lead, v-callout, v-columns…) or in an editor's own divs. */
    :is(.v-prose, .v-exhibit-text) :where(p, ul, ol, dl, blockquote, table, pre) { margin-block: 0 1em; }
    :is(.v-prose, .v-exhibit-text) :where(h2, h3, h4, h5, h6) { margin-block: 1.4em 0.4em; }
    :is(.v-prose, .v-exhibit-text) :where(div, section, figure, nav) > :where(h2, h3, h4, h5, h6):first-child { margin-block-start: 0; }
    :is(.v-prose, .v-exhibit-text) :where(div, section, blockquote, figure, li) > :where(p, ul, ol, dl):last-child { margin-block-end: 0; }
    :is(.v-prose, .v-exhibit-text) > :first-child { margin-block-start: 0; }
    :is(.v-prose, .v-exhibit-text) > :where(.v-lead, .v-callout, .v-columns, .v-card-box, .v-cta, .v-pullquote, .v-toc-cards, .v-hero, .v-divider, figure) { margin-block: var(--v-space-l); }
    :is(.v-prose, .v-exhibit-text) img:not(.v-hero__image) { max-width: 100%; height: auto; border-radius: var(--v-radius-sm); }
    :is(.v-prose, .v-exhibit-text) figure { margin: var(--v-space-m) 0; max-width: var(--v-measure); }
    :is(.v-prose, .v-exhibit-text) figcaption { margin-block-start: var(--v-space-2xs); font-size: var(--v-step-n1); color: var(--v-text-muted); }
    /* A plain quote; pull quotes (.v-pullquote) keep the engine's style. */
    :where(.v-prose, .v-exhibit-text) blockquote:not(.v-pullquote blockquote) {
        margin-inline: 0; padding-inline-start: var(--v-space-m);
        border-inline-start: 3px solid var(--v-accent); font-size: var(--v-step-1);
    }
    /* A reading page is one column at reading width, lined up with its
       title: the column is measured at the body size, as the header is,
       and the larger reading size goes on the text inside it. */
    .v-page--reading .v-prose { width: min(100% - 2 * var(--v-gutter), var(--v-measure)); margin-inline: auto; padding-inline: 0; }
    .v-page--reading .v-prose > :where(p, ul, ol, dl, blockquote) { font-size: var(--v-step-1); line-height: 1.7; }
    .v-page--reading .v-prose > figure > figcaption { font-size: var(--v-step-0); }
    .v-page--reading .v-prose > :where(p, ul, ol, dl, blockquote) { max-width: none; }
    .v-page__crumbs + .v-page__header { margin-block-start: 0; }

    /* Shortcode output inside pages: items, collections, exhibits lists. */
    :is(.v-prose, .v-exhibit-text, .v-home__intro) :is(.item-record, .collection-record, .exhibit-record, .item.record) { margin-block: var(--v-space-s); }

    /* --- Exhibits ---------------------------------------------------------- */
    .v-exhibit__hero { margin-block-end: var(--v-space-s); }
    .v-exhibit__hero .v-kicker { color: inherit; opacity: 0.9; }
    .v-exhibit__intro { margin-block: var(--v-space-m) var(--v-space-xl); }
    .v-exhibit__intro .v-spotlight__media img { width: 100%; border-radius: var(--v-radius); }
    .v-exhibit__description { max-width: var(--v-measure); }
    .v-exhibit__credits { color: var(--v-text-muted); }
    .v-exhibit__credits-label { font-weight: 700; color: var(--v-text); }
    .v-exhibit__contents { margin-block-end: var(--v-space-2xl); }
    .v-exhibit__contents ol {
        counter-reset: v-exhibit-page; list-style: none; margin: 0; padding: 0;
        display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: var(--v-space-s);
    }
    .v-exhibit__contents li { counter-increment: v-exhibit-page; }
    .v-exhibit__contents a::before { content: counter(v-exhibit-page) ". "; color: var(--v-text-muted); font-variant-numeric: tabular-nums; margin-inline-end: 0.25em; }
    .v-exhibit .v-page__header .v-kicker a { color: inherit; text-decoration: none; }
    .v-exhibit .v-page__header .v-kicker a:hover { text-decoration: underline; }
    .v-exhibit .v-section-nav li.current > a, .v-exhibit .v-section-nav li.parent > a { font-weight: 700; }
    .v-exhibit__blocks { padding-block-end: var(--v-space-l); }
    .v-exhibit__blocks--wide { max-width: calc(var(--v-measure) + 24rem); }
    .v-exhibit__toc-menu { margin-block-start: var(--v-space-s); }
    .v-exhibit__toc-menu summary {
        display: inline-flex; align-items: center; gap: var(--v-space-2xs); cursor: pointer;
        padding: 0.35em 0.9em; border: 1px solid var(--v-border-strong); border-radius: var(--v-radius-button);
        font-weight: 600;
    }
    .v-exhibit__toc-menu summary .v-icon { width: 1.1em; height: 1.1em; }
    .v-exhibit__toc-menu .v-section-nav { margin-block-start: var(--v-space-2xs); max-width: 28rem; }
    .v-page__pagination { margin-block: var(--v-space-l) var(--v-space-2xl); }

    /* Exhibit blocks: Exhibit Builder renders each in .exhibit-block. */
    .exhibit-block { display: flow-root; margin-block: 0 var(--v-space-xl); }
    .v-exhibit-block { display: flow-root; }
    .v-exhibit-media { display: grid; gap: var(--v-space-s); }
    .v-exhibit-figure { margin: 0; min-width: 0; }
    .v-exhibit-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--v-radius-sm); }
    .v-exhibit-figure .item-file { margin: 0; }
    .v-exhibit-figure .item-file a { display: block; }
    .v-exhibit-figure .slide-meta, .v-exhibit-figure .exhibit-item-caption { margin-block-start: var(--v-space-2xs); font-size: var(--v-step-n1); color: var(--v-text-muted); }
    .v-exhibit-figure .exhibit-item-caption > :last-child { margin-block-end: 0; }
    [data-captions=center] .exhibit-item-caption { text-align: center; }
    [data-captions=right] .exhibit-item-caption { text-align: end; }
    .v-exhibit-media[data-captions] .v-exhibit-figure .exhibit-item-caption p { margin: 0; }

    /* File with text, and File: on wide screens the files float to one
       side of the text at a width that follows the chosen size. */
    @media (min-width: 40em) {
        .v-exhibit-block--file-text .v-exhibit-media,
        .v-exhibit-block--file:has(.v-exhibit-text) .v-exhibit-media { width: min(46%, 32rem); margin-block-end: var(--v-space-s); }
        .v-exhibit-block--file-text[data-size=thumbnail] .v-exhibit-media,
        .v-exhibit-block--file:has(.v-exhibit-text)[data-size=thumbnail] .v-exhibit-media { width: 14rem; }
        .v-exhibit-block--file-text[data-size=square_thumbnail] .v-exhibit-media,
        .v-exhibit-block--file:has(.v-exhibit-text)[data-size=square_thumbnail] .v-exhibit-media { width: 10rem; }
        .v-exhibit-block[data-position=left] > .v-exhibit-media { float: inline-start; margin-inline-end: var(--v-space-l); }
        .v-exhibit-block[data-position=right] > .v-exhibit-media { float: inline-end; margin-inline-start: var(--v-space-l); }
        .v-exhibit-block--file[data-position=center] > .v-exhibit-media { justify-items: center; }
    }
    .v-exhibit-block--file:not(:has(.v-exhibit-text))[data-size=fullsize] .v-exhibit-media { justify-items: start; }
    .v-exhibit-block--file .v-exhibit-media { margin-block-end: var(--v-space-s); }
    /* Text beside a floated file measures its own width, not the block's. */
    .v-exhibit-block > .v-exhibit-text { display: flow-root; }
    /* Whole (uncropped) gallery thumbnails keep their shape. */
    .v-gallery[data-thumbnails=whole] .v-gallery__grid img { aspect-ratio: auto; object-fit: contain; }

    /* Gallery: thumbnails in a grid, an optional showcase beside them. */
    .v-exhibit-gallery {
        list-style: none; margin: 0 0 var(--v-space-s); padding: 0;
        display: grid; gap: var(--v-space-s);
        grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
    }
    .v-exhibit-block--gallery[data-size=thumbnail] .v-exhibit-gallery,
    .v-exhibit-block--gallery[data-size=fullsize] .v-exhibit-gallery { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
    .v-exhibit-gallery .v-exhibit-figure { margin: 0; }
    .v-exhibit-gallery a { display: block; border-radius: var(--v-radius-sm); }
    .v-exhibit-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
    .v-exhibit-block--gallery[data-size=thumbnail] .v-exhibit-gallery img,
    .v-exhibit-block--gallery[data-size=fullsize] .v-exhibit-gallery img { aspect-ratio: auto; object-fit: contain; background: var(--v-surface-sunken); }
    @media (min-width: 48em) {
        .v-exhibit-block--gallery:is([data-showcase=left], [data-showcase=right]) { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--v-space-l); align-items: start; }
        .v-exhibit-block--gallery[data-showcase=right] > .v-exhibit-showcase { order: 2; }
        .v-exhibit-block--gallery:is([data-showcase=left], [data-showcase=right]) > .v-exhibit-text { grid-column: 1 / -1; }
    }

    /* Carousel: Exhibit Builder's own jCarousel, in the theme's colors. */
    .layout-carousel .jcarousel-wrapper { border: 1px solid var(--v-border); border-radius: var(--v-radius); background: var(--v-surface-alt); box-shadow: none; }
    .layout-carousel .jcarousel-wrapper .slide-meta { background: color-mix(in srgb, var(--v-overlay) 72%, transparent); color: #fff; }
    .layout-carousel .jcarousel-wrapper .slide-meta a { color: #fff; }
}

@layer engine.components {
    /* One card on its own (items/single.php and the like): shortcodes print
       them one after another, so they sit side by side at card width. */
    .v-single { display: inline-grid; grid-template-columns: 1fr; width: min(17rem, 100%); margin: 0 var(--v-space-s) var(--v-space-s) 0; vertical-align: top; }
}

@layer engine.content {
    /* --- Content classes for page text: image galleries and card grids --- */

    /* .v-figures: pictures with captions in a grid.
       <div class="v-figures"><figure><img …><figcaption>…</figcaption></figure>…</div>
       One picture fills the width; two sit side by side; more form a grid of
       the cards' shape. */
    .v-figures {
        display: grid; gap: var(--v-space-m); margin-block: var(--v-space-l);
        grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
    }
    .v-figures:has(> figure:nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
    .v-figures:has(> figure:only-child) { grid-template-columns: minmax(0, 1fr); }
    :is(.v-prose, .v-exhibit-text, .v-home__intro) .v-figures > figure, .v-figures > figure { margin: 0; max-width: none; min-width: 0; }
    .v-figures > figure > a { display: block; border-radius: var(--v-radius-sm); }
    .v-figures img { display: block; width: 100%; height: auto; aspect-ratio: var(--v-card-ratio); object-fit: var(--v-card-fit); background: var(--v-surface-sunken); border-radius: var(--v-radius-sm); }
    .v-figures > figure:only-child img { aspect-ratio: auto; }
    .v-figures figcaption { margin-block-start: var(--v-space-2xs); font-size: var(--v-step-n1); color: var(--v-text-muted); }
    .v-figures figcaption > a:first-child { font-weight: 600; }
    .v-figures audio, .v-figures video { width: 100%; }

    /* .v-cards: a grid for cards that shortcodes print one after another
       ([items], [featured_items], [collections], [exhibits]…):
       <div class="v-cards">[items num=8 sort="added"]</div> */
    .v-cards {
        display: grid; gap: var(--v-grid-gap, var(--v-space-m)); margin-block: var(--v-space-l);
        grid-template-columns: repeat(auto-fill, minmax(min(var(--v-grid-min), 100%), 1fr));
    }
    .v-cards :is(p, .v-single) { display: contents; }
    .v-cards .v-single { width: auto; margin: 0; }

    /* Card grids inside page text use the page's width, not the reading
       width. */
    :is(.v-prose, .v-exhibit-text, .v-home__intro) > :where(.v-preview, .v-results) { max-width: none; }
    :is(.v-prose, .v-exhibit-text, .v-home__intro) .v-results { list-style: none; padding: 0; }
}

@layer engine.content {
    /* On a reading page, card grids and galleries in the text take the
       page's width, not the reading width, centered under it. */
    .v-page--reading .v-prose > :where(.v-preview, .v-results, .v-figures, .v-cards) {
        width: min(100vw - 2 * var(--v-gutter), var(--v-container));
        margin-inline: calc((100% - min(100vw - 2 * var(--v-gutter), var(--v-container))) / 2);
    }
}

@layer engine.content {
    /* Below the side-by-side width, a page with a section menu is one column
       that never grows past the screen (Exhibit Builder's carousel sets a
       track thousands of pixels wide). Its children may shrink as well. */
    @media not all and (min-width: 64em) {
        .v-page__with-nav { grid-template-columns: minmax(0, 1fr); }
    }
    .v-page__with-nav > * { min-width: 0; }
}