/* Page-owned styles for Game Updates & Patch Notes */

.updates-main {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
    .updates-main {
        padding-inline: var(--container-padding-desktop);
    }
}

/* Updates Hero */
.updates-hero {
    padding-block: var(--space-2xl) var(--space-xl);
}

.updates-hero__inner {
    max-width: 720px;
}

.updates-hero__title {
    font-size: var(--text-h1-size);
    line-height: var(--text-h1-line-height);
    font-weight: var(--text-h1-weight);
    letter-spacing: var(--text-h1-tracking);
    color: var(--color-deep-cobalt);
    margin-block-end: var(--space-md);
}

.updates-hero__lead {
    max-width: 65ch;
    font-size: var(--text-body-large-size);
    line-height: var(--text-body-large-line-height);
    color: var(--color-ink-charcoal);
    margin-block-end: 0;
}

/* Filter Bar */
.filter-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-paper-white);
    border-block-end: var(--border-default);
    padding-block: var(--space-sm);
    margin-inline: calc(-1 * var(--container-padding-mobile));
    padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
    .filter-bar {
        margin-inline: calc(-1 * var(--container-padding-desktop));
        padding-inline: var(--container-padding-desktop);
    }
}

.filter-bar__inner {
    max-width: var(--container-max-width);
    margin-inline: auto;
}

.filter-bar__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-block-end: var(--space-2xs);
}

.filter-bar__chips::-webkit-scrollbar {
    height: 4px;
}

.filter-bar__chips::-webkit-scrollbar-thumb {
    background-color: var(--color-mid-grey);
    border-radius: 2px;
}

.filter-chip {
    flex: 0 0 auto;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-soft-blue-grey);
    color: var(--color-ink-charcoal);
    border: 1px solid var(--color-mid-grey);
    border-radius: var(--radius-default);
    font-family: var(--font-heading);
    font-size: var(--text-category-size);
    font-weight: var(--text-category-weight);
    letter-spacing: var(--text-category-tracking);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-color), color var(--transition-color), border-color var(--transition-color);
    white-space: nowrap;
}

.filter-chip:hover {
    border-color: var(--color-deep-cobalt);
    color: var(--color-deep-cobalt);
}

.filter-chip--active,
.filter-chip--active:hover {
    background-color: var(--color-deep-cobalt);
    color: var(--color-paper-white);
    border-color: var(--color-deep-cobalt);
}

.filter-chip:focus-visible {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* Latest Updates */
.latest-updates {
    padding-block: var(--space-2xl) var(--space-3xl);
}

.latest-updates__inner {
    max-width: 720px;
}

.latest-updates__intro {
    max-width: 65ch;
    margin-block-end: var(--space-lg);
}

.update-list {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap-mobile);
}

@media (min-width: 768px) {
    .update-list {
        gap: var(--card-gap-desktop);
    }
}

.update-card {
    background-color: var(--color-soft-blue-grey);
    border: var(--border-default);
    border-radius: var(--radius-default);
    padding: var(--space-md);
    transition: border-color var(--transition-color), transform var(--transition-transform), opacity var(--transition-fade);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.update-card:hover {
    border-color: var(--color-deep-cobalt);
    transform: translateY(-2px);
}

.update-card__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
}

.update-card__game {
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line-height);
    font-weight: var(--text-h3-weight);
    letter-spacing: var(--text-h3-tracking);
    color: var(--color-ink-charcoal);
    margin-block-end: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.update-card__title {
    font-size: var(--text-h4-size);
    line-height: var(--text-h4-line-height);
    font-weight: var(--text-h4-weight);
    letter-spacing: var(--text-h4-tracking);
    color: var(--color-ink-charcoal);
    margin-block-end: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.update-card__meta {
    margin-block-end: 0;
}

.update-card__summary {
    max-width: 65ch;
    margin-block-end: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.update-card__link {
    align-self: flex-start;
    color: var(--color-deep-cobalt);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-color);
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
}

.update-card__link:hover {
    text-decoration: underline;
    text-underline-offset: 1px;
    color: var(--color-deep-cobalt);
}

.update-card__link:focus-visible {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* How We Cover Updates */
.how-we-cover {
    padding-block: var(--space-3xl);
    border-block-start: var(--border-major);
}

.how-we-cover__inner {
    max-width: 720px;
}

.how-we-cover__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    margin-block-start: var(--space-md);
}

@media (min-width: 768px) {
    .how-we-cover__columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg);
    }
}

.how-we-cover__column {
    min-width: 0;
}

.how-we-cover__column p {
    max-width: 65ch;
    margin-block-end: 0;
}

