/*
 * Traildogs brand theme.
 *
 * Colors and typography follow the official branding guidelines
 * (hexagon logo, monochrome black/white palette, Urbanpolis + Audiowide).
 *
 * Font note: "Urbanpolis" is a licensed commercial font. The .woff2 files are
 * not yet available in this repo, so the stack falls back to "Jost" (a free,
 * similarly geometric Google Font) until licensed files are dropped into
 * public/fonts/ and @font-face rules are added below.
 *
 * ---------------------------------------------------------------------------
 * STRUCTURE
 * ---------------------------------------------------------------------------
 * The whole site is built from a small set of layout primitives so every page
 * (home, hubs, articles, location pages) shares the same rhythm and reads as
 * one product instead of a stack of individually styled templates:
 *
 *   .wrap            – centered content container (max 1120px)
 *   .prose           – narrow reading column (max 42rem), always left-aligned
 *   .page-header      – intro block used by <x-page-header> on every subpage
 *   .section          – vertical rhythm block used by <x-section>
 *   .panel / .card    – the two surface styles (static box vs. clickable tile)
 *
 * Never combine `.wrap` and `.prose` on the same element — nest `.prose`
 * inside `.wrap` instead. Combining them re-centers the narrow column via
 * `.wrap`'s auto margins and breaks left-edge alignment with any wide content
 * above or below it (this was the root cause of the "restless" subpages).
 */

:root {
    --bg: #ffffff;
    --surface: #f6f4f2;
    --white: #fff;
    --text: #2d2826;
    --muted: #6b625d;
    --line: #e6e2dc;
    --brand: #2d2826;
    --brand-soft: #4a423e;
    --brand-tint: #efece9;

    --font-sans: "Urbanpolis", "Jost", system-ui, sans-serif;
    --font-display: "Audiowide", "Urbanpolis", "Jost", system-ui, sans-serif;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --shadow: 0 16px 36px rgba(45, 40, 38, 0.14);
    --shadow-sm: 0 8px 20px rgba(45, 40, 38, 0.1);

    --space-section: 4.5rem;
    --space-section-sm: 2.75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    line-height: 1.7;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

h1 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}

h2,
h3 {
    font-family: var(--font-sans);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding-left: 1.2rem;
}

.wrap {
    width: min(1120px, calc(100% - 2rem));
    margin-inline: auto;
}

/* Narrow reading column. Always nest inside .wrap — see note above. */
.prose {
    max-width: 42rem;
}

/* Vertical rhythm: every block-level element gets air from the one above it.
   `.flow` is the same rhythm as a reusable utility for plain wrapper divs
   that aren't `.prose` width (e.g. a text column inside a wide two-column
   layout) — apply it wherever a `<div>` holds more than one heading/
   paragraph/list so nothing ever touches with a zero gap. */
.prose > * + *,
.flow > * + * {
    margin-top: 1.3rem;
}

.prose h2 {
    margin-top: 2.5rem;
}

.prose h2:first-child {
    margin-top: 0;
}

/* Bordered/boxed components (info panels, callouts, checklists, step
   lists) are visually distinct surfaces — glued directly to the text
   above them they look cramped, so they get extra breathing room on top
   of the base rhythm above (skipped when they're the first element,
   matching the `.prose > * + *` guard). */
.prose > * + .panel,
.prose > * + .callout,
.prose > * + .steps,
.prose > * + ul.list-check,
.prose > * + ol.list-check,
.flow > * + .panel,
.flow > * + .callout {
    margin-top: 2rem;
}

.kicker {
    display: block;
    color: var(--brand);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
}

.muted {
    color: var(--muted);
}

/* ---------------------------------------------------------------------- */
/* Header / navigation                                                     */
/* ---------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--white) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 5.4rem;
}

.logo img {
    height: 52px;
    width: auto;
}

/* Groups the text menu and the Erstgespräch pill so they scale/wrap together
   as one unit on the right of the header. */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav a {
    padding: 0.5rem 0.55rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.88rem;
    border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
    border-bottom-color: var(--brand);
}

