/* A játékról page-owned styles */

.a-jatekrol-page {
    --page-bg: var(--color-obsidian);
    --page-surface: var(--color-void);
    --page-deep: var(--color-deep-indigo);
    --page-gold: var(--color-glowing-gold);
    --page-ember: var(--color-ember-gold);
    --page-mist: var(--color-mist);
    --page-fog: var(--color-fog);
    --page-rune: var(--color-rune-line);
    --page-violet: var(--color-violet);
    --page-blue: var(--color-royal-blue);
    --page-danger: var(--color-danger);
    --page-success: var(--color-success);

    background-color: var(--page-bg);
    color: var(--page-mist);
}

/* Hero section */
.hero-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--page-bg);
}

.hero-background {
    position: absolute;
    inset: 0;
    background-image: url('/public/media/summoners-war-sky-arena-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    transform: scale(1.02);
    transition: transform 12s ease-out;
}

.hero-background::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 10, 15, 0.85) 0%, rgba(10, 10, 15, 0.55) 40%, rgba(10, 10, 15, 0.85) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    width: 100%;
    margin-inline: auto;
    padding: var(--space-3xl) var(--container-padding-mobile);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.hero-kicker {
    font-family: var(--font-body);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--page-gold);
    margin: 0;
}

.hero-title {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--page-mist);
    margin: 0;
    text-wrap: balance;
}

.hero-subtitle {
    font-size: var(--text-body-large);
    line-height: var(--leading-body-large);
    color: var(--page-fog);
    max-width: 600px;
    margin: 0;
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}

.hero-actions .btn {
    min-width: 200px;
}

/* Section base */
.a-jatekrol-page .section {
    padding-block: var(--space-4xl);
}

.a-jatekrol-page .section-header {
    margin-block-end: var(--space-xl);
}

.a-jatekrol-page .section-header .kicker {
    color: var(--page-gold);
}

.a-jatekrol-page .section-header h2 {
    color: var(--page-mist);
}

.a-jatekrol-page .section-header .divider .glyph {
    color: var(--page-gold);
}

/* Intro section */
.intro-section {
    background-color: var(--page-bg);
}

.intro-container {
    max-width: 720px;
    margin-inline: auto;
    text-align: left;
}

.intro-container p {
    margin-block-end: var(--space-lg);
}

.intro-container p:last-child {
    margin-block-end: 0;
}

/* Elements section */
.elements-section {
    background-color: var(--page-deep);
}

.elements-header {
    text-align: center;
}

.elements-header .divider {
    justify-content: center;
}

.elements-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.element-card {
    background-color: var(--page-surface);
    border: 1px solid var(--page-rune);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
    min-width: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.element-card h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    font-weight: 600;
    color: var(--page-mist);
    margin: 0;
}

.element-card p {
    font-size: var(--text-small);
    line-height: var(--leading-small);
    color: var(--page-fog);
    margin: 0;
}

.element-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-violet);
    border-color: var(--page-gold);
}

.element-fire {
    border-top: 2px solid var(--page-danger);
}

.element-water {
    border-top: 2px solid var(--page-blue);
}

.element-wind {
    border-top: 2px solid var(--page-success);
}

.element-light {
    border-top: 2px solid var(--page-gold);
}

.element-dark {
    border-top: 2px solid var(--page-violet);
}

/* Combat section */
.combat-section {
    background-color: var(--page-bg);
}

.combat-container {
    max-width: 720px;
    margin-inline: auto;
    text-align: left;
}

.combat-container p {
    margin-block-end: var(--space-lg);
}

.combat-container p:last-child {
    margin-block-end: 0;
}

/* Monsters section */
.monsters-section {
    background-color: var(--page-deep);
}

.monsters-container {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-2xl);
    align-items: center;
}

.monsters-content {
    min-width: 0;
}

.monsters-content p {
    margin-block-end: var(--space-lg);
}

.monsters-content p:last-child {
    margin-block-end: 0;
}

.monsters-figure {
    margin: 0;
    min-width: 0;
}

.monsters-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--page-rune);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.monsters-figure img:hover {
    transform: scale(1.02);
    border-color: var(--page-gold);
    box-shadow: var(--shadow-glow-gold);
}

.monsters-figure figcaption {
    text-align: center;
    margin-top: var(--space-xs);
}

/* Runes section */
.runes-section {
    background-color: var(--page-bg);
}

.runes-container {
    max-width: 720px;
    margin-inline: auto;
    text-align: left;
}

.runes-container p {
    margin-block-end: var(--space-lg);
}

.runes-container p:last-child {
    margin-block-end: 0;
}

/* World section */
.world-section {
    background-color: var(--page-deep);
}

.world-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-2xl);
    align-items: center;
}

.world-figure {
    margin: 0;
    min-width: 0;
}

.world-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--page-rune);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.world-figure img:hover {
    transform: scale(1.02);
    border-color: var(--page-gold);
    box-shadow: var(--shadow-glow-gold);
}

.world-figure figcaption {
    text-align: center;
    margin-top: var(--space-xs);
}

.world-content {
    min-width: 0;
}

.world-content p {
    margin-block-end: var(--space-lg);
}

.world-content p:last-child {
    margin-block-end: 0;
}

/* Community section */
.community-section {
    background-color: var(--page-bg);
}

.community-container {
    max-width: 720px;
    margin-inline: auto;
    text-align: left;
}

.community-container p {
    margin-block-end: var(--space-lg);
}

.community-container p:last-child {
    margin-block-end: 0;
}

/* Purchases section */
.purchases-section {
    background-color: var(--page-deep);
}

.purchases-container {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.purchases-container .section-header {
    text-align: center;
}

.purchases-container .section-header .divider {
    justify-content: center;
}

.purchases-container p {
    margin-block-end: 0;
    text-align: center;
}

/* Download section */
.download-section {
    background-color: var(--page-bg);
}

.download-container {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

.download-container .section-header {
    text-align: center;
}

.download-container .section-header .divider {
    justify-content: center;
}

.download-container p {
    margin-block-end: var(--space-xl);
    text-align: center;
}

.download-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
}

.download-actions .btn {
    min-width: 200px;
}

/* Responsive */
@media (min-width: 768px) and (max-width: 1023px) {
    .elements-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .monsters-container,
    .world-container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .monsters-figure,
    .world-figure {
        order: -1;
    }
}

@media (max-width: 767px) {
    .hero-section {
        min-height: 70vh;
    }

    .hero-content {
        padding: var(--space-2xl) var(--container-padding-mobile);
        gap: var(--space-md);
    }

    .hero-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
        line-height: 1.05;
    }

    .hero-subtitle {
        font-size: var(--text-body);
        line-height: var(--leading-body);
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--space-sm);
    }

    .hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .a-jatekrol-page .section {
        padding-block: var(--space-2xl);
    }

    .elements-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .monsters-container,
    .world-container {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .monsters-figure,
    .world-figure {
        order: -1;
    }

    .download-actions {
        flex-direction: column;
        width: 100%;
        gap: var(--space-sm);
    }

    .download-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-background {
        transform: none;
        transition: none;
    }

    .element-card,
    .monsters-figure img,
    .world-figure img {
        transition: none;
    }

    .element-card:hover,
    .monsters-figure img:hover,
    .world-figure img:hover {
        transform: none;
    }
}