/* =====================================================
   Shared Product Page Styles
   Common layout for all product pages (hero, plans,
   hardware, section decorations, responsive rules).
   ===================================================== */

/* ── Hero ── */

.hero-section {
    position: relative;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-top: -80px;
    padding-top: 200px;
    padding-bottom: 80px;
}

.hero-centered {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
}

/* Status badge sits just above the hero title, centered with it. */
.product-status-badge {
    margin-bottom: 4px;
}

.hero-centered h1 {
    letter-spacing: -0.035em;
    margin: 20px 0 16px;
    /* Fluid size so the colored line never wraps — caps at the design 72px on
       wide screens, scales down on narrower viewports to stay on one line. */
    font-size: clamp(1.75rem, 5.2vw, 4.5rem);
    white-space: nowrap;
}

.hero-centered .lead {
    max-width: 680px;
    margin: 0 auto 28px;
    color: var(--text-body);
}

.hero-actions {
    display: flex;
    gap: var(--gap-sm);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}

/* Hero stats row */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    padding-top: 22px;
    border-top: 1px dashed rgba(255,255,255,0.08);
}

.hero-stats__item {
    text-align: center;
}

.hero-stats__value {
    font-family: var(--mono-font);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-heading);
}

.hero-stats__label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ── Section Header ── */
.section-header {
    margin-bottom: 32px;
}

.section-header .tag {
    margin-bottom: 12px;
}

.section-header h2 {
    margin-bottom: 5px;
}

.section-header .text-muted {
    font-size: 0.8125rem;
}

/* ── Hero Banner Background ── */

.hero-banner {
    position: absolute;
    /* Extends above the section so the parallax drift never reveals a gap */
    inset: -80px 0 0 0;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    /* Scroll parallax (set by scroll-parallax.js); `translate` composes with `transform` */
    translate: 0 var(--parallax-y, 0px);
}

/* ── Section Decorative Characters ── */
.section-with-deco,
.plans-section {
    position: relative;
}

.section-with-deco > .container,
.plans-section > .container {
    position: relative;
    z-index: 1;
}

/* Every deco is anchored the same way: to its section's top-left (or top-right), then
   nudged by --deco-x / --deco-y. ONE convention, so a number always means the same thing.
   Anchoring to the top rather than the centre keeps the offsets stable when a section
   grows or shrinks with the viewport - the cards a deco hides behind sit a roughly fixed
   distance below the section top, while the section's total height varies a lot.
   Page files must ONLY set the variables below - never top/right/left/transform.
   That is what keeps one game's tuning from moving another game's images. */
.section-deco {
    position: absolute;
    top: 0;
    height: var(--deco-h, 300px);
    width: auto;
    opacity: var(--deco-opacity, 0.20);
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 30px rgba(var(--primary-color-rgb), 0.15));
    transform: translate(var(--deco-x, 0px), var(--deco-y, 0px))
               rotate(var(--deco-rot, 0deg));
    /* Scroll parallax (set by scroll-parallax.js); `translate` composes with `transform` */
    translate: 0 var(--parallax-y, 0px);
}

/* Anchor side only. Positive --deco-x always moves right, positive --deco-y always
   moves down, for both sides. */
.section-deco--right {
    right: 0;
    left: auto;
}

.section-deco--left {
    left: 0;
    right: auto;
}

/* ── Pricing failure notice — sits above the grid when no tier could be quoted ── */
.pricing-error {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
    padding: var(--gap-sm) var(--gap-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    background: var(--bg-dark-2);
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.pricing-error__retry {
    padding: 6px var(--gap-sm);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.pricing-error__retry:hover {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.06);
}

.pricing-error__retry:focus-visible {
    outline: 2px solid var(--primary-color, #6674f4);
    outline-offset: 2px;
}

/* ── Tier Cards Grid — 4 tiers fill the row, Custom spans full width below ── */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 12px;
}

.tiers-grid > .tier-card {
    min-width: 0;
}

@media (max-width: 880px) {
    .tiers-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .tiers-grid { grid-template-columns: 1fr; }
}

/* Custom card — full-width row under the tier cards, styled to match them */
.tiers-grid > .bento-more {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    text-align: left;
    height: auto;
    min-height: 0;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.tiers-grid > .bento-more:hover {
    border-color: rgba(var(--primary-color-rgb), 0.55);
    box-shadow: 0 0 28px rgba(var(--primary-color-rgb), 0.12);
}

/* Coming soon — Custom card is shown but inert (no store ID yet) */
.tiers-grid > .bento-more--disabled {
    pointer-events: none;
    opacity: 0.55;
}

.tiers-grid > .bento-more .bento-more__content {
    display: flex;
    align-items: center;
    gap: 16px;
    width: auto;
}

.tiers-grid > .bento-more .bento-more__icon {
    margin: 0;
    flex-shrink: 0;
}

.tiers-grid > .bento-more .bento-more__title {
    margin: 0 0 2px;
}

/* Right-side chevron affordance */
.tiers-grid > .bento-more .bento-more__arrow {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.tiers-grid > .bento-more:hover .bento-more__arrow {
    transform: translateX(4px);
}

/* Out of stock — greyed card, red button replaces deploy */
.tier-card--out-of-stock {
    opacity: 0.55;
    pointer-events: none;
}

.tier-card--out-of-stock .btn {
    pointer-events: none;
    cursor: not-allowed;
    border-color: var(--status-red);
    color: var(--status-red);
    font-size: 0;
}

.tier-card--out-of-stock .btn::after {
    content: attr(data-stock-label);
    font-size: 14px;
}

@keyframes pricePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.15; }
}

/* Billing note */
.plans-billing-note {
    text-align: center;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-family: var(--mono-font);
    margin-top: 16px;
    opacity: 0.6;
}

/* ── Responsive ── */

/* 991px, not 960: .hwc__grid drops from two columns to one at max-width 991px
   (components/hardware-clusters.css), so the deco bands have to switch where the
   layout actually switches, or a deco tuned for the side-by-side hardware section
   gets applied to the stacked one. */
@media (max-width: 991px) {
    /* Size/opacity only. Each page file carries its own offsets per band
       (desktop >=992, tablet 769-991, small 576-768, phone <=575), so the bands
       never overlap and never fight over specificity. */
    .section-deco {
        --deco-h: 150px;
        --deco-opacity: 0.12;
        --deco-x: 0px;
        --deco-y: 0px;
        z-index: -1;
    }
}

@media (max-width: 768px) {
    .hero-stats {
        gap: 16px;
    }
    .hero-stats__value {
        font-size: 1rem;
    }
    .selector-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .selector-chips {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }
}