/* Underskin — Home page */

.section {
    position: relative;
}

/* Palette-driven per-section overrides (backend ACF selects). Vars are
   applied inline on <section> when the editor picks a palette color.
   Empty vars = inherit body defaults. */
.section[style*="--section-bg"] {
    background-color: var(--section-bg);
}

.section .section-title__heading {
    color: var(--section-heading, inherit);
}

.section .section-title__subtitle {
    color: var(--section-subtitle, inherit);
}

.section__cta {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .section__cta {
        align-items: stretch;
    }

    .section__cta > .btn {
        width: 100%;
    }
}

.artists-grid {
    margin-top: var(--space-lg);
}

.upcoming-grid {
    margin-top: var(--space-lg);
}

/* Portfolio showcase — dual-row horizontal marquee.
   Two rows scroll in opposite directions on a slow linear loop. Each row's
   track holds the source images twice back-to-back so the -50% translate
   seams exactly onto the duplicate copy, giving an infinite loop with no
   snapping. Hovering the section pauses both rows; hovering a tile scales
   and warms it. Fade edges on left/right sell the "endless strip" illusion. */
.home-portfolio-marquee {
    margin-top: var(--space-lg);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-block: 4px;
    overflow: hidden;
}

.home-portfolio-marquee::before,
.home-portfolio-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 2;
    pointer-events: none;
}

.home-portfolio-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg), transparent);
}

.home-portfolio-marquee::after {
    right: 0;
    background: linear-gradient(-90deg, var(--bg), transparent);
}

@media (min-width: 768px) {
    .home-portfolio-marquee::before,
    .home-portfolio-marquee::after {
        width: 80px;
    }
}

.home-portfolio-marquee__row {
    overflow: hidden;
    /* Tuning knob for the whole marquee. Both row height and tile width
       reference this custom prop so bumping it once resizes everything. */
    --marquee-h: clamp(200px, 34vw, 380px);
    height: var(--marquee-h);
}

.home-portfolio-marquee__track {
    display: flex;
    gap: 8px;
    height: 100%;
    width: max-content;
    will-change: transform;
    animation-duration: 40s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.home-portfolio-marquee__row--left .home-portfolio-marquee__track {
    animation-name: portfolio-marquee-left;
}

.home-portfolio-marquee__row--right .home-portfolio-marquee__track {
    animation-name: portfolio-marquee-right;
}

@keyframes portfolio-marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes portfolio-marquee-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Pause only the row the user is actually hovering. The other row keeps
   scrolling so the section still feels alive. */
.home-portfolio-marquee__row:hover .home-portfolio-marquee__track,
.home-portfolio-marquee__row:focus-within .home-portfolio-marquee__track {
    animation-play-state: paused;
}

.home-portfolio-marquee__tile {
    display: block;
    flex: 0 0 auto;
    height: 100%;
    /* Width = row height * intrinsic ratio, so portrait/square/landscape
       photos each get their natural footprint without cropping. */
    width: calc(var(--marquee-h) * var(--tile-ratio, 1));
    position: relative;
    overflow: hidden;
    background: #1a1108;
    text-decoration: none;
    transition:
        transform var(--duration-medium) var(--ease-default),
        filter var(--duration-medium) var(--ease-default);
}

.home-portfolio-marquee__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.home-portfolio-marquee__tile:hover,
.home-portfolio-marquee__tile:focus-visible {
    transform: scale(1.06);
    filter: brightness(1.1) saturate(1.1);
    z-index: 3;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .home-portfolio-marquee__track {
        animation-duration: 600s;
    }
}

.upcoming-card {
    display: block;
    color: var(--ink);
    text-decoration: none;
    background: var(--bg);
    overflow: hidden;
}

.upcoming-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow) var(--ease-default);
}

.upcoming-card:hover img {
    transform: scale(1.04);
}

.upcoming-card__info {
    padding: var(--space-sm) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xxs);
}

.upcoming-card__dates {
    font-size: var(--font-size-sm);
    color: var(--accent);
}

.upcoming-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.upcoming-card__artist {
    color: var(--ink);
    opacity: 0.8;
    font-size: var(--font-size-sm);
}

/* Moments marquee, homepage Visit section, edge-to-edge full-bleed */
.moments-marquee {
    overflow: hidden;
    margin-block: var(--space-lg);
}

.moments-marquee__track {
    display: inline-flex;
    gap: 12px;
    animation: moments-scroll 55s linear infinite;
    will-change: transform;
}

.moments-marquee__item {
    margin: 0;
    flex: 0 0 auto;
    width: clamp(220px, 22vw, 340px);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #1a0f07;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.moments-marquee__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--duration-slow) var(--ease-default);
}

.moments-marquee__item:hover img {
    transform: scale(1.04);
}

@keyframes moments-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .moments-marquee__track { animation: none; }
}

/* Old visit-card (deprecated, kept only to avoid unresolved refs) */
.visit-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    background: #1a0f07;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

@media (min-width: 900px) {
    .visit-card {
        grid-template-columns: 1.05fr 1fr;
    }
}

.visit-card__media {
    position: relative;
    min-height: 320px;
    aspect-ratio: 4 / 3;
    background: #0d0603;
    overflow: hidden;
}

@media (min-width: 900px) {
    .visit-card__media {
        aspect-ratio: auto;
        min-height: 100%;
    }
}

.visit-card__media iframe,
.visit-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
}

.visit-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3d2716 0%, #0d0603 100%);
}

.visit-card__body {
    padding: clamp(1.75rem, 3.5vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.visit-card__eyebrow {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.15em;
}

.visit-card__title {
    margin: 0;
    font-family: var(--font-signature);
    font-weight: 400;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: 0.01em;
    color: #fff;
    text-transform: none;
}

.visit-card__lead {
    margin: 0;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.8);
    max-width: 46ch;
}

.visit-card__info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.visit-card__info-block--hours {
    grid-column: 1 / -1;
}

.visit-card__label {
    margin: 0 0 var(--space-xxs);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent);
}

.visit-card__value {
    margin: 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.visit-card__value a {
    color: inherit;
    transition: color var(--duration-fast) var(--ease-default);
}

.visit-card__value a:hover,
.visit-card__value a:focus-visible {
    color: var(--accent);
}

.visit-card__hours {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.35rem var(--space-sm);
}

.visit-card__hours-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.88);
    padding: 0.15rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.visit-card__hours-row.is-closed {
    opacity: 0.55;
}

.visit-card__hours-day {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.06em;
}

.visit-card__hours-time {
    font-variant-numeric: tabular-nums;
}

.visit-card__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Homepage FAQ teaser — reuses .faq-item styles from pages/faq.css */
.section--faqs .home-faqs {
    max-width: 780px;
    margin: var(--space-lg) auto 0;
}

/* Gradient body rimosso: ultima sezione (Visit) è su bg piatto come le
   altre → titoli restano ink. Se ACF override → CSS var vince. */
.section--visit .section-title__heading {
    color: var(--section-heading, inherit);
}

.section--visit .section-title__subtitle {
    color: var(--section-subtitle, inherit);
}