/* ============================================
   LOGIN 2K26 - Comprehensive Responsive Styles
   Full responsiveness for all screen sizes
   ============================================ */

/* ============================================
   GLOBAL RESPONSIVE BASE
   ============================================ */

/* Prevent horizontal scroll globally */
html {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Ensure all containers respect viewport */
*, *::before, *::after {
    max-width: 100%;
    box-sizing: border-box;
}

/* ============================================
   WELCOME PAGE - FULL WIDTH LAYOUT
   ============================================ */

/* Main container - full screen, centered content */
.main-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: clamp(10px, 3vh, 40px) clamp(10px, 3vw, 40px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: clamp(10px, 3vh, 30px) !important;
}

/* Title section - full width, centered */
.title-section {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
}

/* Title wrapper - centered with gap */
.title-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 clamp(5px, 2vw, 20px) !important;
    gap: clamp(8px, 2vh, 20px) !important;
}

/* ============================================
   HERO SECTION - MOBILE FIRST RESPONSIVE
   ============================================ */

/* Main hero container - fully responsive */
.cinematic-container,
.hero-container {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(10px, 3vw, 30px);
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden;
}

/* ============================================
   FLUID TYPOGRAPHY SYSTEM
   Using clamp() for scalable text
   ============================================ */

/* Title prefix - WELCOME TO */
.title-prefix {
    font-size: clamp(0.7rem, 3vw, 1.5rem) !important;
    letter-spacing: clamp(2px, 1vw, 8px) !important;
    text-align: center;
    width: 100%;
}

/* Main Title Container - Responsive */
.main-title-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: clamp(8px, 2vh, 20px) clamp(8px, 3vw, 30px) !important;
}

