/**
 * cs.money block defensive base styles.
 *
 * Mirrors the Tailwind utilities used by the blade templates so the
 * cards render correctly on production deployments where the Pley
 * theme's compiled CSS bundle predates utilities like aspect-[5/4],
 * has-[a:focus-visible], group-hover:scale-110, min-h-[2.6em], or the
 * arbitrary `bg-[#HEX]` wear-color classes generated in PHP. Reaching
 * for these defensive rules instead of relying on a theme rebuild lets
 * the plugin ship visual updates independently of the theme deploy
 * cycle.
 *
 * Scope is intentionally narrow — every selector is anchored either on
 * a block wrapper class (`.pley-csmoney-*-block`) or on a hook class
 * (`.pley-csm-*`) that the blades opt into. We never style bare HTML
 * tags in the document, so the file has no risk of bleeding outside
 * the cs.money / Pro Skins surface.
 */

/* ── Card image area ──────────────────────────────────────────────
   aspect-[5/4] (Tailwind arbitrary value). Without this the image
   container collapses to 0 height because its only sibling layout
   utility is `flex items-center justify-center`. */
.pley-csm-card-image {
    position: relative;
    aspect-ratio: 5 / 4;
}

/* ── Hover image zoom ─────────────────────────────────────────────
   group-hover:scale-110 / scale-105. Animated transform on the inner
   <img>; activated by hover on the card root (.pley-csm-card). */
.pley-csm-card .pley-csm-card-image > img {
    transition: transform 0.5s ease-out;
}
.pley-csm-card:hover .pley-csm-card-image > img {
    transform: scale(1.10);
}
.pley-csm-card.pley-csm-card--compact:hover .pley-csm-card-image > img {
    transform: scale(1.05);
}

/* ── Corner badges ────────────────────────────────────────────────
   absolute top-2 left-2 z-20 / top-2 right-2 z-20. Without `position:
   absolute` the badges fall into normal flow inside the parent's
   flexbox and get visually centred on top of the weapon image. */
.pley-csm-badge {
    position: absolute;
    z-index: 20;
}
.pley-csm-badge--wear { top: 8px; left:  8px; }
.pley-csm-badge--st   { top: 8px; right: 8px; }
/* Smaller offsets for the loadout ring-card variant (top-1.5). */
.pley-csm-badge--xs.pley-csm-badge--wear { top: 6px; left:  6px; }
.pley-csm-badge--xs.pley-csm-badge--st   { top: 6px; right: 6px; }

/* ── Wear-color stripe (bottom edge of the image) ─────────────────
   absolute bottom-0 inset-x-0 z-20 h-[3px]. Cards without explicit
   bottom positioning render the stripe inline at the wear-class's
   intrinsic height (auto), producing the chunky white-ish bar seen
   in the broken state. */
.pley-csm-wear-stripe {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 20;
}
/* Loadout ring-cards use a 2px stripe to feel proportionally lighter. */
.pley-csm-wear-stripe--thin { height: 2px; }

/* ── Wear-color fills ─────────────────────────────────────────────
   Tailwind doesn't reliably emit arbitrary `bg-[#HEX]` classes for
   PHP-generated strings (none present in the production bundle even
   though the safelist comments list them). Stable classes here are
   appended by pley_csmoney_wear_class() alongside the Tailwind ones
   so we keep both code paths working. */
