/* ===== Grafika page styles ===== */
.grafika-page {
    overflow-x: hidden;
}

/* Hero */
.grafika-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background-color: var(--color-track-dark);
}

.grafika-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.grafika-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.grafika-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(32, 35, 39, 0.75) 0%, rgba(32, 35, 39, 0.55) 50%, rgba(32, 35, 39, 0.85) 100%);
}

.grafika-hero__content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding-block: var(--space-20) var(--space-16);
}

.grafika-hero__title {
    font-size: var(--text-display-size);
    line-height: var(--text-display-line-height);
    font-weight: var(--text-display-weight);
    letter-spacing: var(--text-display-letter-spacing);
    color: var(--color-asphalt-light);
    margin-block-end: var(--space-6);
    max-width: 12ch;
}

.grafika-hero__lead {
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    color: var(--color-asphalt-light);
    max-width: 70ch;
    margin-block-end: var(--space-8);
}

.grafika-hero__cta {
    margin-block-start: var(--space-4);
}

/* Intro */
.grafika-intro {
    background-color: var(--color-asphalt-light);
    color: var(--color-text-on-light);
}

.grafika-intro__container {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
}

.grafika-intro__container h2 {
    color: var(--color-text-on-light);
    margin-block-end: var(--space-6);
}

.grafika-intro__text {
    max-width: 70ch;
    color: var(--color-text-on-light);
    margin-block-end: var(--space-6);
}

.grafika-intro__list {
    margin-block-start: var(--space-6);
    color: var(--color-text-on-light);
}

.grafika-intro__list li {
    margin-block-end: var(--space-2);
}

/* Tech details */
.grafika-tech {
    background-color: var(--color-track-dark);
}

.grafika-tech h2 {
    margin-block-end: var(--space-8);
}

.grafika-tech__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.grafika-tech__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    background-color: var(--color-card-dark);
    border: var(--border-standard);
    border-radius: var(--radius-md);
    padding: var(--card-padding-mobile);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.grafika-tech__card:hover {
    transform: translateY(-2px);
    border-color: var(--color-signal-orange);
    box-shadow: var(--shadow-card-hover);
}

.grafika-tech__card h3 {
    margin-block-end: 0;
}

.grafika-tech__card p {
    max-width: 70ch;
    margin-block-end: 0;
}

.grafika-tech__list {
    margin-block-end: 0;
}

.grafika-tech__data {
    margin-block-start: auto;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-steel-gray);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.grafika-tech__data-label {
    font-size: var(--text-label-size);
    line-height: var(--text-label-line-height);
    font-weight: var(--text-label-weight);
    letter-spacing: var(--text-label-letter-spacing);
    text-transform: var(--text-label-transform);
    color: var(--color-steel-gray);
}

.grafika-tech__data-value {
    font-family: var(--font-heading);
    font-size: var(--text-h4-size);
    color: var(--color-telemetry-blue);
}

/* Gameplay impact */
.grafika-gameplay {
    background-color: var(--color-asphalt-light);
    color: var(--color-text-on-light);
}

.grafika-gameplay__grid {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: var(--space-8);
    align-items: start;
}

.grafika-gameplay__text {
    min-width: 0;
}

.grafika-gameplay__text h2 {
    color: var(--color-text-on-light);
    margin-block-end: var(--space-6);
}

.grafika-gameplay__text h3 {
    color: var(--color-text-on-light);
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-3);
}

.grafika-gameplay__text p {
    max-width: 70ch;
    color: var(--color-text-on-light);
    margin-block-end: var(--space-4);
}

.grafika-gameplay__list {
    margin-block-start: var(--space-4);
    color: var(--color-text-on-light);
}

.grafika-gameplay__figure {
    min-width: 0;
    margin-block-end: 0;
}

.grafika-gameplay__figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 2px solid var(--color-steel-gray);
    border-radius: var(--radius-md);
}

.grafika-gameplay__figure figcaption {
    color: var(--color-text-secondary-on-light);
    margin-block-start: var(--space-2);
}

/* Gallery */
.grafika-gallery {
    background-color: var(--color-track-dark);
}

.grafika-gallery h2 {
    margin-block-end: var(--space-4);
}

.grafika-gallery__intro {
    max-width: 70ch;
    margin-block-end: var(--space-8);
}

.grafika-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.grafika-gallery__item {
    min-width: 0;
    margin-block-end: 0;
}

.grafika-gallery__item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 2px solid var(--color-steel-gray);
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.grafika-gallery__item img:hover {
    transform: scale(1.02);
    border-color: var(--color-signal-orange);
}

.grafika-gallery__item figcaption {
    max-width: 30ch;
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary-on-dark);
}

/* Strengths */
.grafika-strengths {
    background-color: var(--color-asphalt-light);
    color: var(--color-text-on-light);
}

.grafika-strengths__container {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
}

.grafika-strengths__container h2 {
    color: var(--color-text-on-light);
    margin-block-end: var(--space-6);
}

