/* ==========================================================================
   Reusable components. Anything that appears on more than one page lives here.
   ========================================================================== */

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

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn--primary {
    background-color: var(--color-terracotta);
    color: #fff;
}

.btn--primary:hover {
    background-color: var(--color-terracotta-dark);
    color: #fff;
}

.btn--secondary {
    background-color: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-ink);
}

.btn--secondary:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-ink-muted);
    color: var(--color-ink);
}

/* For use on photos and dark bands. */
.btn--on-dark {
    background-color: rgb(250 246 240 / 0.14);
    border-color: rgb(250 246 240 / 0.5);
    color: var(--color-sand);
    backdrop-filter: blur(6px);
}

.btn--on-dark:hover {
    background-color: var(--color-sand);
    border-color: var(--color-sand);
    color: var(--color-ink);
}

.btn--ghost {
    padding-inline: var(--space-3);
    background: none;
    color: var(--color-terracotta);
}

.btn--ghost:hover {
    background-color: var(--color-terracotta-tint);
}

.btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.btn--block {
    width: 100%;
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* --- Cards --------------------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card__body {
    padding: var(--space-6);
}

.card__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
}

.card__meta {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* Whole-card link target. */
.card--link {
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
}

.card--link:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

/* --- Generic auto-fitting grid ------------------------------------------- */

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }

/* --- Key-figure strip ("95 m²", "6 Gäste", "Pool") ---------------------- */

.figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 45%), 1fr));
    gap: var(--space-6) var(--space-4);
    margin: 0;
    padding: 0;
}

.figure-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.figure-item__icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: var(--space-2);
    color: var(--color-terracotta);
}

.figure-item__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1;
}

.figure-item__label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* --- Amenity list -------------------------------------------------------- */

.amenity-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-3) var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.amenity-list li + li {
    margin-top: 0;
}

.amenity {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-1);
}

.amenity__icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    color: var(--color-olive);
}

.amenity__label {
    font-weight: 500;
}

.amenity__detail {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* Multi-column layout for the grouped amenity blocks. Columns rather than a grid so a
   long group flows into the next column instead of leaving a ragged hole. */
.amenity-groups {
    columns: 2;
    column-gap: var(--space-12);
}

@media (max-width: 48rem) {
    .amenity-groups { columns: 1; }
}

.amenity-group {
    /* Keeps a heading from being orphaned at the foot of a column. */
    break-inside: avoid;
    margin-bottom: var(--space-10);
}

.amenity-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.amenity-group__icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-terracotta);
}

/* Inside a group the list is single-column — the columns already do the splitting. */
.amenity-group .amenity-list {
    grid-template-columns: 1fr;
}

.card__title--icon {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* --- Badges -------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    background-color: var(--color-sand-deep);
    color: var(--color-ink-soft);
}

.badge--free { background-color: var(--color-olive-tint); color: var(--color-olive-dark); }
.badge--busy { background-color: var(--color-danger-tint); color: var(--color-danger); }
.badge--info { background-color: var(--color-sea-tint); color: var(--color-sea); }
.badge--warn { background-color: var(--color-warning-tint); color: var(--color-warning); }

/* --- Notices ------------------------------------------------------------- */

.notice {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background-color: var(--color-surface-raised);
    font-size: var(--text-sm);
}

.notice--success { border-left-color: var(--color-olive); background-color: var(--color-olive-tint); }
.notice--error { border-left-color: var(--color-danger); background-color: var(--color-danger-tint); }
.notice--info { border-left-color: var(--color-sea); background-color: var(--color-sea-tint); }
.notice--warn { border-left-color: var(--color-warning); background-color: var(--color-warning-tint); }

.notice__icon {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
}

/* --- Forms --------------------------------------------------------------- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-5);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    font-size: var(--text-sm);
    font-weight: 500;
}

.field__hint {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.field__error {
    font-size: var(--text-sm);
    color: var(--color-danger);
}

.input,
.textarea,
.select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--color-terracotta);
    box-shadow: var(--shadow-focus);
}

.input[aria-invalid='true'],
.textarea[aria-invalid='true'] {
    border-color: var(--color-danger);
}

.textarea {
    min-height: 9rem;
    line-height: var(--leading-normal);
}

.select {
    /* Room for the native dropdown arrow. */
    padding-right: var(--space-8);
}

/* Honeypot: a real field that humans never see and bots happily fill in.
   Hidden with position rather than `display: none`, which many bots skip. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.checkbox input {
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    accent-color: var(--color-terracotta);
}

/* --- Tables -------------------------------------------------------------- */

/* Wide tables scroll inside their own box; the page itself never scrolls sideways. */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface-raised);
}

.table {
    min-width: 32rem;
    font-size: var(--text-sm);
}

