/* ==========================================================================
   Selector Block - Card Styles

   Three treatments (Full, Minimalistic, Mini) and eight colourways.

   Each colourway sets a small contract of local custom properties; the three
   style blocks consume that contract and never reference a colour directly.
   Adding a colourway means adding one class, nothing else.

     --sc-bg        card background
     --sc-title     heading colour
     --sc-body      body copy / meta colour
     --sc-chev-bg   chevron disc background
     --sc-chev-fg   chevron glyph colour

   All values come from theme.json presets - no hardcoded colours (CLAUDE.md).
   Every selector is scoped to .selector-card so nothing here can reach the
   theme's global .card component.
   ========================================================================== */

/* ==========================================================================
   Colourways
   ========================================================================== */

.selector-card--white {
    --sc-bg: var(--wp--preset--color--white);
    --sc-title: var(--wp--preset--color--charcoal);
    --sc-body: var(--wp--custom--color--neutral--800);
    --sc-chev-bg: var(--wp--preset--color--primary-50);
    --sc-chev-fg: var(--wp--preset--color--primary-900);
}

.selector-card--mint {
    --sc-bg: var(--wp--preset--color--primary-50);
    --sc-title: var(--wp--preset--color--primary-900);
    --sc-body: color-mix(in srgb, var(--wp--preset--color--primary-900) 82%, transparent);
    --sc-chev-bg: var(--wp--preset--color--white);
    --sc-chev-fg: var(--wp--preset--color--primary);
}

.selector-card--pink {
    --sc-bg: var(--wp--preset--color--secondary-50);
    --sc-title: var(--wp--preset--color--secondary-900);
    --sc-body: color-mix(in srgb, var(--wp--preset--color--secondary-900) 82%, transparent);
    --sc-chev-bg: var(--wp--preset--color--white);
    --sc-chev-fg: var(--wp--preset--color--secondary);
}

.selector-card--lilac {
    --sc-bg: var(--wp--preset--color--tertiary-50);
    --sc-title: var(--wp--preset--color--tertiary-900);
    --sc-body: color-mix(in srgb, var(--wp--preset--color--tertiary-900) 82%, transparent);
    --sc-chev-bg: var(--wp--preset--color--white);
    --sc-chev-fg: var(--wp--preset--color--tertiary);
}

/* Dark colourways - body copy uses the matching tint for contrast on the deep field. */

.selector-card--deep-green {
    --sc-bg: var(--wp--preset--color--primary-900);
    --sc-title: var(--wp--preset--color--white);
    --sc-body: var(--wp--preset--color--primary-50);
    --sc-chev-bg: var(--wp--preset--color--white);
    --sc-chev-fg: var(--wp--preset--color--primary-900);
}

.selector-card--deep-magenta {
    --sc-bg: var(--wp--preset--color--secondary-900);
    --sc-title: var(--wp--preset--color--white);
    --sc-body: var(--wp--preset--color--secondary-50);
    --sc-chev-bg: var(--wp--preset--color--white);
    --sc-chev-fg: var(--wp--preset--color--secondary-900);
}

.selector-card--deep-purple {
    --sc-bg: var(--wp--preset--color--tertiary-900);
    --sc-title: var(--wp--preset--color--white);
    --sc-body: var(--wp--preset--color--tertiary-50);
    --sc-chev-bg: var(--wp--preset--color--white);
    --sc-chev-fg: var(--wp--preset--color--tertiary-900);
}

.selector-card--charcoal {
    --sc-bg: var(--wp--preset--color--charcoal);
    --sc-title: var(--wp--preset--color--white);
    --sc-body: var(--wp--preset--color--primary-50);
    --sc-chev-bg: var(--wp--preset--color--primary-50);
    --sc-chev-fg: var(--wp--preset--color--charcoal);
}

/* ==========================================================================
   Shared
   ========================================================================== */

.selector-card {
    position: relative;
    background: var(--sc-bg);
    overflow: hidden;
    height: 100%;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}

.selector-card:hover {
    transform: translateY(-2px);
}

.selector-card .selector-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.selector-card .selector-card__link:hover,
.selector-card .selector-card__link:focus-visible {
    text-decoration: none;
}

