/* ============================================================
   Stack and Value — Track 6 visual polish, part 1
   Animated price badges + bolder article cards

   Standalone file. Load it AFTER built/screen.css and AFTER
   built/dark-mode.css so these rules win in the cascade.
   It is hand-maintained, like dark-mode.css: it is NOT part of
   the gulp build, so re-copy it if a build ever regenerates
   assets/built/.

   Design rules followed throughout:
   - Accent green #16A34A, via var(--ghost-accent-color) with
     a hard fallback, so a future accent change still works.
   - Dark-mode safe: every surface/text color below comes from
     the theme variables that dark-mode.css already overrides
     under prefers-color-scheme: dark. No hardcoded light-mode
     text or background colors on shared surfaces.
   - No layout shift: animations touch only box-shadow (paint)
     and transform/opacity. Badge and card sizes never change
     when an animation runs, and nothing here adds or removes
     page space on hover or on animation.
   - Reduced motion: every animation and transition in this
     file is switched off under prefers-reduced-motion: reduce.
   ============================================================ */

/* ------------------------------------------------------------
   1. Animated price badges
   ------------------------------------------------------------ */

/* A price line keeps the old price, the new price, and the
   badge on one tidy row. The badge is inline-flex with a fixed
   line-height, so it never grows the line when it pulses. */
.price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0.75em 0;
    font-size: 1.6rem;
    line-height: 1.4;
}

.price-old {
    color: var(--color-secondary-text);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.price-new {
    font-weight: 800;
    font-size: 1.15em;
    letter-spacing: -0.01em;
    color: var(--color-primary-text);
}

/* The badge itself. Green pill, white text, readable at small
   sizes. The glow is a box-shadow pulse: paint only, so the
   badge and everything around it stays exactly where it is. */
.price-drop-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.28em 0.7em;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #fff;
    background-color: var(--ghost-accent-color, #16a34a);
    border-radius: 999px;
    box-shadow: 0 0 0 0 rgb(22 163 74 / 0.45);
    animation: sv-badge-glow 2.8s ease-in-out infinite;
}

/* A quiet version for dense spots (deal tables, lists) where a
   pulsing badge on every row would be too much. Same size and
   shape, no animation, so rows stay visually consistent. */
.price-drop-badge--static {
    animation: none;
    box-shadow: none;
}

/* A neutral "was / now" marker for lines that are not a drop,
   kept the same size so swapping badge styles never reflows. */
.price-drop-badge--info {
    color: var(--color-primary-text);
    background-color: var(--color-lighter-gray);
    box-shadow: none;
    animation: none;
}

@keyframes sv-badge-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgb(22 163 74 / 0.45);
    }
    50% {
        box-shadow: 0 0 0 6px rgb(22 163 74 / 0);
    }
}

/* ------------------------------------------------------------
   2. Price callout (article bodies)
   ------------------------------------------------------------ */

/* A short, scannable deal box for use inside a post, e.g. right
   above a buy link. Tinted with the accent, bordered on the
   left, and it works in dark mode because it uses theme vars
   plus a translucent accent wash. */
.price-callout {
    margin: 1.5em 0;
    padding: 1em 1.25em;
    background: rgb(22 163 74 / 0.08);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--ghost-accent-color, #16a34a);
    border-radius: 12px;
}

.price-callout p {
    margin: 0;
}

.price-callout .price-callout-label {
    display: block;
    margin-bottom: 0.25em;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary-text);
}

.price-callout .price-callout-price {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-primary-text);
}

/* ------------------------------------------------------------
   3. Bolder article cards (Source theme, existing classes)
   ------------------------------------------------------------ */

/* No template change needed: this styles the classes that
   partials/post-card.hbs already renders. Cards get a visible
   edge, a touch more weight in the title, and a lift on hover.
   The lift is transform-only, and the card reserves its own
   space, so hovering one card never moves its neighbours. */

.gh-card-link {
    display: block;
    height: 100%;
    overflow: hidden;
    background-color: var(--background-color);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Cards without a feature image keep the same edge, so the
   feed looks even whether or not a post has a photo. */
.gh-card.no-image .gh-card-link {
    background-color: var(--color-lighter-gray);
}

.gh-card-link .gh-card-wrapper {
    padding: 20px 20px 22px;
}

.gh-card-link .gh-card-tag {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ghost-accent-color, #16a34a);
}

.gh-card-link .gh-card-title {
    font-weight: 800;
    font-size: 2.1rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.gh-card-link .gh-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--color-secondary-text);
}

.gh-card-link .gh-card-meta {
    padding-top: 12px;
    margin-top: 12px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-secondary-text);
    border-top: 1px solid var(--color-border);
}

/* Hover lift: only on devices with a real hover pointer, so
   touch readers never get a stuck "hovered" card. Keyboard
   focus gets the same lift plus the theme's visible outline. */
@media (hover: hover) {
    .gh-card-link:hover {
        transform: translateY(-4px);
        border-color: var(--color-dark-border);
        box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.25);
    }
}

.gh-card-link:focus-visible {
    transform: translateY(-4px);
    outline: 2px solid var(--ghost-accent-color, #16a34a);
    outline-offset: 3px;
}

/* Dark mode: soften the hover shadow (a black shadow on a dark
   page reads as mud) and keep the card edge visible. */
@media (prefers-color-scheme: dark) {
    .gh-card-link {
        background-color: rgb(255 255 255 / 0.03);
    }

    .gh-card.no-image .gh-card-link {
        background-color: rgb(255 255 255 / 0.05);
    }

    @media (hover: hover) {
        .gh-card-link:hover {
            box-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.6),
                0 0 0 1px rgb(255 255 255 / 0.06);
        }
    }
}

/* Small screens: slightly smaller titles, gentler lift, and
   the card image keeps its existing zoom-free behaviour here
   (dark-mode.css already handles the image hover zoom). */
@media (max-width: 640px) {
    .gh-card-link .gh-card-title {
        font-size: 1.9rem;
    }

    .gh-card-link .gh-card-wrapper {
        padding: 16px 16px 18px;
    }

    @media (hover: hover) {
        .gh-card-link:hover {
            transform: translateY(-2px);
        }
    }
}

/* ------------------------------------------------------------
   Reduced motion: everything above goes still.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .price-drop-badge {
        animation: none;
        box-shadow: none;
    }

    .gh-card-link {
        transition: none;
    }

    .gh-card-link:hover,
    .gh-card-link:focus-visible {
        transform: none;
    }
}