/* ===========================================================================
   PACK CARDS — Discount-package grid for /lol-boosting-packs/ and siblings
   ============================================================================
   Light-theme card grid rendered by templates/public/product/page_rating_pack.php.
   Each card shows a rank-journey ("Gold → Diamond"), package price, savings,
   completion time, and a CTA. Scoped under .pc-grid to avoid colliding with
   the legacy .boosting-package-list styles still used by single-item products.

   Fonts use the site's identity stack:
     - Heading / title  : AvenirNextCyr-Bold (modern EBL/OWB/Val themes ship
                          this locally), Montserrat fallback for all themes,
                          system-ui last.
     - Numeric display  : same heading stack.
     - Body / micro     : Roboto (loaded by parent boosting theme), system-ui.
     - Mono-ish labels  : SF Mono / Menlo (built-in), no remote mono font —
                          tiny labels with tracked uppercase letterspacing.
============================================================================ */

.pc-grid {
    --pc-bg:          #ffffff;
    --pc-bg-soft:     #f6fafd;
    --pc-ink:         #0c1a2b;
    --pc-ink-soft:    #4a5a6e;
    --pc-ink-muted:   #8a98a8;
    --pc-line:        #e4ecf3;
    --pc-line-soft:   #eef3f8;

    /* Brand blue — matches .calculate-button "RANK UP" in order-preview.css
       (#0364a9) so the pack CTA and the calculator CTA read as one system. */
    --pc-blue:        #0364a9;
    --pc-blue-deep:   #024c80;
    --pc-blue-mid:    #3a9de8;
    --pc-blue-soft:   #b8e0f4;
    --pc-blue-tint:   #eaf6fd;

    --pc-gold:        #b8870a;
    --pc-gold-mid:    #d4a045;
    --pc-gold-soft:   #f0d99b;
    --pc-gold-tint:   #fef5dc;
    --pc-gold-deep:   #8a6608;

    --pc-shadow-soft: 0 1px 2px rgba(15, 60, 100, 0.04), 0 8px 24px rgba(15, 60, 100, 0.06);
    --pc-shadow-pop:  0 2px 4px rgba(15, 60, 100, 0.05), 0 24px 60px rgba(15, 60, 100, 0.08);
    --pc-shadow-cta:  0 4px 14px rgba(37, 99, 235, 0.30),
                      inset 0 1px 0 rgba(255, 255, 255, 0.20),
                      inset 0 -2px 0 rgba(0, 0, 0, 0.10);
    --pc-shadow-cta-hover: 0 6px 20px rgba(37, 99, 235, 0.40),
                            inset 0 1px 0 rgba(255, 255, 255, 0.20),
                            inset 0 -2px 0 rgba(0, 0, 0, 0.10);

    --pc-ease:        cubic-bezier(0.16, 1, 0.3, 1);

    /* Font stack mirrors the "YOUR ORDER" calc-card sidebar
       (order-preview.css:34-37) so the two cards on /lol-boosting-packs/
       read as one system. League for big display, AvenirNextCyr family
       for everything else — bold for emphasis, medium for body / labels. */
    --pc-font-display:'League', 'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                      'Montserrat', system-ui, sans-serif;
    --pc-font-head:   'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                      'Montserrat', system-ui, sans-serif;
    --pc-font-body:   'avenirnextcyr-medium', 'AvenirNextCyr-Medium',
                      system-ui, -apple-system, BlinkMacSystemFont,
                      'Segoe UI', Helvetica, Arial, sans-serif;
    /* Reused for small uppercased labels — same family as body so the
       card avoids the slightly-off feel of a separate monospace face. */
    --pc-font-label:  'avenirnextcyr-medium', 'AvenirNextCyr-Medium',
                      system-ui, sans-serif;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    color: var(--pc-ink);
    font-family: var(--pc-font-body);
    margin-bottom: 28px;
}

/* === Card ============================================================== */
.pc-grid .pc-card {
    background: var(--pc-bg);
    border: 2px solid var(--pc-line);
    border-radius: 10px;
    padding: 28px;
    box-shadow: var(--pc-shadow-soft);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 300ms var(--pc-ease),
                box-shadow 300ms var(--pc-ease),
                border-color 300ms ease;
    opacity: 0;
    transform: translateY(20px);
    animation: pc-reveal 0.7s var(--pc-ease) forwards;
}
.pc-grid .pc-card:nth-child(1) { animation-delay: 0.05s; }
.pc-grid .pc-card:nth-child(2) { animation-delay: 0.12s; }
.pc-grid .pc-card:nth-child(3) { animation-delay: 0.19s; }
.pc-grid .pc-card:nth-child(4) { animation-delay: 0.26s; }
.pc-grid .pc-card:nth-child(5) { animation-delay: 0.33s; }
.pc-grid .pc-card:nth-child(6) { animation-delay: 0.40s; }
@keyframes pc-reveal { to { opacity: 1; transform: translateY(0); } }