/* Primary header action for new clients (Erstgespräch). Sits next to the
   nav, not inside its wrap, so the pill stays intact if the links wrap. */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 0.82rem;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.nav-cta:hover {
    background: var(--brand-soft);
    transform: translateY(-1px);
}

/* ---------------------------------------------------------------------- */
/* Hero — home page only: one school, one offer, not two competing paths */
/* ---------------------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 3.5rem 0 3.25rem;
    background: radial-gradient(ellipse at top, var(--brand-tint) 0%, var(--bg) 60%);
}

.hero-pattern {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 4 L58 18 L58 46 L32 60 L6 46 L6 18 Z' fill='none' stroke='%232d2826' stroke-opacity='0.07' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size: 64px 64px;
}

.hero-layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.25rem;
    align-items: center;
}

.hero-inner {
    max-width: 38rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--line);
    font-size: 0.85rem;
    font-weight: 700;
}

.hero-brand {
    margin: 1.5rem 0 0;
}

.hero-brand img {
    height: 64px;
    width: auto;
}

.hero h1 {
    margin: 1.1rem 0 1rem;
    font-size: clamp(1.7rem, 3.6vw, 2.45rem);
}

.hero-lead {
    color: var(--muted);
    font-size: 1.08rem;
}

.hero-links {
    margin-top: 1.3rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.hero-links .btn-ghost {
    margin-left: 0;
}

.hero-proof {
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin: 2.25rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--line);
}

.hero-proof li {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--line);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand);
}

.hero-visual {
    margin: 0;
}

.hero-visual picture {
    display: block;
}

.hero-visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 28%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .hero-badge {
        animation: fadeUp 0.6s ease-out both;
    }

    .hero-brand {
        animation: fadeUp 0.6s ease-out 0.08s both;
    }

    .hero h1 {
        animation: fadeUp 0.6s ease-out 0.16s both;
    }

    .hero-lead {
        animation: fadeUp 0.6s ease-out 0.24s both;
    }

    .hero-visual {
        animation: fadeUp 0.6s ease-out 0.28s both;
    }

    .hero-links {
        animation: fadeUp 0.6s ease-out 0.3s both;
    }

    .hero-proof {
        animation: fadeUp 0.6s ease-out 0.36s both;
    }
}

@media (min-width: 800px) {
    .hero-layout {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 3rem;
    }
}

@media (max-width: 799px) {
    .hero-inner {
        text-align: center;
        margin-inline: auto;
    }

    .hero-brand img {
        margin-inline: auto;
    }

    .hero-links {
        justify-content: center;
    }

    .hero-visual img {
        aspect-ratio: 4 / 3;
        object-position: 50% 32%;
    }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    padding: 0.8rem 1.25rem;
    font-weight: 800;
    border: 1px solid var(--brand);
}

.btn:hover {
    background: var(--brand-soft);
    border-color: var(--brand-soft);
}

.btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--text);
    margin-left: 0.5rem;
}

.btn-ghost:hover {
    background: var(--text);
    color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Page header — <x-page-header> (every subpage's intro block)            */
/* ---------------------------------------------------------------------- */

.page-header {
    padding: 2.75rem 0 0.5rem;
}

/* Reusable square, brand-consistent photo treatment — used for standalone
   photos inside wide two-column body sections (e.g. home page, location
   contact block), where the paired text is a full paragraph and can
   actually match the image's height. */
.img-square {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.content-photo {
    margin: 1.5rem 0 0;
}

.content-photo picture {
    display: block;
}

.content-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.page-header h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    margin-top: 0.5rem;
}

.page-header__lead {
    color: var(--muted);
    font-size: 1.08rem;
    margin-top: 0.75rem;
}

/* "prose" variant (no image): title/lead/extra share the 42rem column with
   the body text below, so the whole page reads as one consistent width. */
.page-header--prose .page-header__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* "wide" variant (image given): keep the headline and lead at a readable
   line length, but let the block — and the featured image — use the full
   1120px content width instead of leaving half the page empty. */
.page-header--wide .page-header h1,
.page-header--wide .page-header__lead {
    max-width: 42rem;
}

.page-header--wide .page-header__image {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-top: 1.75rem;
}

.page-header--wide picture:has(.page-header__image) {
    display: block;
}