/* Main title - LOGIN 2K26 - Fully Responsive */
.main-title {
    /* Responsive font sizing - works from 320px to 4K */
    font-size: clamp(32px, 8vw, 120px) !important;
    letter-spacing: clamp(2px, 0.5vw, 10px) !important;
    max-width: 100% !important;
    width: auto !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    line-height: 1.1 !important;
    padding: 0 clamp(5px, 2vw, 15px) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* Title backlight - responsive sizing */
.main-title-backlight {
    width: clamp(180px, 50vw, 600px) !important;
    height: clamp(80px, 25vw, 300px) !important;
}

/* Title underline - responsive */
.title-underline {
    width: clamp(120px, 40vw, 500px) !important;
    max-width: 80% !important;
    margin-top: clamp(12px, 2.5vh, 25px) !important;
}

/* Background title - LOGIN 2K26 watermark */
.bg-title {
    font-size: clamp(2rem, 15vw, 12rem) !important;
    white-space: normal;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
    text-align: center;
    line-height: 1;
}

/* Section titles */
.section-title {
    font-size: clamp(1.2rem, 5vw, 3rem) !important;
    max-width: 100%;
    word-wrap: break-word;
}

/* Subtitles */
.subtitle {
    font-size: clamp(0.9rem, 3vw, 1.5rem) !important;
    max-width: 100%;
}

/* Tagline */
.tagline {
    font-size: clamp(0.6rem, 2vw, 1.2rem) !important;
    letter-spacing: clamp(1px, 0.5vw, 6px) !important;
    max-width: 95%;
    word-wrap: break-word;
    text-align: center;
}

/* Body text */
.body-text {
    font-size: clamp(0.8rem, 2vw, 1.125rem) !important;
}

/* Small text */
.small-text {
    font-size: clamp(0.7rem, 1.5vw, 0.875rem) !important;
}

/* ============================================
   CTA BUTTON - FULL WIDTH ON MOBILE
   ============================================ */

.cta-container {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 40px !important;
}

.cta-button {
    width: auto !important;
    min-width: clamp(180px, 70%, 300px) !important;
    max-width: 90% !important;
    padding: clamp(12px, 3vh, 18px) clamp(20px, 5vw, 50px) !important;
    font-size: clamp(0.75rem, 2.5vw, 1rem) !important;
    letter-spacing: clamp(2px, 0.5vw, 4px) !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.cta-text {
    font-size: inherit;
}

.cta-arrow {
    font-size: clamp(1rem, 2vw, 1.2rem);
}

/* ============================================
   DATE BADGE - RESPONSIVE
   ============================================ */

.date-badge {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
}

.date-text {
    font-size: clamp(0.6rem, 2vw, 1rem) !important;
    letter-spacing: clamp(2px, 1vw, 8px) !important;
}

/* ============================================
   BOTTOM SECTION - RESPONSIVE
   ============================================ */

.bottom-section {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;
    gap: clamp(10px, 2vh, 20px) !important;
}

.tagline-container {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
}

/* ============================================
   FLEXIBLE CONTAINERS
   ============================================ */

.content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(10px, 3vw, 30px);
    box-sizing: border-box;
}

/* ============================================
   RESPONSIVE BUTTONS
   ============================================ */

.btn,
.cta-btn,
.payment-btn,
.submit-btn,
.nav-btn {
    min-width: clamp(100px, 40vw, 200px);
    max-width: 100%;
    padding: clamp(10px, 3vw, 16px) clamp(20px, 5vw, 40px);
    font-size: clamp(0.75rem, 2.5vw, 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   RESPONSIVE CARDS
   ============================================ */

.card,
.event-card,
.slider-card {
    width: clamp(280px, 90%, 420px);
    max-width: 100%;
    min-height: auto;
    aspect-ratio: 3 / 4;
}

/* ============================================
   RESPONSIVE FORMS
   ============================================ */

.form-container,
.registration-form {
    width: clamp(280px, 90%, 500px);
    max-width: 100%;
    padding: clamp(15px, 4vw, 30px);
}

.form-input,
.form-select {
    width: 100%;
    max-width: 100%;
    padding: clamp(10px, 2.5vw, 14px);
    font-size: clamp(0.875rem, 2.5vw, 1rem);
}

/* ============================================
   RESPONSIVE PANELS
   ============================================ */

.slide-panel,
.rules-panel,
.registration-panel {
    width: clamp(300px, 95%, 500px);
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ============================================
   RESPONSIVE IMAGES
   ============================================ */

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.logo-img {
    width: clamp(55px, 20vw, 250px) !important;
    max-height: clamp(35px, 8vw, 60px) !important;
}

/* ============================================
   RESPONSIVE QR CODE
   ============================================ */

.qr-code-wrapper,
.qr-code-container {
    width: clamp(150px, 50vw, 250px);
    height: clamp(150px, 50vw, 250px);
    aspect-ratio: 1 / 1;
}

/* ============================================
   LARGE DESKTOP - 1440px+
   ============================================ */
@media (min-width: 1440px) {
    .main-container {
        padding: 40px;
    }
    
    .bg-title {
        font-size: 14rem !important;
    }
    
    .logo-img {
        width: 280px !important;
        max-height: 70px !important;
    }
    
    .card,
    .event-card {
        width: 450px;
    }
}

/* ============================================
   STANDARD LAPTOP - 1024px to 1439px
   ============================================ */
@media (min-width: 1024px) and (max-width: 1439px) {
    .main-container {
        padding: 30px;
    }
    
    .bg-title {
        font-size: clamp(8rem, 12vw, 12rem) !important;
    }
    
    .logo-img {
        width: clamp(180px, 25vw, 250px) !important;
    }
}

/* ============================================
   TABLET - 768px to 1023px
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    body {
        font-size: 15px;
    }
    
    .main-container {
        padding: 25px;
    }
    
    .bg-title {
        font-size: clamp(5rem, 15vw, 10rem) !important;
    }
    
    .logo-img {
        width: clamp(120px, 25vw, 200px) !important;
        max-height: 55px !important;
    }
    
    /* Adjust panels for tablet */
    .slide-panel {
        width: 80%;
        max-width: 600px;
    }
    
    /* Adjust cards */
    .card,
    .event-card {
        width: clamp(300px, 45%, 400px);
    }
    
    /* Navigation adjustments */
    .nav-menu {
        gap: 15px;
    }
    
    .nav-item {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* ============================================
   SMALL TABLET / LARGE PHONE - 480px to 767px
   ============================================ */
@media (min-width: 480px) and (max-width: 767px) {
    body {
        font-size: 14px;
        overflow-x: hidden;
    }
    
    .main-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
    }
    
    .title-section {
        width: 100% !important;
    }
    
    .title-wrapper {
        width: 100% !important;
    }
    
    .bg-title {
        font-size: clamp(3.5rem, 18vw, 6rem) !important;
    }
    
    .main-title {
        font-size: clamp(2rem, 10vw, 3.5rem) !important;
    }
    
    .logo-img {
        width: clamp(80px, 30vw, 150px) !important;
        max-height: 45px !important;
    }
    
    /* CTA Button - wider on tablet */
    .cta-button {
        width: 80% !important;
        max-width: 350px !important;
        min-width: unset !important;
    }
    
    /* Panels slide from bottom on smaller screens */
    .slide-panel {
        width: 95%;
        max-width: none;
    }
    
    /* Stack cards vertically */
    .card,
    .event-card {
        width: clamp(280px, 90%, 380px);
    }
    
    /* Adjust buttons */
    .btn,
    .cta-btn {
        width: clamp(120px, 60%, 200px);
        padding: 12px 25px;
    }
    
    /* Form adjustments */
    .form-container {
        width: 90%;
        padding: 20px;
    }
}

/* ============================================
   STANDARD MOBILE - 320px to 479px
   ============================================ */
@media (max-width: 479px) {
    body {
        font-size: 13px;
        overflow-x: hidden;
        width: 100% !important;
    }
    
    .main-container,
    .cinematic-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 10px !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        gap: 12px !important;
    }
    
    .title-section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .title-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }
    
    /* Hero section - LOGIN 2K26 title */
    .main-title {
        font-size: clamp(24px, 7vw, 40px) !important;
        letter-spacing: clamp(1px, 0.3vw, 3px) !important;
        padding: 0 5px !important;
    }
    
    .main-title-container {
        width: 100% !important;
        gap: 8px !important;
    }
    
    .main-title-backlight {
        width: clamp(120px, 35vw, 250px) !important;
        height: clamp(60px, 18vw, 120px) !important;
    }
    
    .title-underline {
        margin-top: 8px !important;
    }
    
    .bg-title {
        font-size: clamp(2rem, 18vw, 3.5rem) !important;
        letter-spacing: 2px !important;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .logo-img {
        width: clamp(55px, 35vw, 100px) !important;
        max-height: 40px !important;
    }
    
    /* College logo container */
    .college-logo {
        padding: 8px 12px;
        top: 10px;
        left: 10px;
    }
    
    /* Tagline adjustments */
    .tagline {
        font-size: clamp(0.65rem, 2.5vw, 0.9rem) !important;
        letter-spacing: clamp(1px, 0.3vw, 3px) !important;
    }
    
    /* CTA Button - 90% width on mobile */
    .cta-container {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .cta-button {
        width: 60% !important;
        max-width: 90% !important;
        min-width: unset !important;
        padding: 12px 18px !important;
        font-size: clamp(0.75rem, 2.5vw, 0.9rem) !important;
    }
    
    /* Panels full screen on mobile */
    .slide-panel {
        width: 100%;
        height: 100%;
        height: 100dvh;
        border-radius: 0;
    }
    
    /* Cards */
    .card,
    .event-card {
        width: clamp(260px, 95%, 350px);
        min-height: auto;
    }
    
    /* Buttons full width on mobile */
    .btn,
    .cta-btn,
    .payment-btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 20px;
        font-size: 0.85rem;
    }
    
    /* Forms */
    .form-container {
        width: 95%;
        padding: 15px;
    }
    
    .form-input {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
    
    /* QR Code */
    .qr-code-wrapper {
        width: clamp(140px, 60vw, 200px);
        height: clamp(140px, 60vw, 200px);
    }
    
    /* Navigation */
    .nav-menu {
        flex-direction: column;
        gap: 10px;
    }
    
    .nav-item {
        padding: 8px 15px;
        font-size: 0.8rem;
    }
    
    /* Titles */
    .section-title {
        font-size: clamp(1.2rem, 6vw, 1.8rem) !important;
        letter-spacing: 2px !important;
    }
    
    .subtitle {
        font-size: clamp(0.9rem, 4vw, 1.2rem) !important;
    }
    
    /* Hide decorative elements on very small screens */
    .deco-line,
    .deco-dot {
        display: none;
    }
    
    /* Adjust spacing */
    .content-section {
        padding: 15px 10px;
    }
    
    /* Adjust particle effects for performance */
    .particle,
    .floating-element {
        display: none;
    }
}

/* ============================================
   EXTRA SMALL MOBILE - 320px to 379px
   ============================================ */
@media (max-width: 379px) {
    body {
        font-size: 12px;
        overflow-x: hidden;
        width: 100% !important;
    }
    
    .main-container,
    .cinematic-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        min-height: 100svh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        gap: 10px !important;
    }
    
    .title-section {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .title-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
    }
    
    /* Hero section - LOGIN 2K26 title for very small screens */
    .main-title {
        font-size: clamp(22px, 7vw, 32px) !important;
        letter-spacing: clamp(0.5px, 0.2vw, 2px) !important;
        padding: 0 3px !important;
        word-wrap: break-word;
        word-break: keep-words;
    }
    
    .main-title-container {
        width: 100% !important;
        gap: 6px !important;
    }
    
    .main-title-backlight {
        width: clamp(100px, 30vw, 200px) !important;
        height: clamp(50px, 15vw, 100px) !important;
    }
    
    .title-underline {
        margin-top: 6px !important;
    }
    
    .bg-title {
        font-size: clamp(1.8rem, 20vw, 2.5rem) !important;
        letter-spacing: 1px !important;
        white-space: normal;
        word-wrap: break-word;
    }
    
    .logo-img {
        width: 55px !important;
        max-height: 35px !important;
    }
    
    .college-logo {
        padding: 6px 10px;
        top: 8px;
        left: 8px;
    }
    
    /* Tagline */
    .tagline {
        font-size: clamp(0.6rem, 2vw, 0.8rem) !important;
        letter-spacing: 1px !important;
    }
    
    /* CTA Button - 90% width on very small mobile */
    .cta-container {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .cta-button {
        width: 63% !important;
        max-width: 90% !important;
        min-width: unset !important;
        padding: 10px 14px !important;
        font-size: clamp(0.7rem, 2vw, 0.85rem) !important;
    }
    
    /* Cards */
    .card,
    .event-card {
        width: 95%;
        min-width: 260px;
    }
    
    /* Buttons */
    .btn,
    .cta-btn {
        padding: 10px 15px;
        font-size: 0.75rem;
        letter-spacing: 1px;
    }
    
    /* Forms */
    .form-container {
        width: 98%;
        padding: 12px;
    }
    
    .form-label {
        font-size: 0.7rem;
    }
    
    .form-input {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
    
    /* QR Code */
    .qr-code-wrapper {
        width: clamp(120px, 65vw, 180px);
        height: clamp(120px, 65vw, 180px);
    }
    
    /* Titles */
    .section-title {
        font-size: clamp(1rem, 7vw, 1.5rem) !important;
        letter-spacing: 1px !important;
    }
    
    /* Panels */
    .slide-panel-title {
        font-size: 0.9rem !important;
        letter-spacing: 1px !important;
    }
    
    /* Close buttons */
    .slide-panel-close {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    /* Reduce animation complexity */
    .film-grain,
    .scanlines,
    .vignette {
        display: none;
    }
    
    /* ============================================
       TEAM MEMBER ROWS - 320px RESPONSIVE
       ============================================ */
    .participant-row,
    .team-member-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .participant-row .form-group,
    .team-member-row .form-group {
        width: 100%;
        min-width: 100%;
        flex: none;
    }
    
    .team-member-input,
    .team-member-select {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }
    
    .team-section-header {
        margin: 15px 0 10px 0 !important;
        padding-bottom: 8px !important;
    }
    
    .team-section-header .form-label {
        font-size: 12px !important;
    }
    
    .team-section-header p {
        font-size: 11px !important;
    }
}

/* ============================================
   LANDSCAPE MOBILE ORIENTATION
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    .main-container {
        min-height: auto;
        padding: 10px 20px;
    }
    
    .bg-title {
        font-size: clamp(2rem, 10vh, 4rem) !important;
    }
    
    .logo-img {
        width: clamp(50px, 15vw, 100px) !important;
        max-height: 40px !important;
    }
    
    /* Adjust vertical spacing */
    .content-section {
        padding: 10px;
    }
    
    /* Reduce panel heights */
    .slide-panel {
        max-height: 100vh;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .cta-btn,
    .nav-item,
    .slide-panel-close {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    .cta-btn:hover,
    .card:hover {
        transform: none;
    }
    
    /* Active states for touch */
    .btn:active,
    .cta-btn:active {
        transform: scale(0.98);
    }
}

/* ============================================
   REDUCED MOTION PREFERENCE
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .film-grain,
    .scanlines,
    .particle,
    .floating-element {
        display: none;
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp text */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Sharper borders */
    .card,
    .form-input,
    .btn {
        border-width: 0.5px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .film-grain,
    .scanlines,
    .vignette,
    .particle,
    .college-logo,
    .nav-menu {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .main-container {
        padding: 20px;
    }
}

/* ============================================
   SAFE AREA INSETS (for notched devices)
   ============================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
    
    .slide-panel {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .college-logo {
        top: max(20px, env(safe-area-inset-top));
        left: max(20px, env(safe-area-inset-left));
    }
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS
   Reduce particle animation density on mobile
   ============================================ */
@media (max-width: 767px) {
    /* Reduce particle count and complexity */
    .particle {
        display: none !important;
    }
    
    /* Reduce floating elements */
    .floating-element {
        display: none !important;
    }
    
    /* Simplify background effects */
    .film-grain {
        opacity: 0.03 !important;
    }
    
    .scanlines {
        display: none !important;
    }
    
    /* Reduce glow effects for performance */
    .main-title {
        text-shadow: 
            0 0 10px rgba(255, 0, 0, 0.8),
            0 0 20px rgba(255, 0, 0, 0.5) !important;
    }
    
    /* Disable hover transform on mobile */
    .main-title:hover {
        transform: none !important;
        letter-spacing: inherit !important;
    }
    
    /* Reduce animation complexity */
    .glow-orb {
        display: none !important;
    }
    
    /* Simplify background animations */
    .bg-animation {
        animation: none !important;
    }
    
    /* Fix event cards flickering - force stable layout */
    .event-card {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    }
    
    .event-card:hover {
        transform: none !important;
    }
    
    /* Fix slide panels - prevent flickering */
    .slide-panel {
        transition: transform 0.3s ease-out !important;
    }
    
    .slide-panel-content {
        opacity: 1 !important;
    }
}

/* ============================================
   SAFARI-SPECIFIC FIXES
   ============================================ */
@supports (-webkit-touch-callout: none) {
    /* Fix for Safari viewport height issues */
    .main-container,
    .cinematic-container {
        min-height: -webkit-fill-available;
    }
    
    /* Fix text overflow on Safari */
    .main-title {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
    
    /* Disable 3D transforms that cause issues in Safari */
    .main-title-container {
        transform: none !important;
        perspective: none !important;
    }
    
    /* Fix position fixed elements in Safari */
    .college-logo {
        position: fixed;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ============================================
   iPHONE X AND NEWER (notch handling)
   ============================================ */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
       only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
       only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3),
       only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3),
       only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
    
    .main-container,
    .cinematic-container {
        padding-top: max(15px, env(safe-area-inset-top));
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
    
    .college-logo {
        top: max(20px, env(safe-area-inset-top));
    }
    
    /* Ensure title doesn't overlap notch */
    .main-title {
        margin-top: env(safe-area-inset-top);
    }
}