/* ==========================================================================
   Technion Vector Club - Mobile Responsive Layout Core (Max-Width: 768px)
   ========================================================================== */

@media screen and (max-width: 768px) {
    
    /* --- Global Elements Override --- */
    body {
        overflow-x: hidden;
    }

    /* --- Hero Layout Remapping --- */
    .hero-container {
        min-height: auto;
        padding: 20px 0px 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
    }

    .header-navigation {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: auto;
        padding: 0;
        max-width: 310px;
        margin: 0 auto;
    }

    .logo {
        position: relative;
        left: 0 !important;
        top: 0 !important;
        width: 160px;
        height: auto;
    }

    /* Collapse horizontal menu bar into hidden or vertical stack flow per screenshot */
    .menu {
        display: none; /* Can be paired with a mobile hamburger toggle script if required */
    }

    .hero-content {
        position: relative;
        top: 0 !important;
        left: 0 !important;
        margin-top: 60px;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: start;
        max-width: 310px;
    }

    .sub-heading {
        font-size: 18px;
        line-height: 18px;
        margin-bottom: 10px;
        width: 100%;
        font-family: "Britanica-LightCondensed", sans-serif;
    }

    .main-heading {
        font-size: 41px;
        line-height: 41px;
        margin-bottom: 25px;
    }

    .main-heading br {
        display: none;
    }

    .button {
        position: relative;
        margin-top: 0;
        width: 100%;
        font-size: 18px;
        height: 42px;
        max-width: max-content;
        padding-inline: 0;
        max-width: 160px;
        margin-top: 10px;
    }

    .button .arrow svg {
        width: 24px;
    }

    /* Reposition background asset behind mobile title grid neatly */
    .vector-graphic-bg {
        width: 100%;
        height: 394px;
        position: relative;
        margin-top: -55px;
        opacity: 1;
    }

    /* --- About Section Flow Remapping --- */
    .about-container {
        padding: 20px 20px;
    }

    .about-grid {
        flex-direction: column;
        align-items: center;
        gap: 9px;
        justify-content: flex-start;
        gap: 20px;
    }

    .kinetic-wrapper {
        width: 100%;
        max-width: 310px;
        height: 233px;
        aspect-ratio: 1 / 1;
    }

    .kinetic-heading {
        font-size: 41px;
        line-height: 41px;
    }

    .mission-wrapper {
        max-width: 100%;
        text-align: center;
    }

    .mission-text {
        margin-bottom: 0;
    }

    .body-light, .body-bold {
        font-size: 20px;
        line-height: 26px;
        text-align: start;
        max-width: 300px;
        margin: 0 auto;
        margin-bottom: 20px;
    }

    .partners-logos {
        justify-content: flex-start;
        gap: 24px;
        margin-top: 30px;
        gap: 20px;
    }

    .logo-t3,
    .logo-technion {
        width: auto;
        height: auto;
        opacity: 1;
    }
    .logo-box img {
        height: 44px;
        width: auto;
        ':';
        ': ש';
    }

    /* --- Card Deck Section Flow Remapping --- */
    .cards-container {
        padding: 60px 0px;
        max-width: 310px;
        margin: 0 auto;
        padding-top: 0;
    }

    .cards-header {
        margin-bottom: 40px;
    }

    .cards-main-heading {
        font-size: 41px;
        line-height: 41px;
        margin-bottom: 20px;
    }

    .cards-sub-paragraph {
        font-size: 20px;
        line-height: 22px;
        display: block;
        color: #BAB8B8;
    }

    .cards-sub-paragraph .highlight-bold {
        display: b
    }

    /* Transform row structure into a vertical column scroll */
    .cards-deck {
        all: unset;
    }

    .vector-card {
        /* width: 100% !important; */
        /* max-width: 340px; */
        height: auto !important;
        /* min-height: 240px; */
    }

    .vector-card .card-title {
        font-size: 28px;
        line-height: 36px;
    }

    /* --- Events Container Panel Flow Remapping --- */
    .events-container {
        padding: 60px 0px 0;
    }

    .events-main-header {
        flex-direction: column;
        align-items: anchor-center;
        gap: 0;
        display: flex;
        flex-flow: row;
        padding-inline: 20px;
        margin-bottom: 30px;
    }

    .events-title {
        font-size: 41px;
        line-height: 41px;
        order: 0; /* Placed cleanly above side buttons control matrix on mobile viewport screen heights */
    }

    .nav-event-btn {
        font-size: 22px;
        font-size: 0;
    }

    .nav-event-btn svg {
        width: 30px;
    }

    .event-inner-box {
        width: 100%;
        height: auto;
        grid-template-columns: 1fr; /* Single column breakdown */
    }

    .event-details-panel {
        padding: 40px;
        margin: 0 auto;
    }

    .event-meta {
        font-size: 20px;
        line-height: 22px;
    }

    .event-heading {
        font-size: 41px;
        line-height: 41px;
    }

    .event-heading br {
        display: none;
    }

    .event-description {
        font-size: 18px;
        line-height: 24px;
    }

    .timeline-row {
        font-size: 18px;
        line-height: 24px;
    }

    .timeline-row .sub-desc {
        margin-left: 0;
        display: block;
        margin-top: 6px;
    }

    /* Speakers Container Fixed Adjustments */
    .speakers-system-wrapper {
        grid-template-columns: 1fr; /* Strip down to single slot column array */
        width: 100%;
        gap: 24px;
    }

    .speaker-card {
        width: 100% !important;
    }

    .button-register {
        width: 100%;
        max-width: 211px;
        margin: 0 auto;
        height: 42px;
        font-size: 20px;
        line-height: 2;
        width: max-content;
        max-width: 100%;
        padding-inline: 15px;
        padding-bottom: 5px;
        margin: 0;
    }

    .button-register .arrow svg {
        width: 20px;
    }

    /* Hide background elements to keep layout legible on mobile devices */
    .event-graphic-panel {
        display: none;
    }

    .vector-field-overlay {
        width: 100%;
        position: relative;
        object-fit: scale-down;
        height: auto;
        object-position: top;
    }

    /* --- Interactive Registration Form Flow Remapping --- */
    .form-container {
        padding: 0 0 60px 0;
        max-width: 310px;
        margin: 0 auto;
        min-height: 1px;
        margin-top: 0;
        width: 100%;
        max-width: 100%;
    }

    .form-title {
        font-size: 46px;
        line-height: 52px;
        width: 310px;
        max-width: 100%;
        margin: 0px auto 20px;
    }

    .form-subtext {
        font-size: 20px;
        line-height: 26px;
        width: 310px;
        max-width: 100%;
        margin: 0 auto;
    }

    .vector-data-form {
        max-width: 100%;
        width: 310px;
    }

    .form-grid {
        grid-template-columns: 1fr; /* Grid item conversion down to basic unified flow stack */
        gap: 16px;
        margin: 0;
        margin-bottom: 10px;
    }

    .input-group, .split-input-wrapper, .custom-dropdown, button.dropdown-trigger, .dropdown-panel {
        width: 100% !important;
    }

    .split-input-wrapper {
        flex-direction: column;
        gap: 16px;
        height: auto;
    }

    .split-input-wrapper .input-group.split-half {
        width: 100%;
    }

    .vector-textarea {
        width: 100%;
    }

    .file-upload-trigger {
        width: 100%;
    }

    .disclaimer-text {
        font-size: 20px;
        line-height: 22px;
    }

    .form-footer {
        justify-content: center;
        margin-top: 20px;
    }

    .button-submit {
        width: 100%;
        max-width: 280px;
        width: 147px;
        height: 45px;
        font-size: 20px;
    }

    .custom-disclaimer-box {
        width: 26px;
        height: 26px;
    }

    .custom-disclaimer-box .checkmark-icon {
        top: 5.96px;
        left: 5.52px;
    }

    .button-submit .arrow {
        font-size: 50px;
    }

    .button-submit .arrow svg {
        width: 24px;
    }

    .form-canvas-vector-bg {
         /* Clear backdrop artifact clipping on skinny device panels */
         top: 0;
         display: block;
         left: 0;
    }

    /* --- Global Footer Area Flow Remapping --- */
    .global-footer {
        padding: 80px 20px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 5px;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
        width: 128px;
        height: 58px;
        margin-bottom: 20px;
    }

    .footer-logo img{
        width: auto;
        height: 100%;
    }

    .footer-menu {
        /* flex-direction: column; */
        /* height: auto; */
        /* width: 100%; */
        /* gap: 20px; */
        gap: 0;
        max-width: 100%;
        gap: 0 20px;
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        gap: 20px;
        margin: 20px;
    }

    .footer-menu-item {
        font-size: 20px;
    }

    .footer-attribution {
        text-align: center;
        opacity: 0.65;
    }

    .speaker-img {
        width: 70px;
        height: 70px;
    }

    .speaker-name {
        font-size: 16px;
        line-height: 18px;
    }

    .speaker-topic {
        font-size: 16px;
        line-height: 18px;
    }

    .speaker-links, .speaker-links a {
        font-size: 16px;
        line-height: 18px;
    }

}