.page-header--wide .page-header__extra {
    max-width: 42rem;
    margin-top: 1.4rem;
}


/* ---------------------------------------------------------------------- */
/* Section — <x-section> (vertical rhythm for everything below the header)*/
/* ---------------------------------------------------------------------- */

.section {
    padding: var(--space-section) 0;
}

.section--compact {
    padding-top: 0.5rem;
}

.section--surface {
    background: var(--surface);
}

.section--tight {
    padding: var(--space-section-sm) 0;
}

/* Only the section's own auto-generated heading (from the `title` prop) —
   deliberately named instead of a bare `h2` selector. A generic `.section
   h2` used to also match manually-authored body subheadings inside
   `.prose` (same specificity as `.prose h2`, declared later in this file),
   which silently overrode `.prose h2`'s intended top margin back to 0 —
   the root cause of headings looking glued to whatever came before them. */
.section__title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    margin: 0 0 1.1rem;
}

.section__lead {
    max-width: 42rem;
    font-size: 1.05rem;
    margin: 0 0 1.75rem;
}

/* ---------------------------------------------------------------------- */
/* Grids                                                                   */
/* ---------------------------------------------------------------------- */

.grid-4,
.grid-3,
.grid-2,
.nearby,
.spots {
    display: grid;
    gap: 1.25rem;
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-3,
.nearby,
.spots {
    grid-template-columns: repeat(3, 1fr);
}

/* Asymmetric text+image pairing only (home page, location contact block).
   Never use this for two cards of equal importance — use .cards-2 instead,
   otherwise the narrower column's square image renders visibly smaller. */
.grid-2 {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 2rem;
}

/* Equal-width pairing for two cards/tiles of the same weight. */
.cards-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.stack {
    display: grid;
    gap: 1.5rem;
}

.block-heading {
    font-size: 1.15rem;
    margin: 0 0 0.9rem;
}

/* ---------------------------------------------------------------------- */
/* Surfaces — .panel (static box) and .card (clickable tile)              */
/* Both share the same flat, bordered language: no soft "IONOS" drop      */
/* shadows at rest, a subtle lift only on hover/focus for interactive     */
/* elements. Radius and spacing come from shared tokens.                  */
/* ---------------------------------------------------------------------- */

.panel {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: grid;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card--link:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-sm);
    border-color: transparent;
}

.card--static {
    color: inherit;
    background: var(--surface);
    border-style: dashed;
}

.card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.card picture {
    display: block;
}

.card-body {
    padding: 1.15rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.card-body h2,
.card-body h3,
.card-body strong {
    display: block;
    margin: 0;
}

.card-meta {
    font-size: 0.9rem;
}

.card-cta {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--brand);
}

.card-cta svg {
    transition: transform 0.2s ease;
}

.card--link:hover .card-cta svg {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------------- */
/* Prose content elements: callout, checklists, steps, price/contact cards*/
/* ---------------------------------------------------------------------- */

.callout {
    background: var(--brand-tint);
    border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
    border-left: 4px solid var(--brand);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem;
}

.callout-title {
    font-weight: 800;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
    margin: 0 0 0.4rem;
}

.callout p {
    margin: 0;
}

.list-check {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.7rem;
}

.list-check li {
    position: relative;
    padding-left: 1.75rem;
}

.list-check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.32rem;
    width: 1.05rem;
    height: 1.05rem;
    background-color: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 9.5 17 19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5 9.5 17 19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

.faq details {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.2rem;
    margin-bottom: 0.8rem;
}

.faq summary {
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::before {
    content: "+ ";
    color: var(--brand);
}

.faq details[open] summary::before {
    content: "– ";
}

.faq p {
    margin: 0.7rem 0 0;
    color: var(--muted);
}

.faq-more {
    margin-top: 0.4rem;
}

.faq-layout {
    align-items: start;
}

.faq-group + .faq-group {
    margin-top: 2rem;
}

.faq-group h2 {
    font-size: 1.15rem;
    margin: 0 0 0.9rem;
}

.price-card h3 {
    margin: 0 0 0.6rem;
}

.price-card p + p {
    margin-top: 0.6rem;
}

.price-card .price {
    color: var(--brand);
    font-weight: 800;
    font-size: 1.15rem;
    margin-top: 1rem;
}

.contact-card h2 {
    font-size: 1.05rem;
    margin: 1rem 0 0.2rem;
}

.contact-card h2:first-child {
    margin-top: 0;
}

.steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.steps li {
    counter-increment: step;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem 1.1rem 3.2rem;
    position: relative;
}

.steps li::before {
    content: counter(step);
    position: absolute;
    left: 1.1rem;
    top: 1.1rem;
    background: var(--brand);
    color: #fff;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.steps h3 {
    margin: 0 0 0.3rem;
}

.steps p {
    margin: 0;
    color: var(--muted);
}

.person-card {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.person-card img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.person-card p {
    margin: 0.2rem 0 0;
}

.credential-badge {
    display: inline-block;
    background: var(--brand-tint);
    color: var(--brand);
    border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--line));
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0.2rem 0.4rem 0.2rem 0;
}

.spot-chip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.9rem 1.1rem;
    font-size: 0.95rem;
}