.pley-csm-wear-fn { background-color: #4EBA00; }
.pley-csm-wear-mw { background-color: #E5C814; }
.pley-csm-wear-ft { background-color: #F18805; }
.pley-csm-wear-ww { background-color: #C8401A; }
.pley-csm-wear-bs { background-color: #8C1A1A; }
.pley-csm-wear-na { background-color: #7E7D77; }

/* ── Card title height ────────────────────────────────────────────
   min-h-[2.6em] reserves two text lines so cards in a grid line up
   regardless of name length. */
.pley-csm-card-name { min-height: 2.6em; }

/* ── Single-card layout cap ───────────────────────────────────────
   For count===1 the skins-block grid collapses to a centred flex row
   and the card itself caps at max-w-sm (Tailwind = 24rem). */
.pley-csm-card--solo { width: 100%; max-width: 24rem; }

/* ── Theme `prose` reset ──────────────────────────────────────────
   not-prose is missing from the production bundle. The Pley theme's
   article-prose styles otherwise add link underlines, italic emphasis,
   and 1em margins that disfigure our cards inside post content. We
   reset only what hits visible card chrome — link styling, paragraph
   margins, list bullets — to keep the blast radius tight. */
.pley-csmoney-skins-block a,
.pley-csmoney-skin-combo-block a,
.pley-csmoney-loadout-block a {
    text-decoration: none;
    color: inherit;
}
.pley-csmoney-skins-block p,
.pley-csmoney-skin-combo-block p,
.pley-csmoney-loadout-block p,
.pley-csmoney-skins-block h3,
.pley-csmoney-skin-combo-block h3,
.pley-csmoney-loadout-block h3,
.pley-csmoney-skins-block h4,
.pley-csmoney-skin-combo-block h4,
.pley-csmoney-loadout-block h4 {
    margin: 0;
}
.pley-csmoney-skins-block ul,
.pley-csmoney-skin-combo-block ul,
.pley-csmoney-loadout-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ── has-[a:focus-visible] focus ring ─────────────────────────────
   The Tailwind utility `has-[a:focus-visible]:ring-2 ring-brand` is
   not in the production bundle. Reproduce it as a real ring (outline
   keeps the rounded corners snug). Card root opts in via .pley-csm-card. */
.pley-csm-card:has(a:focus-visible) {
    outline: 2px solid #F18805;
    outline-offset: 2px;
}

/* ── Wear-color dot ───────────────────────────────────────────────
   The small coloured pip inside a wear badge (skins / combo) and the
   stand-alone wear marker on loadout ring-cards. Tailwind utilities
   `w-1.5 h-1.5 rounded-full inline-block` carry the geometry; without
   them the pip collapses to 0×0 and the colour never shows even with
   `bg-[#HEX]` applied. */
.pley-csm-wear-dot {
    display: inline-block;
    width: 0.375rem;            /* 6px (w-1.5) */
    height: 0.375rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.pley-csm-wear-dot--md {
    width: 0.5rem;              /* 8px (w-2) */
    height: 0.5rem;
}

/* ── Editorial brand heading (#ff9e2a) ────────────────────────────
   Combo / loadout title colour. The arbitrary `text-[#ff9e2a]` class
   isn't compiled on stale bundles → title falls back to inherit and
   the orange identity is lost. */
.pley-csm-heading-orange {
    color: #ff9e2a;
}

/* ── Tracking / letter-spacing helpers ────────────────────────────
   `tracking-[0.18em]` (uppercase eyebrows) is missing from the bundle.
   Apply via hook so we don't depend on a rebuild. */
.pley-csm-eyebrow {
    letter-spacing: 0.18em;
}

/* ── Loadout panel responsive padding ─────────────────────────────
   The loadout block's `sm:px-4 md:px-5 lg:px-6 sm:py-8 md:py-10
   lg:py-12` chain is mostly missing from the production bundle, so
   the panel stays at the base mobile padding even on desktop. The
   hook below mirrors the intended scale. */
.pley-csm-loadout-panel {
    padding: 1rem 0.75rem;          /* py-4 px-3 */
}
@media ( min-width: 640px ) {
    .pley-csm-loadout-panel { padding: 1.25rem 1rem; }    /* sm:py-5 sm:px-4 */
}
@media ( min-width: 768px ) {
    .pley-csm-loadout-panel { padding: 1.5rem 1.25rem; }  /* md:py-6 md:px-5 */
}
@media ( min-width: 1024px ) {
    .pley-csm-loadout-panel { padding: 2rem 1.5rem; }     /* lg:py-8 lg:px-6 */
}

/* ── Loadout layout toggle ────────────────────────────────────────
   The frontend depends on `hidden md:block` / `md:hidden flex …` to
   pick between the radial desktop layout and the mobile stack. With
   `md:block` / `md:hidden` missing from the bundle the desktop never
   appears. Drive the toggle from this CSS instead — the markup adds
   stable hook classes. The editor preview opts into "always radial"
   by adding `.pley-csm-loadout--editor` to the panel wrapper. */
.pley-csm-loadout-radial { display: none; }
.pley-csm-loadout-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media ( min-width: 768px ) {
    .pley-csm-loadout-radial { display: block; }
    .pley-csm-loadout-stack  { display: none; }
}
.pley-csm-loadout--editor .pley-csm-loadout-radial { display: block; }
.pley-csm-loadout--editor .pley-csm-loadout-stack  { display: none; }

/* ── Mobile loadout agent aspect ratio ────────────────────────────
   `aspect-[4/3]` arbitrary value isn't compiled on the live bundle;
   without an explicit ratio the agent card collapses to 0 height. */
.pley-csm-agent-mobile-frame {
    aspect-ratio: 4 / 3;
}

/* ── In-card CTA pill ─────────────────────────────────────────────
   The "Buy on cs.money" pill at the bottom of each card. Several of
   its Tailwind utilities are missing from the production bundle —
   most critically `w-3.5 h-3.5` for the arrow (without it the inline
   SVG falls back to the browser default of 300×150) and `py-2.5
   sm:py-3` for vertical padding. Pin everything here so the pill
   always reads as a proper button. */
.pley-csm-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;                /* gap-1.5 */
    width: 100%;
    padding: 0.625rem 0.5rem;     /* py-2.5 px-2 */
    border-radius: 0.5rem;        /* rounded-lg */
    /* from-brand → to-[#E0612A] gradient */
    background-image: linear-gradient(to right, #F18805 0%, #E0612A 100%);
    color: #ffffff;
    font-size: 0.625rem;          /* text-2xs */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    box-shadow:
        0 10px 15px -3px rgba(241, 136, 5, 0.20),
        inset 0 0 0 1px rgba(255, 255, 255, 0.10);
    transition: filter 0.3s ease-out, box-shadow 0.3s ease-out;
}
@media ( min-width: 640px ) {
    .pley-csm-cta {
        gap: 0.5rem;              /* sm:gap-2 */
        padding: 0.75rem;         /* sm:py-3 sm:px-3 */
        font-size: 0.75rem;       /* sm:text-xs */
    }
}
/* group-hover gradient swap (from-[#FF9A2A] → to-brand) approximated
   via a brightness lift — same visual idea, build-independent. */
.pley-csm-card:hover .pley-csm-cta {
    filter: brightness(1.08);
    box-shadow:
        0 20px 25px -5px rgba(241, 136, 5, 0.40),
        inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.pley-csm-cta-arrow {
    width: 0.875rem;              /* w-3.5 */
    height: 0.875rem;
    flex-shrink: 0;
    display: inline-block;
}
/* Shimmer sweep — the inner span uses translate-x; pin a width so
   it doesn't collapse without the Tailwind utilities. */
.pley-csm-cta-shimmer {
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transition: transform 0.7s ease-out;
    pointer-events: none;
}
.pley-csm-card:hover .pley-csm-cta-shimmer {
    transform: translateX(100%);
}