/*
 * SCIDaR Auction — design system.
 *
 * Follows the reference design's language: editorial serif display type, fully
 * rounded controls, cards whose image sits on a tinted panel, centred section
 * headings with a muted subtitle, and a generous vertical rhythm.
 *
 * Emerald replaces the reference's brown. Every colour is contrast-checked:
 * emerald 600 (#059669) is the shade most people reach for and it fails WCAG AA
 * on white at 3.77:1, so actions use 700 (5.48:1) and text uses 800 (7.68:1).
 *
 * The SCIDaR mark keeps its own orange/olive/lime — a brand mark is not ours to
 * recolour — and only ever appears on white, never on emerald, where the orange
 * would vibrate against the green.
 */

:root {
    --e-50:  #ecfdf5;
    --e-100: #d1fae5;
    --e-200: #a7f3d0;
    --e-300: #6ee7b7;
    --e-400: #34d399;
    --e-500: #10b981;
    --e-600: #059669;
    --e-700: #047857;
    --e-800: #065f46;
    --e-900: #064e3b;
    --e-950: #022c22;

    --ink:     #0f1f1a;
    --muted:   #55655e;
    --line:    #e3ebe7;
    --surface: #ffffff;
    --canvas:  #f4f7f5;
    --panel:   #eef4f1;   /* tinted bed the lot photograph sits on */

    --amber: #b45309;
    --rose:  #b3261e;

    --display: "Playfair Display", Georgia, "Times New Roman", serif;
    --body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --r-md:   14px;
    --r-lg:   22px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(6, 78, 59, .05);
    --shadow-md: 0 6px 20px rgba(6, 78, 59, .08);
    --shadow-lg: 0 18px 44px rgba(6, 78, 59, .14);

    --gutter: 28px;
}

body.solina-auction-page {
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--body);
}

.solina-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.solina-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Display typography ---------------------------------------------------- */

.solina-auction-page h1,
.solina-auction-page h2,
.solina-auction-page .solina-display {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.08;
}

/* Centred heading + muted subtitle, the reference's section pattern. */
.solina-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 36px;
}

.solina-section-head h2 {
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    margin: 0 0 10px;
    color: var(--e-950);
}

.solina-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* --- Hero ------------------------------------------------------------------ */

.solina-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: linear-gradient(145deg, var(--e-800) 0%, var(--e-950) 78%);
    color: #fff;
    overflow: hidden;
}

/* A soft light source, so a large flat green panel does not read as dead. */
.solina-hero::after {
    content: "";
    position: absolute;
    right: -12%;
    top: -40%;
    width: 60%;
    height: 180%;
    background: radial-gradient(closest-side, rgba(52, 211, 153, .22), transparent 70%);
    pointer-events: none;
}

.solina-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(56px, 9vw, 104px) 24px;
}

.solina-hero h1 {
    color: #fff;
    margin: 0 0 14px;
    font-size: clamp(2.25rem, 5.6vw, 4rem);
    max-width: 16ch;
}

.solina-hero p {
    margin: 0 0 28px;
    color: var(--e-100);
    font-size: clamp(1rem, 1.6vw, 1.1875rem);
    max-width: 52ch;
    line-height: 1.6;
}

.solina-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.solina-hero__stat b {
    display: block;
    font-family: var(--display);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1;
}

.solina-hero__stat span {
    display: block;
    margin-top: 6px;
    font-size: 0.8125rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--e-200);
}

/* --- Controls -------------------------------------------------------------- */

.solina-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1.5px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .16s, color .16s, border-color .16s, transform .08s, box-shadow .16s;
}

