/* The seasonal homepage slot (storefront/home_seasonal.py). The lamp row's
   anatomy and spacing (fun-finds.css); each season picks a theme modifier:

   season--plain      the white panel of the rest of the homepage
   season--christmas  a winter-evening pine panel with one still string of
                      warm-white lights along its top edge, gold small type

   A new theme only overrides the custom properties below (and, if it has
   one, draws its ornament in .season__ornament). Tiles open category
   listings; their photo cycles under a desktop pointer. */
.season {
    --season-bg: #fff;
    --season-border: #e2e8f0;
    --season-text: #0f172a;
    --season-accent: #047857;
    --season-accent-strong: #065f46;
    --season-line: #edf0f2;
    --season-media-bg: #f1f5f9;
    --season-media-ring: transparent;

    position: relative;
    overflow: hidden;
    padding: 24px 20px;
    border: 1px solid var(--season-border);
    border-radius: 24px;
    background: var(--season-bg);
    color: var(--season-text);
}

.season__ornament {
    display: none;
}

.season__eyebrow {
    margin: 0 0 4px;
    color: var(--season-accent);
    font-size: 14px;
    font-weight: 600;
}

.season__heading h2 {
    margin: 0;
    color: var(--season-text);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.season__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 24px;
}

/* Phones: compact rows, photo left -- the lamp row's mobile shape. */
.season-tile {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--season-line);
}

.season-tile:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.season-tile__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 12px;
    background: var(--season-media-bg);
    box-shadow: 0 0 0 1px var(--season-media-ring);
}

.season-tile__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.season-tile__alt {
    display: none;
}

.season-tile__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.season-tile h3 {
    margin: 0;
    color: var(--season-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.season-tile h3 a {
    color: inherit;
    text-decoration: none;
}

/* One category-named link covers the photo and the cue as well. */
.season-tile h3 a::after {
    position: absolute;
    inset: -5px;
    border-radius: 14px;
    content: '';
}

.season-tile h3 a:focus-visible {
    outline: none;
}

.season-tile h3 a:focus-visible::after {
    outline: 2px solid var(--season-accent);
    outline-offset: 2px;
}

.season-tile__cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--season-accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-underline-offset: 3px;
}

.season-tile:focus-within .season-tile__cta {
    color: var(--season-accent-strong);
    text-decoration: underline;
}

@media (hover: hover) {
    .season-tile:hover .season-tile__cta {
        color: var(--season-accent-strong);
        text-decoration: underline;
    }
}

/* Under a desktop pointer the resting photo gives way to the category's other
   goods, one after another, and comes back. Each alternate fades in OVER the
   previous one, so the resting photo never flashes between them. Touch screens
   never match this query: no alternates are shown or downloaded. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
    .season-tile__alt {
        display: block;
        position: absolute;
        inset: 0;
        opacity: 0;
    }

    .season-tile:hover .season-tile__alt--1,
    .season-tile:focus-within .season-tile__alt--1 {
        animation: season-alt-1 4.8s ease-in-out infinite;
    }

    .season-tile:hover .season-tile__alt--2,
    .season-tile:focus-within .season-tile__alt--2 {
        animation: season-alt-2 4.8s ease-in-out infinite;
    }
}

@keyframes season-alt-1 {
    0% { opacity: 0; }
    6%, 46% { opacity: 1; }
    47%, 100% { opacity: 0; }
}

@keyframes season-alt-2 {
    0%, 40% { opacity: 0; }
    46%, 80% { opacity: 1; }
    86%, 100% { opacity: 0; }
}

/* Reduced motion: one still swap to the first alternate, no cycling. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
    .season-tile:hover .season-tile__alt--1,
    .season-tile:focus-within .season-tile__alt--1 {
        animation: none;
        opacity: 1;
    }

    .season-tile:hover .season-tile__alt--2,
    .season-tile:focus-within .season-tile__alt--2 {
        animation: none;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .season-tile__cta { transition: color 180ms ease; }
}

@media (max-width: 359px) {
    .season { padding-inline: 16px; }
    .season-tile { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
}

@media (min-width: 640px) {
    .season { padding: 32px; }
    .season__heading h2 { font-size: 30px; }
    .season__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .season__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .season__grid--1 { grid-template-columns: minmax(0, 1fr); }
    .season-tile { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 0; border: 0; }
    .season-tile__media { width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; }
    .season-tile__details { flex: 1; padding: 0 2px; }
    .season-tile__cta { margin-top: auto; }
}

/* ---- Christmas: a winter evening. The photographs are the lit windows; one
   still string of warm-white lights is the only ornament. Nothing blinks: the
   owner wants it tasteful, not old-fashioned (2026-11-07). ---- */
.season--christmas {
    --season-bg:
        radial-gradient(80% 60% at 50% 0%, rgba(255, 199, 99, .14), transparent 70%),
        linear-gradient(180deg, #0f2f26 0%, #0b241d 100%);
    --season-border: #0b241d;
    --season-text: #fff;
    --season-accent: #f2c46d;
    --season-accent-strong: #ffe1a3;
    --season-line: rgba(255, 255, 255, .1);
    --season-media-bg: #0b241d;
    --season-media-ring: rgba(255, 255, 255, .06);

    padding-top: 52px;
}

.season--christmas .season__ornament {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 36px;
    background: url("../images/season/garland.caa24b90700a.svg") center top / 122px 36px repeat-x;
    pointer-events: none;
}

@media (min-width: 640px) {
    .season--christmas { padding-top: 64px; }
    .season--christmas .season__ornament { height: 44px; background-size: 150px 44px; }
}