/* ==========================================================================
   polyffinder-seasonal — front-end styles
   Scoped to .pfs-root so it never leaks into theme/other plugin output.
   ========================================================================== */

.pfs-root {
    --pfs-gap: 16px;
    --pfs-radius: 12px;
    --pfs-shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 12px -4px rgba(16,24,40,.08);
    --pfs-accent: var(--polyffinder-primary, #3b49df);
    --pfs-text: #18181b;
    --pfs-text-muted: #71717a;
    --pfs-surface: #fff;
    --pfs-border: #e4e4e7;
    --pfs-items-desktop: 4;
    --pfs-items-tablet: 3;
    --pfs-items-mobile: 1.2;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    color: var(--pfs-text);
    margin: 24px 0;
}

.pfs-season + .pfs-season { margin-top: 32px; }

/* ---- season header ----
   No typographic styles for the title: the theme's H1..H6 rules apply
   so it matches the rest of the headings on the site (font, size,
   weight, color, vertical rhythm). We only force text-align: center
   per earlier UX decision, and use a per-level selector chain so the
   centering wins over theme rules like `h2 { text-align: left }`. */
.pfs-season__header { text-align: center; }
.pfs-root h1.pfs-season__title,
.pfs-root h2.pfs-season__title,
.pfs-root h3.pfs-season__title,
.pfs-root h4.pfs-season__title,
.pfs-root h5.pfs-season__title,
.pfs-root h6.pfs-season__title {
    text-align: center;
}

/* ---- row (stacked layout) ---- */
.pfs-row + .pfs-row { margin-top: 28px; }
.pfs-row__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--pfs-text);
}

/* ==========================================================================
   Carousel — pure CSS scroll-snap, JS only enhances arrows + autoplay
   ========================================================================== */
.pfs-carousel {
    position: relative;
}
.pfs-carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--pfs-items-desktop) - 1) * var(--pfs-gap)) / var(--pfs-items-desktop));
    gap: var(--pfs-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 12px;
}
.pfs-carousel__track::-webkit-scrollbar { display: none; }
.pfs-carousel__track:focus { outline: 2px solid var(--pfs-accent); outline-offset: 2px; border-radius: 4px; }

.pfs-carousel__item {
    scroll-snap-align: start;
    min-width: 0;
    /* Stretch each item to the height of the tallest in the row so all cards
       in a carousel line up visually. The card inside then fills 100% height. */
    display: flex;
    align-items: stretch;
}
.pfs-carousel__item > * { width: 100%; }

/* ---- arrows ----
   Position: aligned with the center of the card thumbnail (~30% from top),
   not the geometric center of the whole carousel. The thumbnail aspect-ratio
   is 16:10, so its visual center is roughly at 28-32% of the card's height.
   Placing arrows there feels "anchored to the imagery" instead of floating
   over the description block below.

   Defensive sizing against theme overrides:
     - Triple width/height bound (width, min-, max-) + aspect-ratio
     - padding/margin: 0 prevents theme button padding distorting into oval
     - line-height: 1 + flex centering keeps the SVG perfectly centered
     - All-side identical border + box-sizing: border-box → guaranteed circle */
.pfs-carousel__arrow {
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1px solid var(--pfs-border);
    background: var(--pfs-surface);
    color: var(--pfs-text);
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--pfs-shadow);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s, background .2s, border-color .2s, color .2s;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 0; /* kills inline-text baseline gap from the SVG container */
    overflow: hidden;
}
.pfs-carousel__arrow svg {
    display: block;
    width: 14px;
    height: 14px;
}
.pfs-carousel__arrow:hover {
    background: var(--pfs-accent);
    color: #fff;
    border-color: var(--pfs-accent);
    /* Keep the same vertical anchor on hover. */
    transform: translateY(-50%);
}
.pfs-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.pfs-carousel__arrow--prev { left: -8px; }
.pfs-carousel__arrow--next { right: -8px; }

/* ---- dots ---- */
.pfs-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}
.pfs-carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pfs-border);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .2s, width .2s;
}
.pfs-carousel__dot.is-active { background: var(--pfs-accent); width: 24px; border-radius: 4px; }

