/*
 * Websly Card Skins — composed visual presets layered on top of the 3-axis
 * surface model. Registered in inc/websly-presets-registry.php
 * (websly_get_card_skins). Apply via websly_get_card_skin_class().
 *
 * Each skin is additive: the underlying card may be solid/glass/transparent,
 * any tone, any frame. The skin styles hover, image treatment, badge chips,
 * footer meta, etc. — and degrades gracefully on cards that don't have all
 * the optional slots (e.g. team cards with no image overlay).
 *
 * Honour prefers-reduced-motion globally.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Skin: Glass Blog
 * Reference: 21st.dev community / glass-blog-card-shadcnui (Moumen Soliman)
 * ───────────────────────────────────────────────────────────────────────── */

.ws-card-skin-glass-blog {
    --ws-card-skin-radius: var(--radius-card, 1rem);
    --ws-card-skin-pad: clamp(1rem, 2vw, 1.5rem);
    --ws-card-skin-border: 1px solid rgba(var(--text-base-rgb, 20, 20, 20), 0.12);
    --ws-card-skin-shadow-hover: 0 24px 60px -20px rgba(var(--theme-accent-rgb, 0, 0, 0), 0.22);
    --ws-card-skin-img-aspect: 16 / 9;

    position: relative;
    overflow: hidden;
    border-radius: var(--ws-card-skin-radius);
    border: var(--ws-card-skin-border);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms ease;
}

.ws-card-skin-glass-blog:hover {
    border-color: rgba(var(--theme-accent-rgb, 0, 0, 0), 0.5);
    box-shadow: var(--ws-card-skin-shadow-hover);
}

/* Image slot: any direct <a> wrapping <img>, or any .ws-card-image / figure */
.ws-card-skin-glass-blog > a:first-child,
.ws-card-skin-glass-blog .ws-card-image,
.ws-card-skin-glass-blog > figure {
    position: relative;
    display: block;
    aspect-ratio: var(--ws-card-skin-img-aspect);
    overflow: hidden;
    background: rgba(var(--text-base-rgb, 0, 0, 0), 0.04);
}

.ws-card-skin-glass-blog > a:first-child > img,
.ws-card-skin-glass-blog .ws-card-image img,
.ws-card-skin-glass-blog > figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms ease;
}

.ws-card-skin-glass-blog:hover > a:first-child > img,
.ws-card-skin-glass-blog:hover .ws-card-image img,
.ws-card-skin-glass-blog:hover > figure img {
    transform: scale(1.08);
}

/* Bottom-up gradient over image */
.ws-card-skin-glass-blog > a:first-child::after,
.ws-card-skin-glass-blog .ws-card-image::after,
.ws-card-skin-glass-blog > figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
    opacity: 0.6;
    transition: opacity 320ms ease;
    pointer-events: none;
}

.ws-card-skin-glass-blog:hover > a:first-child::after,
.ws-card-skin-glass-blog:hover .ws-card-image::after,
.ws-card-skin-glass-blog:hover > figure::after {
    opacity: 0.4;
}

/* "Read Article" hover overlay button (rendered by templates that opt in) */
.ws-card-skin-glass-blog .ws-card-skin-read-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--page-bg-rgb, 255, 255, 255), 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 320ms ease;
    pointer-events: none;
    z-index: 2;
}

.ws-card-skin-glass-blog:hover .ws-card-skin-read-overlay {
    opacity: 1;
    pointer-events: auto;
}

.ws-card-skin-glass-blog .ws-card-skin-read-overlay > .ws-card-skin-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-accent-text, #fff);
    background: var(--theme-accent, currentColor);
    border-radius: 9999px;
    box-shadow: 0 10px 25px -8px rgba(var(--theme-accent-rgb, 0, 0, 0), 0.4);
    transform: scale(1);
    transition: transform 200ms ease;
}

.ws-card-skin-glass-blog .ws-card-skin-read-overlay > .ws-card-skin-read-btn:hover {
    transform: scale(1.05);
}

.ws-card-skin-glass-blog .ws-card-skin-read-overlay > .ws-card-skin-read-btn:active {
    transform: scale(0.95);
}

.ws-card-skin-glass-blog .ws-card-skin-read-overlay svg {
    width: 1rem;
    height: 1rem;
}

/* Tag chips floated over the image (opt-in: .ws-card-skin-tags) */
.ws-card-skin-glass-blog .ws-card-skin-tags {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    z-index: 1;
}

.ws-card-skin-glass-blog .ws-card-skin-tag {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-base);
    background: rgba(var(--page-bg-rgb, 255, 255, 255), 0.55);
    border-radius: 9999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color 200ms ease;
    line-height: 1.2;
}

.ws-card-skin-glass-blog .ws-card-skin-tag:hover {
    background: rgba(var(--page-bg-rgb, 255, 255, 255), 0.85);
}

