/* Biglietteria: gli stessi colori e caratteri del sito. */
.ticketing-page .ticketing-hero {
    background: linear-gradient(rgba(20, 23, 40, .65), rgba(20, 23, 40, .72)), url('images/travel-20261020/roma-1440.webp') center 48% / cover;
    text-align: center;
    justify-items: center;
    align-content: center;
}
.ticketing-hero .button { margin-top: 24px; }
.ticketing-services > h2 { margin-bottom: 28px; }
.ticketing-service {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px 40px;
    padding-block: 28px;
    border-top: 1px solid var(--line);
    scroll-margin-top: 180px;
}
.ticketing-service h3 { font-size: clamp(1.6rem, 2.5vw, 2rem); }
.ticketing-service p { max-width: 70ch; }
.ticketing-service p + p { margin-top: 12px; }
.ticketing-service > a { grid-column: 2; width: fit-content; font-weight: 700; }
.ticketing-contact > div > p { max-width: 52ch; }
.ticketing-contact { scroll-margin-top: 180px; }
.ticketing-boxes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.ticketing-boxes .ticketing-service {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 36px;
    border: 1px solid var(--blue);
    border-radius: 16px;
    background: var(--blue);
    color: var(--paper);
}
.ticketing-boxes #aerea,
.ticketing-boxes #ferroviaria {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--ink);
}
.ticketing-boxes .ticketing-service h2,
.ticketing-boxes .ticketing-service p,
.ticketing-boxes .ticketing-service > a { color: inherit; }
.ticketing-boxes .ticketing-service h2 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
}
.ticketing-boxes .ticketing-service p { margin: 0 0 8px; max-width: 40ch; }
.ticketing-boxes #aerea,
.ticketing-boxes #ferroviaria { container-type: inline-size; }
.ticketing-boxes #aerea p,
.ticketing-boxes #ferroviaria p {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(.75rem, 3.5cqw, 1.125rem);
}
.ticketing-boxes .ticketing-service > a {
    margin-top: auto;
    padding-block: 10px;
    text-underline-offset: 5px;
}
.ticketing-boxes .ticketing-service > a:hover { text-decoration-thickness: 2px; }
.ticketing-boxes .ticketing-service > a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ticketing-boxes > .catalog-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 700px) {
    .ticketing-boxes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ticketing-boxes .ticketing-service { padding: 24px; }
    .ticketing-boxes #aerea p,
    .ticketing-boxes #ferroviaria p { white-space: normal; font-size: 1rem; }
}
.ticketing-home {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    background: var(--sand);
}
.ticketing-home > div { container-type: inline-size; align-self: stretch; }
.ticketing-home #home-ticketing-title { max-width: none; white-space: nowrap; font-size: clamp(.8125rem, 4.6cqw, 2.25rem); line-height: 1.2; }
.ticketing-home p { margin-top: 16px; max-width: none; white-space: nowrap; font-size: clamp(.875rem, 2cqw, 1.125rem); }
.ticketing-home .button { flex-shrink: 0; }
@media (min-width: 701px) and (max-width: 1100px) {
    body .site-header { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .site-header nav { width: 100%; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
}
@media (max-width: 700px) {
    .ticketing-page .ticketing-hero {
        background-image: linear-gradient(rgba(20, 23, 40, .65), rgba(20, 23, 40, .72)), url('images/travel-20261020/roma-800.webp');
    }
    .ticketing-service { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: 24px; }
    .ticketing-service > a { grid-column: 1; }
    .ticketing-hero .button { width: 100%; gap: 16px; }
    .ticketing-home .button { width: 100%; gap: 16px; }
    .ticketing-service, .ticketing-contact { scroll-margin-top: 220px; }
}

.ticketing-guide > h2 { margin-block: 26px 18px; }
.ticketing-guide > h3 { margin-block: 28px 16px; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.ticketing-guide > p { max-width: 75ch; }
.ticketing-guide > p + p { margin-top: 16px; }
.ticketing-page--aerei .ticketing-hero,
.ticketing-page--treni .ticketing-hero,
.ticketing-page--traghetti .ticketing-hero { background: var(--ink); }

@media (max-width: 1100px) {
    .ticketing-home > div { flex-basis: 100%; }
}
@media (max-width: 700px) {
    .ticketing-home p { white-space: normal; font-size: 1rem; }
}