.grafika-strengths__container p {
    max-width: 70ch;
    color: var(--color-text-on-light);
    margin-block-end: var(--space-6);
}

.grafika-strengths__list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
}

.grafika-strengths__list li {
    position: relative;
    padding-inline-start: var(--space-8);
    margin-block-end: var(--space-3);
    color: var(--color-text-on-light);
}

.grafika-strengths__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-signal-orange);
    font-weight: 700;
}

/* Weaknesses */
.grafika-weaknesses {
    background-color: var(--color-track-dark);
}

.grafika-weaknesses__container {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
}

.grafika-weaknesses__container h2 {
    margin-block-end: var(--space-6);
}

.grafika-weaknesses__container p {
    max-width: 70ch;
    margin-block-end: var(--space-6);
}

.grafika-weaknesses__list {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
}

.grafika-weaknesses__list li {
    position: relative;
    padding-inline-start: var(--space-8);
    margin-block-end: var(--space-3);
}

.grafika-weaknesses__list li::before {
    content: '!';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-warning-yellow);
    font-weight: 700;
}

/* Verdict */
.grafika-verdict {
    background-color: var(--color-asphalt-light);
    color: var(--color-text-on-light);
}

.grafika-verdict__grid {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: var(--space-8);
    align-items: center;
}

.grafika-verdict__rating {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.grafika-verdict__speedometer {
    position: relative;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(var(--color-signal-orange) 0deg 288deg, var(--color-steel-gray) 288deg 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.grafika-verdict__speedometer::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    background-color: var(--color-asphalt-light);
}

.grafika-verdict__needle {
    position: absolute;
    width: 4px;
    height: 60px;
    background-color: var(--color-signal-orange);
    top: 20px;
    left: 50%;
    transform-origin: 50% 60px;
    transform: translateX(-50%) rotate(288deg);
    z-index: 1;
}

.grafika-verdict__score {
    position: relative;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-on-light);
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}

.grafika-verdict__score span {
    font-size: var(--text-body-size);
    font-weight: 400;
    color: var(--color-text-secondary-on-light);
}

.grafika-verdict__text {
    min-width: 0;
}

.grafika-verdict__text h2 {
    color: var(--color-text-on-light);
    margin-block-end: var(--space-4);
}

.grafika-verdict__text p {
    max-width: 70ch;
    color: var(--color-text-on-light);
    margin-block-end: 0;
}

/* CTA */
.grafika-cta {
    background-color: var(--color-track-dark);
    background-image: repeating-linear-gradient(45deg, rgba(242, 106, 46, 0.06) 0px, rgba(242, 106, 46, 0.06) 2px, transparent 2px, transparent 8px);
}

.grafika-cta__container {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
    padding-inline: var(--container-padding-mobile);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.grafika-cta__container h2 {
    margin-block-end: 0;
}

.grafika-cta__container p {
    max-width: 60ch;
    margin-block-end: 0;
    margin-inline: auto;
}

.grafika-cta__button {
    margin-block-start: var(--space-4);
}

/* Responsive */
@media (max-width: 1023px) {
    .grafika-tech__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grafika-gameplay__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .grafika-gameplay__figure {
        order: 2;
    }

    .grafika-gameplay__text {
        order: 1;
    }

    .grafika-verdict__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .grafika-verdict__rating {
        justify-content: center;
    }
}

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

    .grafika-hero__content {
        padding-block: var(--space-16) var(--space-12);
        padding-inline: var(--container-padding-mobile);
    }

    .grafika-hero__title {
        font-size: clamp(2rem, 8vw, 2.5rem);
        max-width: 100%;
    }

    .grafika-hero__lead {
        font-size: var(--text-body-size);
        max-width: 100%;
    }

    .grafika-hero__cta {
        width: 100%;
    }

    .grafika-intro__container,
    .grafika-strengths__container,
    .grafika-weaknesses__container {
        padding-inline: var(--container-padding-mobile);
    }

    .grafika-tech__grid {
        grid-template-columns: 1fr;
    }

    .grafika-gallery__grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--space-4);
        padding-block-end: var(--space-4);
        -webkit-overflow-scrolling: touch;
    }

    .grafika-gallery__item {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }

    .grafika-gallery__item img {
        aspect-ratio: 16 / 9;
    }

    .grafika-verdict__speedometer {
        width: 140px;
        height: 140px;
    }

    .grafika-verdict__needle {
        height: 52px;
        top: 18px;
        transform-origin: 50% 52px;
    }

    .grafika-verdict__score {
        font-size: 2rem;
    }

    .grafika-cta__container {
        padding-inline: var(--container-padding-mobile);
    }

    .grafika-cta__button {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .grafika-intro__container,
    .grafika-strengths__container,
    .grafika-weaknesses__container {
        padding-inline: var(--container-padding-desktop);
    }

    .grafika-tech__card {
        padding: var(--card-padding-desktop);
    }

    .grafika-cta__container {
        padding-inline: var(--container-padding-desktop);
    }
}