.solina-btn--primary { background: var(--e-700); color: #fff; }
.solina-btn--primary:hover { background: var(--e-800); color: #fff; box-shadow: var(--shadow-md); }
.solina-btn--primary:active { transform: translateY(1px); }

.solina-btn--ghost { background: var(--e-50); color: var(--e-900); border-color: transparent; }
.solina-btn--ghost:hover { background: var(--e-100); color: var(--e-950); }

.solina-btn--light { background: #fff; color: var(--e-900); }
.solina-btn--light:hover { background: var(--e-50); color: var(--e-950); }

.solina-btn--block { width: 100%; }

.solina-btn:disabled,
.solina-btn[aria-disabled="true"] {
    background: var(--line);
    color: var(--muted);
    cursor: not-allowed;
    box-shadow: none;
}

.solina-btn:focus-visible {
    outline: 3px solid var(--e-600);
    outline-offset: 3px;
}

/* --- Category filter ------------------------------------------------------- */

.solina-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 40px;
}

.solina-auction-page .solina-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .16s, color .16s, background-color .16s;
}

.solina-auction-page .solina-chip:hover {
    border-color: var(--e-300);
    color: var(--e-800);
    text-decoration: none;
}

.solina-auction-page .solina-chip[aria-current="true"] {
    background: var(--e-700);
    border-color: var(--e-700);
    color: #fff;
}

.solina-chip__count { font-weight: 500; opacity: .7; }

/* --- Lot grid -------------------------------------------------------------- */

.solina-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--gutter);
    margin: 0 0 64px;
    padding: 0;
    list-style: none;
}

.solina-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.solina-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--e-200);
}

.solina-card--closed { opacity: .74; }
.solina-card--closed:hover { transform: none; }

/* The photograph sits on a tinted bed rather than bleeding to the card edge —
   lots are photographed against wildly different backgrounds, and the panel
   gives the grid a consistent rhythm regardless. */
.solina-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--panel);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: 16px;
}

.solina-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.solina-card:hover .solina-card__media img { transform: scale(1.05); }

.solina-card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; }

.solina-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px 4px;
    flex: 1;
}

/* Price leads, category sits opposite as a pill — the reference's card header. */
.solina-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.solina-card__price-value {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--e-900);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.solina-card__cat {
    flex: none;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--e-50);
    color: var(--e-800);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.solina-auction-page .solina-card__title {
    margin: 2px 0 0;
    font-family: var(--body);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.solina-auction-page .solina-card__title a,
.solina-auction-page .solina-card__title a:hover,
.entry-content .solina-card__title a {
    color: var(--ink);
    text-decoration: none;
    box-shadow: none;
}

.solina-auction-page .solina-card:hover .solina-card__title a { color: var(--e-800); }

.solina-card__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.solina-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    font-size: 0.8125rem;
    color: var(--muted);
}

.solina-card__meta b { color: var(--ink); font-weight: 650; }

/* Two actions, as in the reference: a quiet one and a committed one. */
.solina-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.solina-card__actions .solina-btn {
    padding: 10px 12px;
    font-size: 0.8125rem;
    position: relative;
    z-index: 2;
}

/* --- Badges ---------------------------------------------------------------- */

.solina-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.solina-badge--live   { background: rgba(4, 120, 87, .95);  color: #fff; }
.solina-badge--soon   { background: rgba(180, 83, 9, .95);  color: #fff; }
.solina-badge--closed { background: rgba(15, 31, 26, .82);  color: #fff; }

.solina-badge__dot {
    width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    animation: solina-pulse 2s ease-in-out infinite;
}

@keyframes solina-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* --- Lot detail ------------------------------------------------------------ */

.solina-panel {
    position: sticky;
    top: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.solina-panel__head {
    padding: 24px 26px 20px;
    background: linear-gradient(165deg, var(--e-50), var(--surface) 70%);
    border-bottom: 1px solid var(--line);
}

.solina-panel__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.solina-price {
    font-family: var(--display);
    font-size: clamp(2.125rem, 5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--e-900);
}

.solina-price--updated { animation: solina-flash 1.3s ease-out; }

@keyframes solina-flash {
    0%   { background: var(--e-200); }
    100% { background: transparent; }
}

.solina-panel__body { padding: 22px 26px 26px; }

.solina-countdown {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 14px;
    font-size: 0.875rem;
    color: var(--muted);
}

.solina-countdown__value { font-size: 1.1875rem; font-weight: 700; color: var(--ink); }
.solina-countdown--urgent .solina-countdown__value { color: var(--amber); }

.solina-field { margin-bottom: 14px; }

.solina-field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 7px;
}

.solina-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    font-family: var(--body);
    font-size: 1.125rem;
    font-weight: 600;
    border: 1.5px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink);
    transition: border-color .16s, box-shadow .16s;
}

.solina-input:focus {
    outline: none;
    border-color: var(--e-600);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, .16);
}