.table th,
.table td {
    padding: var(--space-4) var(--space-5);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.table thead th {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    background-color: var(--color-sand-deep);
    white-space: nowrap;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table__price {
    font-weight: 600;
    font-size: var(--text-base);
}

/* --- Chip navigation (jump links on long pages) -------------------------- */

.chip-nav {
    position: sticky;
    top: var(--header-height);
    z-index: calc(var(--z-header) - 1);
    padding-block: var(--space-4);
    background-color: var(--color-sand);
    border-bottom: 1px solid var(--color-border);
}

.chip-nav__inner {
    display: flex;
    gap: var(--space-2);
    /* Scrolls sideways inside its own box on narrow screens; the page never does. */
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: var(--space-1);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-surface-raised);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.chip:hover {
    border-color: var(--color-terracotta);
    color: var(--color-terracotta);
}

.chip__icon {
    width: 1rem;
    height: 1rem;
}

.chip__count {
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
}

/* --- Area guide entry ---------------------------------------------------- */

.spot {
    display: flex;
    flex-direction: column;
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.spot__media {
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--color-sand-deep);
    overflow: hidden;
}

.spot__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.spot__media:hover img {
    transform: scale(1.03);
}

.spot__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
}

.spot__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
}

.spot__location {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.spot__location-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.spot__text {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-ink-soft);
}

.spot__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}

.spot__link:hover {
    text-decoration: underline;
}

.spot__link-icon {
    width: 0.85rem;
    height: 0.85rem;
}

/* --- Definition list for key/value facts (prices, terms, contact) -------- */

.spec-list {
    margin: 0;
}

.spec-list__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.spec-list__row:last-child {
    border-bottom: 0;
}

.spec-list dt {
    color: var(--color-ink-soft);
}

.spec-list dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.spec-list__note {
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.price-year {
    margin-bottom: var(--space-4);
    font-size: var(--text-xl);
    color: var(--color-terracotta);
}

/* --- Star rating --------------------------------------------------------- */

.stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-terracotta);
}

.stars__star {
    width: 0.95rem;
    height: 0.95rem;
}

.stars__star--empty {
    color: var(--color-border-strong);
}

/* --- Quotes / guestbook -------------------------------------------------- */

.quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.quote__body {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-ink);
}

.quote__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-4);
    margin-top: auto;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.quote__author {
    font-weight: 600;
    color: var(--color-ink);
}

/* --- Hero (home page) ---------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* Fills the screen minus the header, but never taller than is comfortable on a
       laptop in landscape. */
    min-height: min(46rem, calc(100svh - var(--header-height)));
    padding-block: var(--space-20) var(--space-16);
    /* Pulled up behind the translucent header. */
    margin-top: calc(var(--header-height) * -1);
    padding-top: calc(var(--header-height) + var(--space-20));
    overflow: hidden;
    color: var(--color-sand);
    background-color: var(--color-ink);
}

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

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Until a hero photo is set, a warm dusk gradient stands in — better than an
   empty black box, and it disappears the moment a photo is uploaded. */
.hero__media--placeholder {
    background:
        radial-gradient(80% 60% at 20% 15%, #d98b4f 0%, transparent 60%),
        radial-gradient(70% 70% at 85% 25%, #b4552d 0%, transparent 65%),
        linear-gradient(165deg, #6b4a3a 0%, #2b2622 70%);
}

/* Darkens the lower half so white text stays readable over any photo. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgb(43 38 34 / 0.78) 0%,
        rgb(43 38 34 / 0.45) 45%,
        rgb(43 38 34 / 0.12) 100%
    );
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgb(250 246 240 / 0.85);
}

.hero__title {
    max-width: 30ch;
    margin-bottom: var(--space-5);
    font-size: var(--text-4xl);
    color: var(--color-sand);
}

.hero__text {
    max-width: 44ch;
    margin-bottom: var(--space-8);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgb(250 246 240 / 0.9);
}

.hero__figures {
    margin-top: var(--space-16);
    padding-top: var(--space-8);
    border-top: 1px solid rgb(250 246 240 / 0.22);
}

.hero__figures .figure-item__icon { color: var(--color-terracotta-light); }
.hero__figures .figure-item__value { color: var(--color-sand); }
.hero__figures .figure-item__label { color: rgb(250 246 240 / 0.7); }

.hero__eyebrow-icon {
    width: 1rem;
    height: 1rem;
}

/* --- Highlight tile (home page) ------------------------------------------ */

.highlight {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.highlight__icon {
    width: 1.75rem;
    height: 1.75rem;
    margin-bottom: var(--space-2);
    color: var(--color-terracotta);
}

.highlight__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
}

.highlight__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* --- Photo teaser grid (home page) -------------------------------------- */

.teaser-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--space-4);
}

.teaser {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-sand-deep);
}

