/* Info page hero background: swaps the shared hero image for the about page artwork. */
.hero--info::before {
    background-image: url("images/images - 2022-09-20T204120.732.jpeg");
}

/* Shared content grids: reused for overview cards, mode cards, and contact layout. */
.content-grid,
.mode-grid,
.contact-layout {
    display: grid;
    gap: 1.25rem;
}

/* Two-column content layout: text and image sit side by side on wider screens. */
.content-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Mode grid: responsive card layout for the list of game modes. */
.mode-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Contact layout: splits map/details and form into separate columns. */
.contact-layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
}

/* Overview image card: keep the image cropped cleanly inside the shared card surface. */
.content-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: calc(var(--radius-md) - 2px);
}

/* Review quote: slightly larger quote text to separate it from body copy. */
.review-card blockquote {
    margin: 0;
    font-size: 1.15rem;
    color: var(--text);
}

/* Review attribution: secondary line below the quote with softer visual weight. */
.review-card cite {
    display: block;
    margin-top: 1rem;
    color: var(--accent-soft);
    font-style: normal;
}

/* Contact detail list: simple stacked contact metadata rows. */
.contact-list {
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0 1.5rem;
}

/* Contact detail paragraph reset: prevent extra spacing inside the list. */
.contact-list p {
    margin: 0;
}

/* Contact detail links: accent color to draw attention to the email address. */
.contact-list a {
    color: var(--accent-soft);
}

/* Map frame: clipped responsive wrapper for the embedded office map. */
.map-frame {
    overflow: hidden;
    min-height: 320px;
    margin-top: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.03);
}

/* Embedded map sizing: fill the wrapper without adding iframe borders. */
.map-frame iframe {
    width: 100%;
    min-height: 320px;
    border: 0;
}

/* Contact form grid: vertical rhythm for fields, button row, and status text. */
.form-grid {
    display: grid;
    gap: 1rem;
}

/* Single form field group: label stacked above the matching input control. */
.form-field {
    display: grid;
    gap: 0.45rem;
}

/* Form labels: stronger weight for clarity and accessibility. */
.form-field label {
    font-weight: 700;
}

/* Inputs and textarea: shared field styling across the static contact form. */
.form-field input,
.form-field textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
}

/* Placeholder text: keep hint copy readable without overpowering the field value. */
.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--muted);
}

/* Focus styling: highlight active fields for keyboard and mouse users alike. */
.form-field input:focus,
.form-field textarea:focus {
    outline: 2px solid rgba(255, 122, 47, 0.35);
    outline-offset: 2px;
    border-color: rgba(255, 122, 47, 0.6);
}

/* Form action row: keeps the button and helper note aligned and wrapped as needed. */
.form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Form helper and status copy: muted by default until JavaScript updates the message. */
.form-note,
.form-status {
    margin: 0;
    color: var(--muted);
}

/* Error state: warm warning tone when form validation fails. */
.form-status.is-error {
    color: #ffb0a4;
}

/* Success state: accent tone when the mail client is about to open. */
.form-status.is-success {
    color: #ffd27a;
}

/* Tablet layout: stack major two-column sections into a single column. */
@media (max-width: 980px) {
    .content-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }
}

/* Phone layout: let the action row expand vertically for better touch comfort. */
@media (max-width: 560px) {
    .form-actions {
        align-items: stretch;
    }
}