.solina-hint { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted); text-align: center; }

.solina-notice {
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.solina-notice--error   { background: #fce8e6; color: var(--rose); }
.solina-notice--success { background: var(--e-50); color: var(--e-900); }
.solina-notice--warn    { background: #fff4e5; color: var(--amber); }

/* --- Bid history ----------------------------------------------------------- */

.solina-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--surface);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.solina-history th {
    text-align: left;
    font-size: 0.6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 14px 18px;
    background: var(--panel);
    font-weight: 700;
}

.solina-history td { padding: 13px 18px; border-bottom: 1px solid var(--line); }
.solina-history tr:last-child td { border-bottom: 0; }

.solina-history td.solina-amount {
    text-align: right;
    font-weight: 700;
    color: var(--e-800);
    white-space: nowrap;
}

.solina-history tbody tr:first-child { background: var(--e-50); }

/* --- Empty state / connection ---------------------------------------------- */

.solina-empty {
    text-align: center;
    padding: 80px 24px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    color: var(--muted);
}

.solina-empty h2 { margin: 0 0 8px; color: var(--ink); font-size: 1.375rem; }

.solina-connection {
    display: none;
    padding: 10px 16px;
    border-radius: var(--r-md);
    background: #fff4e5;
    color: var(--amber);
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.solina-connection.is-visible { display: block; }

/* --- Header / chrome ------------------------------------------------------- */

.site-branding img,
.custom-logo-link img { max-height: 52px; width: auto; }

/* The hero is the page heading; Astra's title bar would repeat it. */
.solina-has-auction .entry-header,
.solina-has-auction .ast-archive-description,
.solina-has-auction .entry-title { display: none; }

.solina-has-auction .site-content .ast-container {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

/* --- Motion & responsive --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .solina-badge__dot,
    .solina-price--updated { animation: none; }
    .solina-card:hover { transform: none; }
    .solina-card:hover .solina-card__media img { transform: none; }
}

@media (max-width: 921px) {
    .site-branding img,
    .custom-logo-link img { max-height: 40px; }
    .ast-site-identity .site-title,
    .ast-site-identity .site-description { display: none; }
}

@media (max-width: 600px) {
    :root { --gutter: 18px; }
    .solina-grid { grid-template-columns: 1fr; }
    .solina-card__media { aspect-ratio: 16 / 10; }
    .solina-hero__stats { gap: 24px; }
}

@media (max-width: 480px) {
    .solina-filters {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        margin-left: -24px;
        margin-right: -24px;
        padding: 0 24px 4px;
    }
    .solina-filters::-webkit-scrollbar { display: none; }
    .solina-chip { flex: none; }
}

/* --- Link decoration reset -------------------------------------------------
 * Astra underlines links inside .entry-content with a selector specific enough
 * to beat a single class. Matching its depth rather than reaching for
 * !important keeps this overridable further down the line.
 */
.solina-auction-page .entry-content a.solina-btn,
.solina-auction-page .entry-content a.solina-chip,
.solina-auction-page .entry-content .solina-card__title a,
.solina-auction-page .entry-content .solina-card__cat,
body.solina-auction-page .entry-content a.solina-btn:hover,
body.solina-auction-page .entry-content a.solina-chip:hover,
body.solina-auction-page .entry-content .solina-card__title a:hover {
    text-decoration: none;
    border-bottom: 0;
    box-shadow: none;
}

/* Keep a hover affordance on the title, where the underline is meaningful. */
body.solina-auction-page .entry-content .solina-card:hover .solina-card__title a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* Astra adds its own padding band above the content; the hero supplies its own. */
.solina-has-auction .site-content > .ast-container { padding-top: 0; }
.solina-has-auction .entry-content > .solina-hero:first-child { margin-top: -2rem; }

/* ---------------------------------------------------------------------------
 * Overlay header
 *
 * The reference sits its header ON the hero rather than above it in a separate
 * bar, which is what makes the top of the page read as one composition. Astra's
 * header markup is kept intact — only its position and colour change — so the
 * menu, mobile toggle and accessibility behaviour all still come from the theme.
 * ------------------------------------------------------------------------- */

.solina-has-auction .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: transparent;
    box-shadow: none;
    border-bottom: 0;
}

.solina-has-auction .ast-main-header-wrap,
.solina-has-auction .ast-primary-header-bar,
.solina-has-auction .main-header-bar {
    background: transparent !important;
    border-bottom: 0 !important;
}

/* Clear the overlaid header, and pull the hero up under it. */
.solina-has-auction .site-content > .ast-container { padding-top: 0; }
.solina-has-auction .solina-hero__inner { padding-top: clamp(116px, 13vw, 168px); }

/* Everything in the bar reads on the dark hero. */
.solina-has-auction .site-header .site-title a,
.solina-has-auction .site-header .main-header-menu > li > a,
.solina-has-auction .site-header .ast-masthead-custom-menu-items a {
    color: #fff;
}

.solina-has-auction .site-header .main-header-menu > li > a:hover,
.solina-has-auction .site-header .main-header-menu > .current-menu-item > a {
    color: var(--e-200);
}

.solina-has-auction .site-header .site-title { font-weight: 700; letter-spacing: -0.01em; }

/* The SCIDaR mark is orange/olive/lime and sits legibly on deep emerald, so it
   is left alone rather than knocked out to white. */

/* Three-part bar: brand left, navigation centred, actions right. */
@media (min-width: 922px) {
    .solina-has-auction .ast-builder-grid-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .solina-has-auction .site-header-primary-section-right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
    }

    .solina-has-auction .main-header-bar-navigation { flex: 1; }

    .solina-has-auction .main-header-menu {
        justify-content: center;
        gap: 6px;
    }

    .solina-has-auction .main-header-menu > li > a {
        padding-left: 14px;
        padding-right: 14px;
        font-size: 0.9375rem;
        font-weight: 500;
    }
}

/* The account action reads as a control, not another menu word. */
.solina-nav__action > a {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    padding: 8px 16px !important;
    border: 1.5px solid rgba(255, 255, 255, .35);
    border-radius: var(--r-pill);
    font-weight: 600;
    transition: background-color .16s, border-color .16s;
}

.solina-nav__action > a:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6);
}

.solina-nav__icon { width: 17px; height: 17px; flex: none; }

/* Off the hero — inner pages — the bar goes solid so it stays legible. */
body:not(.solina-has-auction) .solina-nav__action > a {
    border-color: var(--line);
    color: var(--e-800);
}

body:not(.solina-has-auction) .solina-nav__action > a:hover {
    background: var(--e-50);
    border-color: var(--e-300);
}

/* Mobile: Astra's toggle needs to be visible against the hero. */
@media (max-width: 921px) {
    .solina-has-auction .site-header .ast-mobile-menu-trigger-minimal,
    .solina-has-auction .site-header .menu-toggle { color: #fff; background: transparent; }
    .solina-has-auction .site-header .menu-toggle .ast-mobile-svg { fill: #fff; }
    .solina-has-auction .solina-hero__inner { padding-top: 104px; }
}

/* Astra gives menu links a tall line-height for the bar's click target, which
   turned the pill into an ellipse — 999px radius on a box taller than it is
   wide. Constrain the height so the radius resolves to a capsule. */
.solina-nav__action > a {
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: center;
}

.solina-has-auction .main-header-menu > li.solina-nav__action {
    display: flex;
    align-items: center;
}