.how-we-cover__list {
    list-style-position: inside;
    margin-block-end: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.how-we-cover__list li {
    max-width: 65ch;
    overflow-wrap: break-word;
}

/* Platform Spotlight */
.platform-spotlight {
    background-color: var(--color-dark-editorial);
    color: var(--color-paper-white);
    padding-block: var(--space-3xl);
    margin-inline: calc(-1 * var(--container-padding-mobile));
    padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
    .platform-spotlight {
        margin-inline: calc(-1 * var(--container-padding-desktop));
        padding-inline: var(--container-padding-desktop);
    }
}

.platform-spotlight__inner {
    max-width: var(--container-max-width);
    margin-inline: auto;
}

.platform-spotlight__inner h2 {
    color: var(--color-paper-white);
    margin-block-end: var(--space-lg);
}

.platform-spotlight__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
}

@media (min-width: 768px) {
    .platform-spotlight__card {
        grid-template-columns: minmax(0, 60%) minmax(0, 40%);
        gap: var(--space-xl);
    }
}

.platform-spotlight__content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.platform-spotlight__headline {
    color: var(--color-paper-white);
    margin-block-end: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.platform-spotlight__text {
    max-width: 65ch;
    color: var(--color-paper-white);
    margin-block-end: 0;
    min-width: 0;
    overflow-wrap: break-word;
}

.platform-spotlight__link {
    align-self: flex-start;
}

.platform-spotlight__figure {
    margin-block-end: 0;
    min-width: 0;
}

.platform-spotlight__figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-image);
    display: block;
}

.platform-spotlight__figure figcaption {
    color: var(--color-muted-ink);
    margin-block-start: var(--space-xs);
}

/* Update Archive */
.update-archive {
    padding-block: var(--space-3xl);
}

.update-archive__inner {
    max-width: 720px;
}

.update-archive__text {
    max-width: 65ch;
    margin-block-end: var(--space-md);
}

.update-archive__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target-min);
    color: var(--color-deep-cobalt);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-color);
}

.update-archive__link:hover {
    text-decoration: underline;
    text-underline-offset: 1px;
    color: var(--color-deep-cobalt);
}

.update-archive__link:focus-visible {
    outline: var(--border-focus);
    outline-offset: 2px;
}

/* Stay Updated */
.stay-updated {
    background-color: var(--color-soft-blue-grey);
    border: var(--border-default);
    border-radius: var(--radius-default);
    padding-block: var(--space-2xl);
    margin-block-end: var(--space-3xl);
}

.stay-updated__inner {
    max-width: 480px;
    margin-inline: auto;
    text-align: center;
    padding-inline: var(--space-md);
}

.stay-updated__text {
    max-width: 65ch;
    margin-inline: auto;
    margin-block-end: var(--space-lg);
    text-align: center;
}

.stay-updated__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: stretch;
    margin-block-end: var(--space-md);
}

@media (min-width: 480px) {
    .stay-updated__form {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .stay-updated__input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .stay-updated__button {
        flex: 0 0 auto;
    }
}

.stay-updated__input {
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-paper-white);
    border: var(--border-default);
    border-radius: var(--radius-default);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line-height);
    color: var(--color-ink-charcoal);
    transition: border-color var(--transition-color);
}

.stay-updated__input::placeholder {
    color: var(--color-muted-ink);
}

.stay-updated__input:focus {
    outline: var(--border-focus);
    outline-offset: 2px;
    border-color: var(--color-deep-cobalt);
}

.stay-updated__button {
    min-height: var(--touch-target-min);
    white-space: nowrap;
}

.stay-updated__message {
    min-height: var(--space-lg);
    margin-block-end: 0;
    font-size: var(--text-body-small-size);
    line-height: var(--text-body-small-line-height);
    color: var(--color-fresh-mint);
    text-align: center;
}

.stay-updated__privacy {
    font-size: var(--text-body-small-size);
    line-height: var(--text-body-small-line-height);
    color: var(--color-muted-ink);
    margin-block-end: 0;
    text-align: center;
}

.stay-updated__privacy a {
    color: var(--color-deep-cobalt);
    text-decoration: none;
}

.stay-updated__privacy a:hover {
    text-decoration: underline;
    text-underline-offset: 1px;
}

/* Disclaimer */
.updates-disclaimer {
    padding-block: var(--space-xl) var(--space-2xl);
    border-block-start: var(--border-default);
}

.updates-disclaimer__inner {
    max-width: 720px;
}

.updates-disclaimer__inner p {
    max-width: 65ch;
    font-size: var(--text-body-small-size);
    line-height: var(--text-body-small-line-height);
    color: var(--color-muted-ink);
    margin-block-end: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .updates-hero__title {
        font-size: 1.75rem;
    }

    .how-we-cover__columns {
        grid-template-columns: 1fr;
    }

    .platform-spotlight__card {
        grid-template-columns: 1fr;
    }

    .stay-updated__form {
        flex-direction: column;
    }

    .stay-updated__input,
    .stay-updated__button {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .platform-spotlight__card {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .update-card,
    .filter-chip,
    .update-card__link,
    .update-archive__link,
    .stay-updated__input,
    .stay-updated__button {
        transition-duration: 0.01ms !important;
    }
}