@media screen and (max-width: 768px) {
    /* Reveal Hamburger element trigger on mobile devices */
    .hamburger-toggle-btn {
        display: flex;
    }

    /* Strict mobile resizing configuration override */
    .nav-logo-asset {
        width: 128.5px;
        height: 57.17px;
    }

    .header-navigation {
        padding: 24px 0px;
    }
}


@media screen and (max-width: 768px) {
    
    /* 1. Master Container Window Frame */
    .cards-slider-container.swiper {
        width: 100% !important;
        max-width: 340px !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 auto !important;
        display: block !important; /* Forces layout tracking visibility */
    }

    /* 2. Swiper Layout Track Flex Engine */
    .cards-deck.swiper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        width: 100% !important;
        min-height: 1px;
    }

    /* 3. Slide Element Specific Layout Overrides */
    .vector-card.swiper-slide {
        /* display: flex !important; */
        /* flex-direction: column !important; */
        /* justify-content: flex-start !important; */
        /* position: relative !important; */
        /* top: auto !important; */
        /* left: auto !important; */
        /* height: 339px !important; */ /* Standardized uniform height mapping */
        /* background: #BAB8B8CC !important; */ /* Matches base desaturated canvas gray from screenshot */
        /* opacity: 1 !important; */
        /* visibility: visible !important; */
        /* box-sizing: border-box !important; */
        /* padding-inline-start: 40px; */
        /* padding-inline-end: 30px; */
    }

    /* Force Active Slide color state manually if needed */
    .vector-card.swiper-slide-active {
        /* background: #C9A97F !important; */
    }

    /* --- Pagination Control Matrix Realignment --- */
    .cards-dots-wrapper.swiper-pagination {
        position: relative !important;
        bottom: 0 !important;
        margin: 32px 0 40px 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        z-index: 50 !important;
    }

    .cards-dots-wrapper .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        background: rgba(255, 255, 255, 0.3) !important;
        opacity: 1 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        cursor: pointer !important;
    }

    .cards-dots-wrapper .swiper-pagination-bullet {
        background: #97979E !important;
    }
    
    .cards-dots-wrapper .swiper-pagination-bullet-active {
        background: #C9A97F !important;
        transform: scale(1.2) !important;
    }
}

