/**
 * Catanzaro Tourism Theme - Page Scopri la Città Component
 * 
 * PURPOSE: Styles for the Scopri la Città page layout and components
 * 
 * STRUCTURE:
 * - Hero title section
 * - Tourism sections (cosa vedere, itinerari, esperienze)
 * - Tourism grid layout
 * - Tourism cards (using exact index page styling)
 * - Section-specific styling
 * 
 * USAGE:
 * - Used by page-scopri-la-citta.php template
 * 
 * UPDATE PROCEDURES:
 * - Impact level: MEDIUM
 * - Testing on page template required
 * 
 * DEPENDENCIES:
 * - Requires: variables.css, buttons.css, cards.css, carousel.css
 * - Used by: page-scopri-la-citta.php
 * 
 * @package TurismoCatanzaro
 * @version 1.0.0
 */

/* ==========================================================================
   Container System (matching navbar max-width)
   ========================================================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--tourism-space-4);
}

@media (max-width: 1024px) {
    .container {
        padding: 0 var(--tourism-space-6);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--tourism-space-4);
    }
}

/* ==========================================================================
   Hero Title Section
   ========================================================================== */

.tourism-hero-title {
    padding: calc(180px + var(--tourism-space-8)) 0 var(--tourism-space-16) 0;
    text-align: center;
    background: var(--tourism-accent-dark);
}

/* ==========================================================================
   Hero Background Decoration Responsive Styles
   Scoped so related-section utilities (e.g. tourism-lg:bg-decoration--center)
   keep their intended alignment. page-scopri is filemtime-enqueued after
   background-decoration.css — unscoped !important here was shifting related
   shapes to y:30% (prod stays at 50% via cascade order in style.css @imports).
   ========================================================================== */

/* Mobile: xl size and ~23% vertical position (hero decorations only) */
.tourism-bg-decoration--complete:not([class*="bg-decoration--center"]) {
    --decoration-size: 90% !important;
    --decoration-y: 23% !important;
}

/* Tablet and up: large size and hero positioning */
@media (min-width: 768px) {
    .tourism-bg-decoration--complete:not([class*="bg-decoration--center"]) {
        --decoration-size: 75% !important;
        --decoration-y: 30% !important;
    }
}

.tourism-main-title {
    font-size: 5.6em;
    font-weight: var(--tourism-font-extrabold);
    color: var(--tourism-white);
    margin: 0;
    letter-spacing: 0.1em;
    position: relative;
}

@media (max-width: 768px) {
    .tourism-hero-title {
        padding: calc(100px + var(--tourism-space-6)) 0 var(--tourism-space-12) 0;
    }

    .tourism-main-title {
        font-size: var(--tourism-text-5xl);
    }
}

@media (max-width: 480px) {
    .tourism-hero-title {
        padding: calc(80px + var(--tourism-space-4)) 0 var(--tourism-space-8) 0;
    }

    .tourism-main-title {
        font-size: var(--tourism-text-4xl);
    }
}

/* ==========================================================================
   Tourism Sections
   ========================================================================== */

.tourism-section {
    padding: var(--tourism-space-16) 0;
    padding-left: var(--tourism-space-8);
    padding-right: var(--tourism-space-8);
    position: relative;
}

.tourism-section::before {
    content: '';
    background: var(--tourism-accent-dark);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../../images/bg_shapes_scopri.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;
    z-index: -1;
}

@media (max-width: 768px) {
    .tourism-section {
        background-image: none;
    }
}

.tourism-section__header {
    text-align: left;
    margin-bottom: var(--tourism-space-12);
}