/* ---------------------------------------------------------------------- */
/* CTA banner + breadcrumbs                                                */
/* ---------------------------------------------------------------------- */

.cta {
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.cta__lead {
    max-width: 34rem;
    margin: 0 auto 1.2rem;
}

.breadcrumbs {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

.breadcrumbs a {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */

.site-footer {
    background: var(--brand);
    color: #f4f1ee;
    padding: 2.5rem 0 1.5rem;
    margin-top: 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr 1fr;
    gap: 1.5rem;
}

.footer-grid > div > * + * {
    margin-top: 0.6rem;
}

.site-footer a {
    color: #f4f1ee;
}

.site-footer .logo-light {
    height: 44px;
    width: auto;
    margin-bottom: 0.75rem;
}

.footer-areas {
    margin-top: 1.75rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(244, 241, 238, 0.15);
}

.footer-areas__label {
    margin: 0 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 241, 238, 0.55);
}

.footer-areas ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0;
    margin: 0;
    padding: 0;
    font-size: 0.82rem;
    line-height: 1.55;
}

.footer-areas li {
    display: inline-flex;
    align-items: center;
}

.footer-areas li:not(:last-child)::after {
    content: "·";
    margin: 0 0.45rem;
    color: rgba(244, 241, 238, 0.35);
}

.footer-areas a {
    color: rgba(244, 241, 238, 0.82);
    text-decoration: none;
}

.footer-areas a:hover {
    color: #fff;
    text-decoration: underline;
}

.legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(244, 241, 238, 0.15);
    color: rgba(244, 241, 238, 0.6);
    font-size: 0.9rem;
}

.legal__links {
    display: flex;
    gap: 1rem;
}

.legal__links a {
    color: rgba(244, 241, 238, 0.6);
}

.legal__links a:hover,
.legal__links a[aria-current="page"] {
    color: #f4f1ee;
}

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

    .grid-3,
    .grid-2,
    .cards-2,
    .nearby,
    .spots,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .header-inner {
        flex-wrap: wrap;
    }
}

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

/* ---------------------------------------------------------------------- */
/* Bio-link landing page (`/links`) — mobile-first, large touch targets    */
/* ---------------------------------------------------------------------- */

.links {
    max-width: 26rem;
    margin: 2.25rem auto 2.5rem;
    text-align: center;
}

.links__avatar-link {
    display: inline-flex;
    margin: 0 auto 1rem;
}

.links__avatar {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 46%;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 1px var(--line), 0 8px 20px rgba(45, 40, 38, 0.1);
}

.links h1 {
    font-size: clamp(1.45rem, 5.2vw, 1.85rem);
}

.links__bio {
    margin-top: 0.7rem;
    font-weight: 600;
    line-height: 1.45;
}

.links__tagline {
    margin-top: 0.4rem;
}

.links__list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 1.75rem 0 0;
}

.links__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.4rem;
    padding: 0.95rem 1.15rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.links__item:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
}

.links__item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.links__footer {
    display: flex;
    justify-content: center;
    gap: 1.35rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
}

.links__footer a {
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.links__footer a:hover {
    color: var(--text);
    text-decoration: underline;
}