@media screen and (max-width: 768px) {
    
    /* 1. מיכל הסליידר הראשי - קובע את מסגרת הצפייה הכללית */
    .cards-slider-container.swiper {
        width: 100%;
        max-width: 340px; /* רוחב המסגרת שבה יראו את הכרטיס */
        overflow: hidden;
        position: relative;
        margin: 0 auto;
    }

    /* 2. מסילת הכרטיסים של סוויפר (מנקים הגדרות CSS ידניות קשיחות) */
    .cards-deck.swiper-wrapper {
        display: flex;
        gap: 0; /* הרווח מנוהל כעת ישירות מה-JS בעזרת spaceBetween */
        padding: 0;
        margin: 0;
    }

    /* 3. עיצוב הכרטיס הבודד */
    .vector-card.swiper-slide {
        /* display: flex; */
        /* flex-direction: column; */
        /* justify-content: flex-start; */
        /* height: 339px; */
        /* background: #9094A6; */
        /* opacity: 1; */
        /* box-sizing: border-box; */
        
        /* הסרת מיקומים אבסולוטיים שעלולים לשבש את הגלילה */
        /* position: relative; */
        /* top: auto; */
        /* left: auto; */
    }

    /* צבע רקע לכרטיס הפעיל הנוכחי */
    .vector-card.swiper-slide-active {
        /* background: #C9A97F; */
    }

    /* --- נקודות הניווט (Pagination) --- */
    .cards-dots-wrapper.swiper-pagination {
        position: relative;
        bottom: 0;
        margin: 32px 0 40px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .cards-dots-wrapper .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: rgba(255, 255, 255, 0.3);
        opacity: 1;
        margin: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
    }

    .cards-dots-wrapper .swiper-pagination-bullet-active {
        background: #C9A97F;
        transform: scale(1.2);
    }
}

@media screen and (max-width: 768px) {

    .cards-slider-container.swiper {
        height: auto !important;
    }

    .vector-card.swiper-slide {
        /* height: auto !important; */
        /* height: 226px !important; */
    }


    .button-apply {
        font-size: 20px;
        max-width: 100%;
        height: 42px;
        width: max-content;
        padding-inline: 20px;
    }

    .button-apply .arrow svg {
        width: 24px;
    }

    .vector-input {
        height: 60px;
        font-size: 20px;
        line-height: 20px;
    }

}

@media screen and (max-width: 768px) {

    .events-swiper {
        width: 100% !important;
    }

    .events-swiper .event-inner-box {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        display: flex;
        flex-flow: column-reverse;
    }

    .events-swiper .event-graphic-panel {
        /* display: none; */
        display: block;
    }

    .events-swiper .event-details-panel {
        padding: 40px 40px;
    }
    .success-screen-wrapper {
        max-width: 310px;
    }
    .success-title {
        font-size: 41px;
        line-height: 40px;
    }
    .success-subtext {
        font-size: 20px;
        line-height: 22px;
        white-space: normal;
    }
}