.tourism-section__title {
    font-size: var(--tourism-text-6xl);
    font-weight: var(--tourism-font-extrabold);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.tourism-section__title--blue {
    color: var(--tourism-accent-blue);
}

.tourism-section__title--yellow {
    color: var(--tourism-accent-yellow);
}

.tourism-section__title--white {
    color: var(--tourism-white);
}

.tourism-section__title--red {
    color: var(--tourism-accent-red);
}

@media (max-width: 768px) {
    .tourism-section {
        padding: var(--tourism-space-12) 0;
    }

    .tourism-section__title {
        font-size: var(--tourism-text-4xl);
    }
}

@media (max-width: 480px) {
    .tourism-section__title {
        font-size: var(--tourism-text-3xl);
    }
}

/* ==========================================================================
   Card grids — BI .row.g-4 owns horizontal gutters; vertical uses row-gap
   like prod .tourism-grid { gap: space-6 } (avoid margin-top gutter stacking).
   ========================================================================== */

.row.g-4.mb-5 {
    /* former .tourism-grid margin-bottom: space-12; mb-5 = 3rem */
    margin-bottom: var(--tourism-space-12);
}

/* ==========================================================================
   Mobile column stretch (flex children; no width:100% override — breaks gutters)
   ========================================================================== */

@media (max-width: 768px) {
    .row.g-4 > [class*="col-"] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   Tourism Cards (Using Exact Index Page Styling)
   ========================================================================== */

/* Card chrome when carousel item is also the BI column */
.row.g-4 > [class*="col-"].tourism-carousel__item {
    display: flex;
    flex-direction: column;
    height: auto;
}

/* Override carousel card title color for white background */
.tourism-section .tourism-carousel__card-title {
    color: var(--tourism-white);
}

/* ==========================================================================
   Section Footer
   ========================================================================== */

.tourism-section__footer {
    text-align: center;
    margin-top: var(--tourism-space-8);
}

/* ==========================================================================
   Button Variants
   ========================================================================== */

.tourism-btn--outline-red {
    background: var(--tourism-white);
    color: var(--tourism-accent-red);
    border: 2px solid var(--tourism-accent-red);
    box-shadow: 4px 4px 0 0 var(--tourism-accent-red);
}

.tourism-btn--outline-red:hover {
    background: var(--tourism-accent-red);
    color: var(--tourism-white);
    transform: translate(4px, 4px);
    box-shadow: 0 0 0 0 var(--tourism-accent-red);
}

.tourism-btn--outline-red:focus {
    outline: 2px solid var(--tourism-accent-red);
    outline-offset: 2px;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 768px) {
    .row.g-4 .tourism-carousel__item {
        min-height: 360px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .row.g-4 .tourism-carousel__card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .row.g-4 .tourism-carousel__card-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
    }
}

@media (max-width: 480px) {
    .row.g-4 .tourism-carousel__item {
        min-height: 340px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .row.g-4 .tourism-carousel__card {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .row.g-4 .tourism-carousel__card-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
    }
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

.tourism-carousel__item:focus-within {
    outline: 2px solid var(--tourism-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {

    .tourism-carousel__card,
    .tourism-carousel__card-image img {
        transition: none;
    }

    .tourism-carousel__card:hover {
        transform: none;
    }

    .tourism-carousel__card:hover .tourism-carousel__card-image img {
        transform: none;
    }
}

/* ==========================================================================
   Mobile Carousel Wrapper Styles
   ========================================================================== */

/* Scope mobile carousel only to specific pages (scopri, itinerari, eventi) */
/* Mobile-specific carousel wrapper - hidden by default */
.page-scopri-la-citta .tourism-carousel-mobile-only,
.page-itinerari .tourism-carousel-mobile-only,
.page-eventi .tourism-carousel-mobile-only,
body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only,
body.page-template-page-itinerari .tourism-carousel-mobile-only,
body.page-template-page-eventi .tourism-carousel-mobile-only {
    display: none;
}

/* Show carousel wrapper only on mobile */
@media (max-width: 768px) {

    /* Hide ALL desktop grids on mobile in sections with mobile carousel */
    .page-scopri-la-citta .row.g-4,
    .page-itinerari .row.g-4,
    .page-eventi .row.g-4,
    body.page-template-page-scopri-la-citta .row.g-4,
    body.page-template-page-itinerari .row.g-4,
    body.page-template-page-eventi .row.g-4 {
        display: none !important;
    }

    /* Show carousel structure on mobile */
    .page-scopri-la-citta .tourism-carousel-mobile-only,
    .page-itinerari .tourism-carousel-mobile-only,
    .page-eventi .tourism-carousel-mobile-only,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only,
    body.page-template-page-itinerari .tourism-carousel-mobile-only,
    body.page-template-page-eventi .tourism-carousel-mobile-only {
        display: block;
        position: relative;
        width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        overflow: visible;
        padding: 0 0 var(--tourism-space-8) 0;
    }

    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__wrapper {
        width: 100%;
        position: relative;
        overflow-x: auto;
        overflow-y: visible;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 var(--tourism-space-4);
        padding-top: var(--tourism-space-2);
        padding-bottom: var(--tourism-space-2);
        -webkit-overflow-scrolling: touch;
    }

    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__wrapper::-webkit-scrollbar,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__wrapper::-webkit-scrollbar,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__wrapper::-webkit-scrollbar,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__wrapper::-webkit-scrollbar,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__wrapper::-webkit-scrollbar,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__wrapper::-webkit-scrollbar {
        display: none;
    }

    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__track,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__track {
        display: flex;
        gap: var(--tourism-space-4);
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        cursor: grab;
        will-change: scroll-position;
        transform: translateZ(0);
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track:active,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track:active,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__track:active,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track:active,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track:active,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__track:active {
        cursor: grabbing;
    }

    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track::after,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track::after,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__track::after,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track::after,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track::after,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__track::after {
        content: '';
        flex: 0 0 var(--tourism-space-4);
        height: 1px;
    }

    /* Ensure carousel items have proper width on mobile */
    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__item,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__item,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__item,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__item,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__item,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__item {
        flex: 0 0 280px !important;
        width: 280px !important;
        max-width: 280px !important;
        min-height: 260px !important;
    }

    /* Compact carousel spacing - remove vertical spacing */
    .page-scopri-la-citta .tourism-carousel-mobile-only,
    .page-itinerari .tourism-carousel-mobile-only,
    .page-eventi .tourism-carousel-mobile-only,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only,
    body.page-template-page-itinerari .tourism-carousel-mobile-only,
    body.page-template-page-eventi .tourism-carousel-mobile-only {
        padding: 0 !important;
    }

    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__wrapper,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__wrapper {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__track,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__track,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__track,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__track {
        padding-top: 0 !important;
    }

    /* Remove fixed height from card content in mobile carousel */
    .page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__card-content,
    .page-itinerari .tourism-carousel-mobile-only .tourism-carousel__card-content,
    .page-eventi .tourism-carousel-mobile-only .tourism-carousel__card-content,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only .tourism-carousel__card-content,
    body.page-template-page-itinerari .tourism-carousel-mobile-only .tourism-carousel__card-content,
    body.page-template-page-eventi .tourism-carousel-mobile-only .tourism-carousel__card-content {
        height: auto !important;
    }
}

/* Hide carousel wrapper on desktop */
@media (min-width: 769px) {

    .page-scopri-la-citta .tourism-carousel-mobile-only,
    .page-itinerari .tourism-carousel-mobile-only,
    .page-eventi .tourism-carousel-mobile-only,
    body.page-template-page-scopri-la-citta .tourism-carousel-mobile-only,
    body.page-template-page-itinerari .tourism-carousel-mobile-only,
    body.page-template-page-eventi .tourism-carousel-mobile-only {
        display: none !important;
    }

    /* Show BI row normally on desktop (flex; do not force display:grid) */
    .page-scopri-la-citta .row.g-4,
    .page-itinerari .row.g-4,
    .page-eventi .row.g-4,
    body.page-template-page-scopri-la-citta .row.g-4,
    body.page-template-page-itinerari .row.g-4,
    body.page-template-page-eventi .row.g-4 {
        display: flex;
    }
}
/* ==========================================================================
   Responsive Button Visibility
   ========================================================================== */

/* Mobile-only button: Show on mobile, hide on desktop */
.tourism-btn--mobile-only {
    display: inline-block;
}

.tourism-btn--desktop-only {
    display: none;
}

@media (min-width: 769px) {
    .tourism-btn--mobile-only {
        display: none !important;
    }

    .tourism-btn--desktop-only {
        display: inline-block !important;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .tourism-hero-title {
        background: none;
        padding: var(--tourism-space-8) 0;
    }

    .tourism-main-title {
        color: black;
    }

    .tourism-section__title--blue,
    .tourism-section__title--yellow,
    .tourism-section__title--white {
        color: black;
    }

    .tourism-carousel__card-button {
        display: none;
    }
}