.selector-card .selector-card__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--secondary);
    outline-offset: 3px;
}

.selector-card .selector-card__title {
    margin: 0;
    color: var(--sc-title);
    line-height: var(--wp--custom--line-height--tight);
    letter-spacing: -0.015em;
}

.selector-card .selector-card__excerpt {
    margin: 0;
    color: var(--sc-body);
    font-size: var(--wp--preset--font-size--tiny);
    line-height: var(--wp--custom--line-height--normal);
}

/* Chevron disc - shared by Minimalistic and Mini. */
.selector-card .selector-card__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--sc-chev-bg);
    color: var(--sc-chev-fg);
    transition: transform 0.18s ease-out, background 0.15s ease-out, color 0.15s ease-out;
}

/* Brand rule: green lifts to magenta on hover - never darkens (DESIGN.md). */
.selector-card .selector-card__link:hover .selector-card__chevron {
    transform: translateX(4px);
    background: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--white);
}

/* ==========================================================================
   Full
   ========================================================================== */

.selector-card--full {
    border: 1px solid black;
}

.selector-card--full:hover {
}

.selector-card--full .selector-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.selector-card--full .selector-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
}

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

.selector-card--full .selector-card__pill {
    position: absolute;
    top: var(--wp--preset--spacing--small);
    left: var(--wp--preset--spacing--small);
    padding: 4px 12px;
    background: var(--wp--preset--color--primary-50);
    color: var(--wp--preset--color--primary-900);
    font-size: var(--wp--preset--font-size--min);
    font-weight: 600;
    line-height: var(--wp--custom--line-height--medium);
}

.selector-card--full .selector-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: var(--wp--preset--spacing--medium);
    border-top: 1px solid black;
}

.selector-card--full .selector-card__title {
    font-size: var(--wp--preset--font-size--medium);
}

.selector-card--full .selector-card__meta,
.selector-card--full .selector-card__eventmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--sc-body);
    font-size: var(--wp--preset--font-size--tiny);
}

.selector-card--full .selector-card__eventmeta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.selector-card--full .selector-card__eventmeta-item svg {
    flex: 0 0 auto;
    color: var(--wp--preset--color--primary);
}

.selector-card--full .selector-card__readmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--tiny);
    font-weight: 600;
    transition: color 0.15s ease-out;
}

.selector-card--full .selector-card__chevron-icon {
    transition: transform 0.18s ease-out;
}

.selector-card--full .selector-card__link:hover .selector-card__readmore {
    color: var(--wp--preset--color--secondary);
}

.selector-card--full .selector-card__link:hover .selector-card__chevron-icon {
    transform: translateX(3px);
}

/* ==========================================================================
   Minimalistic
   ========================================================================== */

.selector-card--minimal .selector-card__link {
    gap: 12px;
    min-height: 250px;
    padding: 30px 26px;
}

.selector-card--minimal .selector-card__title {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 700;
}

.selector-card--minimal .selector-card__chevron {
    width: 42px;
    height: 42px;
    margin-top: auto;
}

/* ==========================================================================
   Mini
   ========================================================================== */

.selector-card--mini .selector-card__link {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
}

.selector-card--mini .selector-card__title {
    font-size: var(--wp--preset--font-size--normal);
    font-weight: 600;
}

.selector-card--mini .selector-card__chevron {
    width: 30px;
    height: 30px;
}

/*
 * Mini on white sits inside a coloured band in the design, so its chevron is a
 * bare glyph rather than a disc.
 */
.selector-card--mini.selector-card--white .selector-card__chevron {
    background: transparent;
    color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {
    .selector-card--minimal .selector-card__link {
        min-height: 0;
        padding: 24px 22px;
    }

    .selector-card--mini .selector-card__link {
        padding: 16px 18px;
    }
}

/* ==========================================================================
   Editor / motion preferences
   ========================================================================== */

.editor-styles-wrapper .selector-card:hover {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .selector-card,
    .selector-card .selector-card__chevron,
    .selector-card .selector-card__chevron-icon,
    .selector-card--full .selector-card__media img {
        transition: none;
    }

    .selector-card:hover {
        transform: none;
    }

    .selector-card .selector-card__link:hover .selector-card__chevron {
        transform: none;
    }
}