/* ============================================================
   TEDxSNPSU — Homepage Polish
   Additive overrides loaded after style.css.
   Improves consistency, responsiveness, and accessibility
   without touching or removing any existing rules.
   ============================================================ */


/* ── 1. CSS Custom Properties ────────────────────────────── */
:root {
  /* Brand — single source of truth */
  --tedx-red:       #eb0028;
  --tedx-red-dark:  #b91c1c;
  --tedx-red-glow:  rgba(235, 0, 40, 0.18);
  --tedx-red-soft:  rgba(235, 0, 40, 0.10);

  /* Backgrounds */
  --bg-main:    #000000;
  --bg-section: #0a0a0a;
  --bg-card:    rgba(255, 255, 255, 0.04);

  /* Text */
  --text-primary: #ffffff;
  --text-muted:   rgba(255, 255, 255, 0.65);
  --text-subtle:  rgba(255, 255, 255, 0.38);

  /* Borders & Shadows */
  --border-soft:  rgba(255, 255, 255, 0.10);
  --border-red:   rgba(235, 0, 40, 0.28);
  --shadow-card:  0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-red:   0 8px 32px rgba(235, 0, 40, 0.28);

  /* Border radii */
  --r-xl:   24px;
  --r-lg:   16px;
  --r-md:   12px;
  --r-sm:   8px;
  --r-pill: 999px;

  /* Transitions */
  --t-fast: 180ms ease;
  --t-base: 250ms ease;
  --t-slow: 380ms ease;
}


/* ── 2. Universal box-sizing reset ───────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}


/* ── 3. No horizontal overflow on any viewport ───────────── */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


/* ── 4. Accessibility — prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}


/* ── 5. Focus-visible — keyboard navigation ──────────────── */
:focus-visible {
  outline:        2px solid var(--tedx-red);
  outline-offset: 3px;
  border-radius:  4px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}


/* ── 6. Touch-friendly minimum tap areas ─────────────────── */
button,
a,
[role="button"] {
  min-height: 44px;
  min-width:  44px;
}

/* Exception: inline text links */
p a,
nav a,
.tedx-footer-link,
.mob-nav-item,
.mob-sub-item,
.cp-info-val {
  min-height: unset;
  min-width:  unset;
}


/* ── 7. Active press state for primary buttons ───────────── */
.desktop-ticket-btn:active,
.mob-ticket-btn:active,
.get-ticket-button-link:active,
.tedx-view-more-btn:active,
.explore-more-button:active,
.submit-btn:active,
.home-welcome-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}