/* Title accent on hover */
.ws-card-skin-glass-blog h3,
.ws-card-skin-glass-blog .ws-card-title {
    transition: color 240ms ease;
}

.ws-card-skin-glass-blog:hover h3,
.ws-card-skin-glass-blog:hover .ws-card-title {
    color: var(--theme-accent, currentColor);
}

/* Footer meta — auto-targets the existing post-card meta row */
.ws-card-skin-glass-blog .websly-post-card-meta,
.ws-card-skin-glass-blog .ws-card-skin-footer {
    border-top-color: rgba(var(--text-base-rgb, 0, 0, 0), 0.08);
}

/* Reduced motion — disable transforms but keep colour transitions */
@media (prefers-reduced-motion: reduce) {
    .ws-card-skin-glass-blog,
    .ws-card-skin-glass-blog *,
    .ws-card-skin-glass-blog *::after {
        transition-duration: 1ms !important;
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Skin: Glass Frosted
 * Reference: 21st.dev community / easemize / animated-glassy-pricing
 * Base state mirrors the resting card; hover mirrors the "Most Popular"
 * treatment (brighter gradient, accent ring, scale, larger shadow).
 * ───────────────────────────────────────────────────────────────────────── */

.ws-card-skin-glass-frosted {
    --ws-card-skin-radius: var(--radius-card, 1rem);
    --ws-card-skin-grad-from: rgba(var(--text-base-rgb, 20, 20, 20), 0.05);
    --ws-card-skin-grad-to: rgba(var(--text-base-rgb, 20, 20, 20), 0);
    --ws-card-skin-border-color: rgba(var(--text-base-rgb, 20, 20, 20), 0.10);
    --ws-card-skin-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.18);
    --ws-card-skin-shadow-hover: 0 28px 70px -18px rgba(var(--theme-accent-rgb, 0, 0, 0), 0.32);
    --ws-card-skin-ring-color: rgba(var(--theme-accent-rgb, 0, 200, 255), 0.22);

    position: relative;
    border-radius: var(--ws-card-skin-radius);
    border: 1px solid var(--ws-card-skin-border-color);
    background-image: linear-gradient(135deg, var(--ws-card-skin-grad-from), var(--ws-card-skin-grad-to));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--ws-card-skin-shadow);
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms ease,
        border-color 320ms ease,
        background-image 320ms ease;
}

/* On a dark surface, push the gradient lighter (matches dark-mode variant in source). */
.ws-tone-strong .ws-card-skin-glass-frosted,
.ws-tone-inverted .ws-card-skin-glass-frosted {
    --ws-card-skin-grad-from: rgba(255, 255, 255, 0.10);
    --ws-card-skin-grad-to: rgba(255, 255, 255, 0.05);
    --ws-card-skin-border-color: rgba(255, 255, 255, 0.10);
}

/* Hover = the "Most Popular" treatment from the reference. */
.ws-card-skin-glass-frosted:hover,
.ws-card-skin-glass-frosted:focus-within,
.ws-card-skin-glass-frosted.is-featured {
    --ws-card-skin-grad-from: rgba(var(--text-base-rgb, 20, 20, 20), 0.10);
    --ws-card-skin-grad-to: rgba(var(--text-base-rgb, 20, 20, 20), 0.04);
    border-color: rgba(var(--theme-accent-rgb, 0, 200, 255), 0.45);
    box-shadow:
        var(--ws-card-skin-shadow-hover),
        0 0 0 2px var(--ws-card-skin-ring-color);
    transform: translateY(-2px) scale(1.025);
}

.ws-tone-strong .ws-card-skin-glass-frosted:hover,
.ws-tone-strong .ws-card-skin-glass-frosted:focus-within,
.ws-tone-strong .ws-card-skin-glass-frosted.is-featured,
.ws-tone-inverted .ws-card-skin-glass-frosted:hover,
.ws-tone-inverted .ws-card-skin-glass-frosted:focus-within,
.ws-tone-inverted .ws-card-skin-glass-frosted.is-featured {
    --ws-card-skin-grad-from: rgba(255, 255, 255, 0.20);
    --ws-card-skin-grad-to: rgba(255, 255, 255, 0.10);
}

/* Hairline shimmer divider — opt-in via .ws-card-skin-divider inside the card. */
.ws-card-skin-glass-frosted .ws-card-skin-divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--text-base-rgb, 0, 0, 0), 0.14) 50%,
        transparent);
}

.ws-tone-strong .ws-card-skin-glass-frosted .ws-card-skin-divider,
.ws-tone-inverted .ws-card-skin-glass-frosted .ws-card-skin-divider {
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.09) 20%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.09) 80%,
        transparent);
}

@media (prefers-reduced-motion: reduce) {
    .ws-card-skin-glass-frosted,
    .ws-card-skin-glass-frosted * {
        transition-duration: 1ms !important;
        transform: none !important;
    }
}