.pc-grid .pc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: #e6f2fb;
}
.pc-grid .pc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pc-shadow-pop);
    border-color: var(--pc-blue-soft);
}
/* Selected (clicked) — wires up via existing .pacakge_v_top.currentChoose */
.pc-grid .pc-card.is-chosen,
.pc-grid .pc-card:has(.pacakge_v_top.currentChoose) {
    border-color: var(--pc-blue);
    box-shadow: 0 0 0 1px var(--pc-blue), var(--pc-shadow-pop);
}

/* === Card header ======================================================= */
.pc-grid .pc-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
}
.pc-grid .pc-title-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
/* Card-title — League 500, the site's display face. The accent suffix
   keeps the italic + gold treatment from the original mock so the "to"
   rank still draws the eye, while base text reads as the heading. */
.pc-grid .pc-title {
    font-family: var(--pc-font-display);
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--pc-ink);
}
/* Target-rank suffix in the title — solid brand blue, no italic.
   Reads as "Any Gold to Diamond 4" with the destination tier
   picked out in the site's CTA colour. */
.pc-grid .pc-title em {
    font-style: normal;
    font-weight: 500;
    color: var(--pc-blue);
}
/* Discount pill — solid brand blue with white text, matches the
   site's CTA palette and gives the "-30%" callout the same visual
   weight whether the card is hovered or not. */
.pc-grid .pc-discount-pill {
    font-family: var(--pc-font-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff;
    background: var(--pc-blue);
    border: 1px solid var(--pc-blue);
    padding: 10px 14px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1;
}

/* === Rank journey ===================================================== */
.pc-grid .pc-journey {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: center;
    background: var(--pc-bg-soft);
    border: 1px solid var(--pc-line);
    border-radius: 9px;
    padding: 20px 16px;
    margin-bottom: 22px;
    position: relative;
}
/* Column gap removed in favour of explicit margins below — the badge's
   transparent PNG padding plus a 10px flex gap visually pushed FROM/TO
   too far above the icon. Now FROM/TO sits tight to the badge, name
   gets a small breathing margin below it. */
.pc-grid .pc-rank-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    position: relative;
    min-width: 0;
}
/* FROM / TO eyebrow — League at 14px to match the rest of the
   display typography on the card. Leading dot dropped per review. */
.pc-grid .pc-rank-label {
    font-family: var(--pc-font-display);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pc-ink-muted);
    margin-bottom: 0;
}

/* Rank badge — bumped 50% from the original 90px to give the
   actual game tier art room to read (matches user feedback that
   icons were too small relative to the surrounding card chrome). */
.pc-grid .pc-badge-wrap {
    width: 135px;
    height: 135px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 400ms var(--pc-ease);
}
.pc-grid .pc-card:hover .pc-badge-wrap { transform: translateY(-2px); }
.pc-grid .pc-badge-wrap .pc-glow {
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.45;
    transition: opacity 400ms ease;
    background: radial-gradient(circle, rgba(186, 135, 10, 0.55) 0%, transparent 70%);
}
.pc-grid .pc-card:hover .pc-badge-wrap .pc-glow { opacity: 0.75; }
.pc-grid .pc-badge-wrap img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Anchor the artwork to the lower half of the box so tier icons
       with different vertical centers (e.g. LoL Diamond's crystal
       sits higher inside its 500px canvas than the wing-heavy
       lower-tier emblems) read at a consistent baseline across
       from / to columns. */
    object-position: 50% 70%;
    display: block;
}
.pc-grid .pc-rank-name {
    font-family: var(--pc-font-display);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0;
    color: var(--pc-ink);
    text-align: center;
    line-height: 1.15;
    word-break: break-word;
    margin-top: 4px;
}

/* === Arrow indicator =================================================== */
/* Three right-facing chevrons that pulse sequentially — mirrors the
   site's "scroll down" indicator pattern in checkout, rotated to point
   toward the target rank. Each chevron fades in on a stagger so the
   eye reads left-to-right toward the destination tier. */
/* padding-bottom: 0 — the arrow now sits centered between the two
   icons rather than baseline-aligned with the rank-name row below. */
.pc-grid .pc-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0;
    color: var(--pc-blue);
    position: relative;
}
/* 3-chevron scroll-down-style indicator pointed right. Sized down from
   the previous 56×22 and animation slowed 3× (1.6s → 4.8s) per review;
   stagger between chevrons also scales so the sequential read still
   feels left-to-right rather than three independent loops. */
.pc-grid .pc-arrow svg {
    width: 38px;
    height: 14px;
    overflow: visible;
}
.pc-grid .pc-arrow svg polyline {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.35;
    animation: pc-arrow-pulse 4.8s ease-in-out infinite;
}
.pc-grid .pc-arrow svg polyline:nth-child(1) { animation-delay: 0.0s; }
.pc-grid .pc-arrow svg polyline:nth-child(2) { animation-delay: 0.6s; }
.pc-grid .pc-arrow svg polyline:nth-child(3) { animation-delay: 1.2s; }
@keyframes pc-arrow-pulse {
    0%, 100% { opacity: 0.35; transform: translateX(0); }
    50%      { opacity: 1;    transform: translateX(2px); }
}
.pc-grid .pc-card:hover .pc-arrow { color: var(--pc-gold); }