/* ── 8. Card hover transitions (where not already defined) ── */
.cp-info-card {
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.cp-info-card:hover {
  transform:    translateY(-5px);
  border-color: var(--border-red);
  box-shadow:   var(--shadow-card);
}

.contact-form-box {
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.contact-form-box:focus-within {
  border-color: var(--border-red);
  box-shadow:   0 0 0 1px rgba(235, 0, 40, 0.12), var(--shadow-card);
}

/* About section tilt images */
.about-imagess .tilt-card {
  transition: transform var(--t-base);
}

/* Sponsor logos */
.logo-container img {
  transition: transform var(--t-base), opacity var(--t-base), box-shadow var(--t-base) !important;
}

.logo-container img:hover {
  transform:  scale(1.06) translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5) !important;
}


/* ── 9. Memories section — fix mobile overflow ───────────── */
/*
   .memories-section uses width: calc(100% + 80px) and margin-left: -80px
   to compensate for the body's 80px dock padding on desktop.
   On mobile (≤991px) the dock is hidden and padding resets to 0,
   so those values cause horizontal overflow. The existing rule in
   style.css already resets them at 991px.
   NOTE: overflow must NOT be hidden here — GSAP ScrollTrigger pin
   breaks when the pinned element has an overflow:hidden ancestor.
*/
@media (max-width: 991px) {
  .memories-section {
    width:       100% !important;
    margin-left: 0    !important;
  }
}

/* ── Sponsor logos — plain images, no white-box styling ──── */
.logo-container img {
  background:    transparent !important;
  padding:       0           !important;
  border-radius: 0           !important;
  box-shadow:    none        !important;
  max-height:    80px;
  width:         auto;
  max-width:     220px;
  object-fit:    contain;
  opacity:       0.9;
}

.logo-container img:hover {
  opacity: 1 !important;
}


/* ── 10. Hero section — mobile refinements ───────────────── */
@media (max-width: 768px) {
  .hero-text-container {
    margin-top: -60px;
    padding: 1.25rem;
  }

  .hero-subtitle {
    font-size:      clamp(0.78rem, 3vw, 1.1rem);
    letter-spacing: clamp(1px, 0.8vw, 3px);
  }
}

@media (max-width: 480px) {
  .hero-text-container {
    margin-top: -36px;
    padding: 1rem;
  }
}


/* ── 11. Timer / Countdown — mobile tightening ───────────── */
@media (max-width: 480px) {
  .countdown-column {
    min-width: calc(50% - 0.75rem);
  }

  .countdown-inner {
    padding:   14px 16px;
    min-width: 68px;
  }

  .countdown-inner .value {
    font-size: 1.9rem;
  }

  .countdown-inner .label {
    font-size:      0.68rem;
    letter-spacing: 2px;
  }

  .number-wrapper {
    padding: 1.25rem 0.5rem;
  }

  .number {
    font-size: 2.2rem;
  }
}


/* ── 12. About section images — consistent aspect ratio ──── */
@media (max-width: 768px) {
  .about-imagess .tilt-card img {
    height:       auto !important;
    aspect-ratio: 4 / 3;
    max-height:   220px;
    transform:    none !important;
  }
}


/* ── 13. Teaser section — mobile centering ───────────────── */
@media (max-width: 1024px) {
  .teaser-content {
    text-align:  center;
    align-items: center;
  }

  .teaser-description {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .teaser-corner {
    display: none;
  }

  .video-container {
    border-radius: var(--r-md);
  }
}


/* ── 14. FAQ — better touch targets ──────────────────────── */
.accordion-question {
  padding-block: clamp(1rem, 3vw, 1.5rem);
}


/* ── 15. Contact section — mobile padding ────────────────── */
@media (max-width: 600px) {
  .contact-form-box {
    padding: 1.5rem;
  }

  .cp-info-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .contact-page-section {
    padding-inline: 1rem;
  }

  .cp-row {
    grid-template-columns: 1fr;
  }
}


/* ── 16. Footer — single-column on small screens ────────── */
@media (max-width: 640px) {
  .tedx-unique-main-cols {
    flex-direction: column;
    align-items:    center;
    gap:            1.75rem;
  }

  .tedx-unique-col-contact,
  .tedx-unique-col-branding,
  .tedx-unique-col-social {
    min-width: unset;
    width:     100%;
  }

  .tedx-unique-footer {
    padding-inline: 1.25rem;
  }
}


/* ── 17. Welcome popup — safety net for tiny screens ─────── */
@media (max-width: 360px) {
  .home-welcome-card {
    padding: 1rem 0.85rem !important;
  }

  .home-welcome-btn {
    font-size: 0.82rem !important;
    padding:   0.65rem 0.75rem !important;
  }

  .home-welcome-title {
    font-size: 1.7rem !important;
  }
}


/* ── 18. Gallery — gap on small screens ──────────────────── */
@media (max-width: 640px) {
  .gallery-grid {
    gap: 12px;
  }
}


/* ── 19. Speaker section heading overflow guard ───────────── */
/*
   .app-heading-title has white-space: nowrap at desktop which works
   with the decorative lines but can overflow on mid-range screens.
   The existing @media (max-width: 768px) block already resets it.
   This adds an intermediate breakpoint for 768–900px screens.
*/
@media (max-width: 900px) {
  .app-heading-title {
    white-space: normal;
    gap:         0.75rem;
  }
}


/* ── 20. Section-level padding consistency ───────────────── */
/*
   Give sections that use fixed px values a fluid range.
   Only overrides where the existing value is a rigid fixed number.
*/
.timer-section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.faq-section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

.teaser-section {
  padding-block: clamp(3rem, 8vw, 6.5rem);
}

.sponsor-section {
  padding-block: clamp(2rem, 5vw, 5rem);
}


/* ── 21. Smooth image loading — prevent layout shift ─────── */
img {
  image-rendering: auto;
}

img[loading="lazy"] {
  opacity: 1;
  transition: opacity 0.4s ease;
}

img[loading="lazy"].loaded,
img:not([loading]) {
  opacity: 1;
}