/**
 * PrintifySign — Inline Template Discovery styles (Wave 3)
 *
 * File:    assets/display/display-inline-templates.css
 * Status:  NEW file. Additive. Reuses landing-tokens.css (enqueued on /display/
 *          as psd-platform-tokens). Scoped under .psd-inline-* so it cannot
 *          leak into the product grid or configure view.
 */

/* ─── Select Design button on product cards ───────────────────────────── */
.psd-d-product-select-design {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(212, 169, 96, 0.5);
    padding: 0 0 1px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--psd-l-gold-text, #84632c);
    cursor: pointer;
    transition: gap 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.psd-d-product-select-design:hover {
    gap: 9px;
    color: var(--psd-l-gold, #d4a960);
    border-color: var(--psd-l-gold, #d4a960);
}
.psd-d-product-select-design:focus-visible {
    outline: 2px solid var(--psd-l-gold, #d4a960);
    outline-offset: 2px;
}

/* ─── Inline section (collapsed → open reveal) ────────────────────────── */
.psd-inline-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 5vw, 56px);
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
                opacity 0.4s ease,
                padding 0.4s ease;
}
.psd-inline-section--collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}
.psd-inline-section--open {
    max-height: 4000px;   /* large enough to fit any filtered set */
    opacity: 1;
    padding-top: clamp(40px, 7vw, 80px);
    padding-bottom: clamp(56px, 9vw, 110px);
    pointer-events: auto;
}

.psd-inline-inner { width: 100%; }

/* Top divider to separate from the product grid above */
.psd-inline-section--open .psd-inline-inner {
    border-top: 1px solid var(--psd-l-border-light, rgba(10,10,10,0.06));
    padding-top: clamp(32px, 5vw, 56px);
}

/* ─── Header ──────────────────────────────────────────────────────────── */
.psd-inline-header { margin-bottom: clamp(24px, 4vw, 40px); }

.psd-inline-eyebrow {
    display: inline-block;
    font-size: var(--psd-l-type-eyebrow, 11.5px);
    font-weight: var(--psd-l-weight-medium, 500);
    letter-spacing: var(--psd-l-tracking-wide, 3px);
    text-transform: uppercase;
    color: var(--psd-l-text-muted, #8a8579);
    margin-bottom: var(--psd-l-space-3, 12px);
}
.psd-inline-heading {
    font-family: var(--psd-l-font-editorial, Georgia, serif);
    font-size: var(--psd-l-type-section, clamp(28px, 3.2vw, 44px));
    font-weight: var(--psd-l-weight-regular, 400);
    line-height: var(--psd-l-leading-snug, 1.2);
    letter-spacing: var(--psd-l-tracking-snug, -0.5px);
    margin: 0;
    text-transform: capitalize;
}
.psd-inline-heading-type { color: var(--psd-l-gold-text, #84632c); }

/* ─── Masonry ─────────────────────────────────────────────────────────── */
.psd-inline-masonry {
    column-count: 1;
    column-gap: clamp(14px, 2vw, 24px);
}
@media (min-width: 560px)  { .psd-inline-masonry { column-count: 2; } }
@media (min-width: 900px)  { .psd-inline-masonry { column-count: 3; } }
@media (min-width: 1180px) { .psd-inline-masonry { column-count: 4; } }

/* ─── Card ────────────────────────────────────────────────────────────── */
.psd-inline-card {
    display: block;
    width: 100%;
    margin: 0 0 clamp(14px, 2vw, 24px);
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    background: #fff;
    border: 1px solid var(--psd-l-border-light, rgba(10,10,10,0.06));
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10,10,10,0.04), 0 8px 24px rgba(10,10,10,0.05);
    transition: transform 0.22s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.22s ease, border-color 0.22s ease;
}
.psd-inline-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(10,10,10,0.07), 0 18px 48px rgba(10,10,10,0.12);
    border-color: var(--psd-l-border-light-hover, rgba(10,10,10,0.12));
}
.psd-inline-card:focus-visible {
    outline: 2px solid var(--psd-l-gold, #d4a960);
    outline-offset: 3px;
}
.psd-inline-card--hidden { display: none; }

/* Mockup (CSS-rendered standee — no image dependency) */
.psd-inline-card-mockup {
    position: relative;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.6), rgba(0,0,0,0) 55%),
        linear-gradient(160deg, #ece9e2 0%, #d9d4ca 100%);
    overflow: hidden;
}
.psd-inline-card-mockup::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 12px;
    width: 56%; height: 14px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.22), rgba(0,0,0,0) 70%);
    filter: blur(1px);
}
.psd-inline-card-standee {
    position: relative;
    z-index: 1;
    width: 62%;
    min-height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
.psd-inline-card-standee-text {
    font-family: var(--psd-l-font-editorial, Georgia, serif);
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.18;
    letter-spacing: -0.2px;
}

/* Accent finishes */
.psd-inline-card--gold  .psd-inline-card-standee { background: linear-gradient(155deg,#f4dca0,#d4a960 48%,#b88a3d); }
.psd-inline-card--gold  .psd-inline-card-standee-text { color:#3a2c10; }
.psd-inline-card--paper .psd-inline-card-standee { background: linear-gradient(155deg,#fff,#f1efe9); border:1px solid rgba(10,10,10,0.08); }
.psd-inline-card--paper .psd-inline-card-standee-text { color:#1a1a1a; }
.psd-inline-card--steel .psd-inline-card-standee { background: linear-gradient(155deg,#e8eaed,#aab0b8 50%,#7d838c); }
.psd-inline-card--steel .psd-inline-card-standee-text { color:#1c2026; }
.psd-inline-card--rose  .psd-inline-card-standee { background: linear-gradient(155deg,#f6dccb,#e6b89c 55%,#c98f72); }
.psd-inline-card--rose  .psd-inline-card-standee-text { color:#3d271c; }
.psd-inline-card--pink  .psd-inline-card-standee { background:#14060f; box-shadow:0 10px 26px rgba(0,0,0,0.35), 0 0 26px var(--psd-l-neon-pink-glow, rgba(255,61,138,0.65)); }
.psd-inline-card--pink  .psd-inline-card-standee-text { color: var(--psd-l-neon-pink, #ff3d8a); text-shadow:0 0 10px var(--psd-l-neon-pink-glow, rgba(255,61,138,0.65)); }
.psd-inline-card--blue  .psd-inline-card-standee { background:#061018; box-shadow:0 10px 26px rgba(0,0,0,0.35), 0 0 26px var(--psd-l-neon-cyan-glow, rgba(77,212,255,0.55)); }
.psd-inline-card--blue  .psd-inline-card-standee-text { color: var(--psd-l-neon-cyan, #4dd4ff); text-shadow:0 0 10px var(--psd-l-neon-cyan-glow, rgba(77,212,255,0.55)); }

/* Card body */
.psd-inline-card-body { padding: var(--psd-l-space-5, 24px); }
.psd-inline-card-title {
    font-family: var(--psd-l-font-display, sans-serif);
    font-size: 17px;
    font-weight: var(--psd-l-weight-medium, 500);
    line-height: 1.2;
    letter-spacing: -0.2px;
    margin: 0 0 var(--psd-l-space-2, 8px);
}
.psd-inline-card-use {
    font-size: var(--psd-l-type-body, 14px);
    line-height: 1.5;
    color: var(--psd-l-text-secondary, #5c5950);
    margin: 0 0 var(--psd-l-space-4, 16px);
}
.psd-inline-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--psd-l-type-chip, 13.5px);
    font-weight: var(--psd-l-weight-medium, 500);
    color: var(--psd-l-text-primary, #0a0a0a);
    border-bottom: 1px solid var(--psd-l-border-light-firm, rgba(10,10,10,0.18));
    padding-bottom: 2px;
    transition: gap 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.psd-inline-card:hover .psd-inline-card-cta {
    gap: 11px;
    color: var(--psd-l-gold-text, #84632c);
    border-color: var(--psd-l-gold, #d4a960);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .psd-inline-section,
    .psd-inline-card,
    .psd-inline-card-cta,
    .psd-d-product-select-design { transition: none; }
    .psd-inline-card:hover { transform: none; }
}