/* Articles styles */


    /* Short Articles Styles */
    .short-articles-section {
        margin-bottom: 3rem;
    }
    
    .category-header {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        font-weight: bold;
        color: #555;
    }
    
    .category-icon {
        margin-right: 0.75rem;
        font-size: 1.5rem;
        color: #1a7cc4;
    }


    
    .short-article-card {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 0.75rem;
        background-color: #fff;
        overflow: hidden;
        transition: box-shadow 0.3s ease;
    }

    
    .short-article-card:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    
    .short-article-header {
        padding: 1rem;
        cursor: pointer;
        user-select: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .short-article-title {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: #333;
    }
    
    .toggle-icon {
        color: #1a7cc4;
        transition: transform 0.3s ease;
    }
    
    .toggle-icon.rotated {
        transform: rotate(180deg);
    }
    
    .short-article-content {
        padding: 1rem;
        display: none;
        border-top: 1px solid #e0e0e0;
        background-color: #fff;
        line-height: 1.6;
    }
    
    .short-article-content.show {
        display: block;
        animation: slideDown 0.3s ease;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            max-height: 0;
        }
        to {
            opacity: 1;
            max-height: 500px;
        }
    }
    
    /* Section Divider */
    .section-divider {
        border: 0;
        height: 2px;
        background: linear-gradient(to right, transparent, #e0e0e0, transparent);
        margin: 3rem 0;
    }
    
    /* Full Articles Styles */
    /*
     * Hero overlay classes are shared with the travel detail header (teacher_travel_main_styles.css).
     * Inlined here so full-article previews + article modal render correctly on pages that do not
     * load that stylesheet (e.g. teacher_route_day_detail).
     */
    .travel-image {
        position: relative;
        height: 250px;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        overflow: hidden;
    }

    .travel-title-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5);
        padding: 15px;
        color: white;
    }

    .travel-title-destination {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }

    .travel-title-date {
        font-size: 1rem;
        opacity: 0.9;
    }

    .full-articles-section {
        margin-bottom: 2rem;
    }
    
    .full-article-category-title {
        font-size: 1.2rem;
        font-weight: bold;
        color: #555;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .swiper-container {
        max-width: 1200px;
        overflow: hidden;
    }
    
    .content-swiper-slide {
        max-width: 350px !important;
        min-width: 240px !important;
    }

    /*
     * Day-nav (arrows): travel/registration/day views keep preview card width on desktop;
     * mobile uses full row width. Pass full_articles_expand_slides_on_desktop for nested
     * contexts (e.g. flight/hotel carousels) where slides must fill the track at all breakpoints.
     */
    /* tutor_new_profile.css sets .swiper-slide { min-width: 290px } — breaks narrow day-nav + nav buttons */
    .full-articles-swiper--day-nav .swiper-slide {
        min-width: auto !important;
    }

    @media (max-width: 767.98px) {
        .full-articles-swiper--day-nav.swiper-container {
            max-width: none;
        }
        .full-articles-swiper--day-nav .content-swiper-slide {
            max-width: none !important;
            min-width: 0 !important;
            width: 100% !important;
            box-sizing: border-box;
        }
        .full-articles-swiper--day-nav .content-article-card-link {
            display: block;
            width: 100%;
        }
    }

    @media (min-width: 768px) {
        .full-articles-swiper--day-nav:not(.full-articles-swiper--expand-slides-desktop) .content-swiper-slide {
            max-width: 330px !important;
            min-width: 240px !important;
            width: 330px !important;
            box-sizing: border-box;
        }
        .full-articles-swiper--day-nav:not(.full-articles-swiper--expand-slides-desktop) .content-article-card-link {
            display: block;
            width: 100%;
            max-width: 330px;
        }
    }

    .full-articles-swiper--day-nav.full-articles-swiper--expand-slides-desktop.swiper-container {
        max-width: none;
    }
    .full-articles-swiper--day-nav.full-articles-swiper--expand-slides-desktop .content-swiper-slide {
        max-width: none !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    .full-articles-swiper--day-nav.full-articles-swiper--expand-slides-desktop .content-article-card-link {
        display: block;
        width: 100%;
        max-width: none;
    }
    
    .content-article-card {
        border-radius: 8px;
        padding: 1rem;
        height: 250px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 1.5rem;
        border: 1px solid #e0e0e0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background-color: #fff;
    }
    
    .content-article-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    
    .content-article-header {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 0.75rem;
        color: #555;
    }
    
    .content-article-icon {
        margin-right: 0.75rem;
        font-size: 1.5rem;
        color: #1a7cc4;
    }
    
    .teacher-content-title {
        font-size: 1.15rem;
        font-weight: bold;
        margin: 0;
    }
    
    .content-article-image {
        width: 100%;
        height: 140px;
        background-size: cover;
        background-position: center;
        border-radius: 4px;
        margin-bottom: 0.75rem;
    }
    
    .content-article-tags {
        margin-top: 0.5rem;
    }
    
    .content-article-tags .badge {
        color: #1a7cc4;
        padding: 0.25rem 0.5rem;
        background-color: #e3f2fd;
        border-radius: 12px;
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }
    
    .content-article-link {
        text-decoration: none;
        color: #444;
    }

    /* Full article hero cards (travel + modal) */
    .content-article-hero-card {
        position: relative;
        height: 250px;
        margin-bottom: 1.5rem;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #e0e0e0;
        background-size: cover;
        background-position: center;
    }
    .content-article-hero-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    .content-article-hero-card .share-icon {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        color: #fff;
        cursor: pointer;
        font-size: 1.1rem;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85));
    }
    /* Full-article evoucher modal: same share control as card preview (hero top-left) */
    .content-article-modal-hero {
        position: relative;
    }
    .content-article-modal-hero .content-article-modal-share,
    .content-article-modal-hero .share-icon {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 4;
        color: #fff !important;
        cursor: pointer;
        font-size: 1.1rem;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85));
    }
    .content-article-modal-hero.content-article-hero-card--empty .content-article-modal-share,
    .content-article-modal-hero.content-article-hero-card--empty .share-icon {
        color: #fff !important;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
    }
    .content-article-hero-card--empty {
        background-color: #f0f0f0;
    }
    .content-article-modal-body {
        max-height: 65vh;
        overflow-y: auto;
    }
    .content-article-modal-hero-inner {
        min-height: 180px;
        height: 200px;
        margin-bottom: 0;
    }
    .content-article-modal-hero-inner.travel-image {
        margin-bottom: 0;
    }

    /* Full-article swiper slides are wrapped in <a>: disable native link drag so Swiper gets mouse drags (desktop). */
    .full-articles-section .content-article-card-link {
        -webkit-user-drag: none;
        user-select: none;
    }

    .teacher-content-article-nav button.page-link {
        border: 1px solid transparent;
        cursor: pointer;
        touch-action: manipulation;
    }

    /* Travel / day views: « / » only on small screens; desktop uses swipe (see initSlider breakpoints). */
    @media (min-width: 768px) {
        .teacher-content-article-nav--hide-arrows-desktop {
            display: none !important;
        }
    }

    /*
     * Desktop grid (no Swiper): responsive columns; Swiper is only initialized below 768px when
     * full_articles_desktop_grid is enabled on the inclusion tag.
     */
    @media (min-width: 768px) {
        .full-articles--desktop-grid--enabled.full-articles-swiper--day-nav.swiper-container {
            overflow: visible;
            max-width: none;
        }
        .full-articles--desktop-grid--enabled.full-articles-swiper--day-nav .swiper-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1.5rem;
            transform: none !important;
            width: 100% !important;
            box-sizing: border-box;
        }
        .full-articles--desktop-grid--enabled.full-articles-swiper--day-nav .swiper-slide {
            width: auto !important;
            max-width: none !important;
            min-width: 0 !important;
            margin: 0 !important;
            height: auto;
        }
    }