/* Taste Walk — City Guide. Global styles: mosaic, motion, type helpers. */

:root {
    --tw-chili: #B33A2B;
    --tw-noodle: #F0E2C8;
    --tw-soy: #2A211C;
    --tw-leaf: #5F7A58;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -0.01em;
}

/* Asymmetric photo mosaic (homepage) */
.tw-mosaic {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(42, 33, 28, .18);
    border-radius: .75rem;
    background: rgba(42, 33, 28, .18);
}

.tw-tile {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 200px;
    background: #2A211C;
}

.tw-tile--featured {
    grid-column: span 12;
    grid-row: span 2;
    min-height: 280px;
}

.tw-tile--sm {
    grid-column: span 6;
}

.tw-tile__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 420ms var(--ease-out);
}

.tw-tile:hover .tw-tile__img,
.tw-tile:focus-visible .tw-tile__img {
    transform: scale(1.045);
}

.tw-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(42, 33, 28, .88) 0%, rgba(42, 33, 28, .30) 42%, rgba(42, 33, 28, 0) 72%);
}

.tw-tile__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.1rem 1.25rem;
}

.tw-tile:focus-visible {
    outline: 2px solid #B33A2B;
    outline-offset: -2px;
}

@media (min-width: 768px) {
    .tw-tile--featured { grid-column: span 8; }
    .tw-tile--sm { grid-column: span 4; }
}

@media (min-width: 1024px) {
    .tw-mosaic { grid-auto-rows: 230px; }
}

/* Text clamps */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid rgba(179, 58, 43, .55);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
    .tw-tile:hover .tw-tile__img,
    .tw-tile:focus-visible .tw-tile__img {
        transform: none;
    }
}