/* === Stats row ========================================================= */
.pc-grid .pc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
.pc-grid .pc-stat {
    background: var(--pc-bg-soft);
    border: 1px solid var(--pc-line);
    border-radius: 7px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 200ms ease;
}
.pc-grid .pc-stat:hover { border-color: var(--pc-blue-soft); }
.pc-grid .pc-stat-label {
    font-family: var(--pc-font-label);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pc-ink-muted);
}
.pc-grid .pc-stat-value {
    font-family: var(--pc-font-display);
    font-weight: 500;
    font-size: 28px;
    letter-spacing: 0;
    color: var(--pc-ink);
    line-height: 1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.pc-grid .pc-stat-value.accent {
    color: var(--pc-gold-deep);
    font-size: 24px;
}

/* VIP-stacking marker shown next to the "You Save" amount. Communicates
   that returning customers add a flat 10% on top of the package discount —
   the number is calculated live from the displayed pack price so it
   updates with currency / server-rate changes. */
.pc-grid .pc-vip-bonus {
    font-family: var(--pc-font-label);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pc-blue);
    background: var(--pc-blue-tint);
    border: 1px solid var(--pc-blue-soft);
    border-radius: 4px;
    padding: 4px 7px;
    line-height: 1;
    white-space: nowrap;
    align-self: center;
    transition: background 200ms ease, border-color 200ms ease;
}
.pc-grid .pc-vip-bonus::before {
    content: '+';
    margin-right: 2px;
    color: var(--pc-blue);
}
.pc-grid .pc-card:hover .pc-vip-bonus {
    background: #fff;
    border-color: var(--pc-blue);
}

/* === Completion row ==================================================== */
.pc-grid .pc-completion {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--pc-bg-soft);
    border: 1px solid var(--pc-line);
    border-radius: 6px;
    margin-bottom: 22px;
}
.pc-grid .pc-completion svg {
    width: 16px;
    height: 16px;
    color: var(--pc-gold);
    flex-shrink: 0;
}
.pc-grid .pc-completion-label {
    font-family: var(--pc-font-label);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pc-ink-muted);
}
.pc-grid .pc-completion-value {
    margin-left: auto;
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold', 'Montserrat', system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--pc-ink);
    letter-spacing: 0;
}

/* === CTA Button ======================================================== */
/* Matches the .calculate-button "RANK UP" CTA inside the order-card
   calculator (order-preview.css:705-735) so the pack-cards primary action
   and the calculator primary action read as one system: same blue, same
   layered shadow / inset-light treatment, same uppercase weight-500
   typography, same hover lift. The legacy .pacakge_v_top class is kept
   so boosting-calc.js's click handler still finds and toggles the pack. */
.pc-grid .pacakge_v_top {
    position: relative;
    width: 100%;
    height: 56px;
    padding: 0 20px;
    background: var(--pc-blue);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-family: var(--pc-font-display);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto;
    overflow: hidden;
    box-shadow: var(--pc-shadow-cta);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.2s ease;
}
.pc-grid .pacakge_v_top::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transition: left 0.6s var(--pc-ease);
}
.pc-grid .pacakge_v_top:hover {
    transform: translateY(-2px);
    box-shadow: var(--pc-shadow-cta-hover);
}
.pc-grid .pacakge_v_top:hover::before { left: 130%; }
.pc-grid .pacakge_v_top:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.pc-grid .pacakge_v_top.currentChoose {
    background: var(--pc-blue-deep);
}
.pc-grid .pacakge_v_top svg {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
    transition: transform 0.35s ease;
}
.pc-grid .pacakge_v_top:hover svg { transform: translateX(3px); }

/* === Responsive ======================================================== */
@media (max-width: 1100px) {
    .pc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .pc-grid { grid-template-columns: 1fr; gap: 16px; }
    .pc-grid .pc-card { padding: 22px; }
    .pc-grid .pc-badge-wrap { width: 110px; height: 110px; }
    .pc-grid .pc-title { font-size: 22px; }
    .pc-grid .pc-stat-value { font-size: 24px; }
    .pc-grid .pc-stat-value.accent { font-size: 20px; }
    .pc-grid .pc-rank-name { font-size: 16px; }
    .pc-grid .pc-discount-pill { font-size: 18px; padding: 8px 12px; }
    .pc-grid .pc-arrow svg { width: 42px; height: 18px; }
    .pc-grid .pacakge_v_top { height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .pc-grid .pc-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .pc-grid .pc-card,
    .pc-grid .pc-card *,
    .pc-grid .pc-card *::before,
    .pc-grid .pc-card *::after {
        animation-duration: 0.01s !important;
        transition-duration: 0.01s !important;
    }
}