.teaser img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.teaser:hover img,
.teaser:focus-visible img {
    transform: scale(1.04);
}

.teaser__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-8) var(--space-4) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-sand);
    /* Gradient rather than a solid bar: the photo stays visible behind the text. */
    background: linear-gradient(to top, rgb(43 38 34 / 0.8), transparent);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
}

.teaser:hover .teaser__caption,
.teaser:focus-visible .teaser__caption {
    opacity: 1;
}

/* Touch devices have no hover, so the caption would never appear. */
@media (hover: none) {
    .teaser__caption { opacity: 1; }
}

/* --- Compact page header (every page except the home page) --------------- */

.page-header {
    padding-block: calc(var(--section-gap) * 0.8) calc(var(--section-gap) * 0.5);
    background-color: var(--color-sand-deep);
    border-bottom: 1px solid var(--color-border);
}

.page-header__title {
    max-width: 28ch;
    margin-bottom: var(--space-4);
}

.page-header__text {
    max-width: 52ch;
    font-size: var(--text-lg);
    color: var(--color-ink-soft);
}

/* --- Contact methods -----------------------------------------------------
   An icon badge, a small label and the value underneath. The whole row is the
   tap target, which matters most on a phone — where a guest reading this page
   wants to press "call" rather than aim at a link. */

.contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-list li + li {
    margin-top: 0;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    margin-inline: calc(var(--space-3) * -1);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.contact-item:hover {
    background-color: var(--color-sand-deep);
    color: inherit;
}

.contact-item__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2.5rem badge, 44px hit area with the row padding. */
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background-color: var(--color-terracotta-tint);
    color: var(--color-terracotta-dark);
}

/* The size has to be stated: an inline SVG with no dimensions falls back to the
   browser's default of 300x150 and swamps the page. */
.contact-item__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.contact-item__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.contact-item__label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-faint);
}

.contact-item__value {
    font-weight: 500;
    /* A long address must wrap rather than widen the card. */
    overflow-wrap: anywhere;
}

.contact-item:hover .contact-item__value {
    color: var(--color-terracotta-dark);
}

/* --- Address block ------------------------------------------------------- */

.contact-address {
    margin: 0;
    font-style: normal;
    line-height: var(--leading-relaxed);
}

.contact-note {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.contact-note strong {
    display: block;
    color: var(--color-ink-soft);
}

/* Pushes the button to the bottom so cards of different length still line up. */
.card__body--stretch {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card__spacer {
    flex: 1 1 auto;
    min-height: var(--space-6);
}

/* --- Download list (KEY area) -------------------------------------------- */

.download-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.download-list li + li {
    margin-top: 0;
}

.download {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.download__icon {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-terracotta);
}

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

.download__title {
    font-weight: 600;
    text-decoration: none;
    color: var(--color-ink);
    /* A long file name must wrap rather than push the button off the card. */
    overflow-wrap: anywhere;
}

.download__title:hover {
    color: var(--color-terracotta);
}

.download__text {
    margin: var(--space-1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-ink-soft);
}

.download__meta {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--color-ink-faint);
    font-variant-numeric: tabular-nums;
}

.download__action {
    flex: 0 0 auto;
}

@media (max-width: 34rem) {
    .download {
        flex-wrap: wrap;
    }

    .download__action {
        width: 100%;
    }
}

.download-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* --- Guestbook entries --------------------------------------------------- */

.page-header__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-5);
    margin-bottom: 0;
    font-weight: 600;
}

.page-header__rating-count {
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.entry-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.entry-list li + li {
    margin-top: 0;
}

.entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: var(--space-6);
    background-color: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.entry__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.entry__author {
    font-weight: 600;
}

.entry__location {
    margin-left: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

.entry__body {
    margin: 0;
    /* Guests write at length; the display face keeps a wall of text readable. */
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-ink);
}

.entry__body p + p {
    margin-top: var(--space-3);
}

.entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
}

/* Offered only on entries written in another language than the page. */
.entry__translate {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-terracotta);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.entry__translate:hover {
    border-bottom-color: currentColor;
}

/* The size has to be stated: an inline SVG without dimensions falls back to the
   browser's default of 300x150 and swamps the line. */
.entry__translate-icon {
    width: 0.85em;
    height: 0.85em;
    flex-shrink: 0;
}

/* --- Prose block for long editorial text -------------------------------- */

.prose {
    max-width: 38rem;
}

.prose h2 {
    margin-top: var(--space-12);
}

.prose h3 {
    margin-top: var(--space-8);
}

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

/* Preserves the line breaks in multi-line settings such as the address. */
.preserve-lines {
    white-space: pre-line;
}