/* ==========================================================================
   Cards (native fallback — polyffinder's render_item produces its own)
   ========================================================================== */
.pfs-card {
    /* Fill the carousel item completely so heights line up across the row. */
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ---- line clamping (applies to BOTH native cards and polyffinder/tours cards) ----
   The two patterns coexist in the wild:
     - native fallback uses .pfs-card__title / .pfs-card__excerpt
     - polyffinder render_item (posts + tours) uses .polyffinder-result-title /
       .polyffinder-result-excerpt
   We scope the clamp to .pfs-card so it never bleeds into the actual search
   results modal of polyffinder elsewhere on the site. */
.pfs-card .pfs-card__title,
.pfs-card .polyffinder-result-title {
    /* Title: max 2 lines + ellipsis if longer; min-height reserves 2 lines so
       a 1-line title doesn't make the card shorter than its neighbors. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    min-height: calc(1.3em * 2);
}
.pfs-card .pfs-card__excerpt,
.pfs-card .polyffinder-result-excerpt {
    /* Excerpt: max 3 lines + ellipsis; min-height reserves 3 lines even when
       the description is short (or empty in the native fallback path). */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    min-height: calc(1.4em * 3);
}

.pfs-card--native {
    background: var(--pfs-surface);
    border: 1px solid var(--pfs-border);
    border-radius: var(--pfs-radius);
    overflow: hidden;
    box-shadow: var(--pfs-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pfs-card--native:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(16,24,40,.18); }
.pfs-card--native .pfs-card__link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.pfs-card--native .pfs-card__media { aspect-ratio: 16/10; overflow: hidden; background: #f4f4f5; flex-shrink: 0; }
.pfs-card--native .pfs-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pfs-card--native:hover .pfs-card__img { transform: scale(1.04); }
.pfs-card--native .pfs-card__body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.pfs-card--native .pfs-card__title { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.pfs-card--native .pfs-card__excerpt { font-size: 13px; color: var(--pfs-text-muted); margin: 0; }

/* ==========================================================================
   Tabs layout
   ========================================================================== */
.pfs-tabs__nav {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--pfs-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.pfs-tabs__nav::-webkit-scrollbar { display: none; }
.pfs-tabs__tab {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pfs-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    font-family: inherit;
    transition: color .15s, border-color .15s;
}
.pfs-tabs__tab:hover { color: var(--pfs-text); }
.pfs-tabs__tab.is-active { color: var(--pfs-accent); border-bottom-color: var(--pfs-accent); }
.pfs-tabs__panel { display: none; }
.pfs-tabs__panel.is-active { display: block; }

/* ==========================================================================
   Chips layout
   ========================================================================== */
.pfs-chips__nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pfs-chips__chip {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--pfs-border);
    background: var(--pfs-surface);
    color: var(--pfs-text);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
}
.pfs-chips__chip:hover { border-color: var(--pfs-accent); color: var(--pfs-accent); }
.pfs-chips__chip.is-active { background: var(--pfs-accent); color: #fff; border-color: var(--pfs-accent); }
.pfs-chips__panel { display: none; }
.pfs-chips__panel.is-active { display: block; }

/* ==========================================================================
   Responsive — tablet & mobile
   ========================================================================== */
@media (max-width: 1024px) {
    .pfs-carousel__track {
        grid-auto-columns: calc((100% - (var(--pfs-items-tablet) - 1) * var(--pfs-gap)) / var(--pfs-items-tablet));
    }
}

@media (max-width: 640px) {
    .pfs-carousel__track {
        /* On mobile, items_per_view is fractional (default 1.2) so users see a
           peek of the next card — strong affordance that there's more to swipe. */
        grid-auto-columns: calc((100% - (var(--pfs-items-mobile) - 1) * var(--pfs-gap)) / var(--pfs-items-mobile));
        padding-right: 16px; /* extra trailing scroll-padding feels nicer */
    }
    .pfs-row__title { font-size: 16px; }
    /* Arrows are useless on touch; hide them in favor of swipe */
    .pfs-carousel__arrow { display: none; }
}