/* PHANTASM'27 — responsive layout layer
   Keeps the existing Vaagai visual system while making the site usable across
   phones, tablets and desktop displays. */

*, *::before, *::after { box-sizing: border-box; }

html, body, #root {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden !important;
}

img, svg, video, canvas {
  max-width: 100%;
}

button, a, input, textarea, select {
  max-width: 100%;
}

.navbar-container {
  width: min(1200px, calc(100% - 2rem));
}

.logo-image {
  max-width: min(100px, 18vw);
  height: auto;
  margin-left: clamp(0px, 5vw, 70px);
}

.logo-image-center {
  width: min(600px, 65vw);
  height: auto;
}

.hero-institution,
.inst-text,
.footer-top,
.footer-col,
.event-card,
.about-card,
.people-card,
.register-frame,
.success-card {
  min-width: 0;
}

.hero-institution {
  width: 100%;
}

.inst-text {
  width: 100%;
}

.phantasm-hero-college-name {
  overflow-wrap: anywhere;
  word-break: normal;
}

.btn-grp {
  flex-wrap: wrap;
  justify-content: center;
}

.footer-top {
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
}

.footer-col p,
.footer-col a,
.detail-value,
.event-card p,
.about-card p,
.people-card p {
  overflow-wrap: anywhere;
}

@media (min-width: 1200px) {
  .hero-institution {
    padding-inline: clamp(150px, 14vw, 190px) !important;
  }

  .inst-logo.left {
    left: clamp(32px, 3vw, 56px) !important;
  }

  .inst-logo.right {
    right: clamp(32px, 3vw, 56px) !important;
  }

  .inst-logo {
    width: clamp(90px, 7vw, 110px) !important;
    height: clamp(90px, 7vw, 110px) !important;
  }

  .hero-institution .inst-college,
  .phantasm-hero-college-name {
    max-width: 820px !important;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .navbar-container {
    width: calc(100% - 1.5rem);
  }

  .nav-menu {
    gap: 1.25rem;
  }

  .nav-link {
    font-size: .8rem;
  }

  .hero-institution {
    padding-inline: 125px !important;
  }

  .inst-logo.left { left: 24px !important; }
  .inst-logo.right { right: 24px !important; }

  .inst-logo {
    width: 76px !important;
    height: 76px !important;
  }

  .phantasm-hero-college-name {
    width: min(100%, 720px) !important;
    font-size: clamp(1.25rem, 2.4vw, 1.9rem) !important;
  }

  .logo-image-center {
    width: min(600px, 70vw) !important;
  }

  .footer-top {
    grid-template-columns: 1.4fr 1.4fr 1fr;
    gap: 2rem;
    padding: 2.5rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .navbar {
    height: 72px !important;
    min-height: 72px !important;
  }

  .navbar-container {
    width: calc(100% - 1rem);
    gap: .75rem;
  }

  .logo {
    min-width: 0;
  }

  .logo-image {
    width: min(78px, 20vw) !important;
    margin-left: 0 !important;
  }

  .menu-icon {
    display: block !important;
    border: 0 !important;
    background: transparent !important;
    padding: .35rem !important;
    flex: 0 0 auto;
  }

  .nav-menu {
    position: fixed !important;
    top: 72px !important;
    left: -100% !important;
    width: 100% !important;
    height: calc(100dvh - 72px) !important;
    min-height: calc(100vh - 72px) !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .75rem !important;
    padding: 2rem 1.25rem 3rem !important;
    background: rgba(11, 8, 6, .98) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 60 !important;
  }

  .nav-menu.active {
    left: 0 !important;
  }

  .nav-link {
    width: 100%;
    max-width: 360px;
    text-align: center;
    font-size: .95rem !important;
    padding: .7rem 0 !important;
  }

  .hero-institution {
    padding: 4.5rem .75rem .75rem !important;
    min-height: auto !important;
  }

  .inst-logo {
    width: 58px !important;
    height: 58px !important;
    top: 1rem !important;
    object-fit: contain !important;
  }

  .inst-logo.left { left: .75rem !important; }
  .inst-logo.right { right: .75rem !important; }

  .inst-text {
    width: 100% !important;
    padding-inline: 3.75rem !important;
  }

  .phantasm-hero-college-name {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(1.05rem, 5.6vw, 1.7rem) !important;
    line-height: 1.25 !important;
    letter-spacing: .01em !important;
  }

  .logo-image-center {
    width: min(92vw, 470px) !important;
    max-width: 100% !important;
  }

  .hero-title,
  .hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 11vw, 4rem) !important;
    line-height: 1.05 !important;
  }

  .hero-sub,
  .hero p {
    max-width: 100%;
    font-size: .8rem !important;
    line-height: 1.6 !important;
    overflow-wrap: anywhere;
  }

  .section-head {
    padding-inline: .75rem !important;
  }

  .section-head h2 {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
    line-height: 1.15;
  }

  .btn-grp {
    width: 100%;
    gap: .75rem;
  }

  .btn-grp > * {
    min-width: min(180px, 100%);
  }

  .tab-btn,
  .day-tab {
    min-height: 44px;
    padding-inline: .9rem;
  }

  .event-card,
  .about-card,
  .people-card,
  .register-frame {
    width: 100% !important;
    min-width: 0 !important;
  }

  .event-card p,
  .about-card p,
  .people-card p {
    overflow-wrap: anywhere;
  }

  .footer-top {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    padding: 2.5rem 1.1rem !important;
    text-align: center !important;
  }

  .footer-col {
    width: 100%;
  }

  .footer-title:after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .footer-col p {
    max-width: 38rem;
    margin-inline: auto;
    font-size: .86rem !important;
  }

  .footer-col ul li a {
    font-size: .86rem !important;
    letter-spacing: .08em !important;
  }

  .footer .footer-socials {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: .65rem !important;
  }

  .footer .footer-socials a {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    background-size: 192px 48px !important;
  }

  .footer .footer-socials a:nth-child(1) { background-position: 0 0 !important; }
  .footer .footer-socials a:nth-child(2) { background-position: -48px 0 !important; }
  .footer .footer-socials a:nth-child(3) { background-position: -96px 0 !important; }
  .footer .footer-socials a:nth-child(4) { background-position: -144px 0 !important; }

  .footer-bottom {
    padding: .85rem .75rem !important;
    font-size: .68rem !important;
    letter-spacing: .12em !important;
    overflow-wrap: anywhere;
  }

  .rules-modal {
    width: calc(100vw - 1rem) !important;
    max-width: 520px !important;
    max-height: 88dvh !important;
    border-radius: 12px !important;
  }

  .rules-header,
  .rules-content,
  .rules-footer {
    padding-inline: 1.1rem !important;
  }

  .rules-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .success-wrapper {
    min-height: 100dvh !important;
    padding: 5rem .75rem 2rem !important;
  }

  .success-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 2rem 1rem !important;
    border-radius: 14px !important;
  }

  .success-title {
    font-size: clamp(1.5rem, 8vw, 2.3rem) !important;
    line-height: 1.15 !important;
    letter-spacing: .08em !important;
  }

  .detail-row {
    gap: .5rem !important;
  }

  .detail-label,
  .detail-value {
    max-width: 100% !important;
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .navbar-container {
    width: calc(100% - .75rem);
  }

  .logo-image {
    width: 70px !important;
  }

  .menu-icon {
    font-size: 1.75rem !important;
  }

  .hero-institution {
    padding-top: 4rem !important;
  }

  .inst-logo {
    width: 48px !important;
    height: 48px !important;
  }

  .inst-text {
    padding-inline: 2.85rem !important;
  }

  .phantasm-hero-college-name {
    font-size: clamp(.95rem, 5.8vw, 1.45rem) !important;
  }

  .logo-image-center {
    width: 94vw !important;
  }

  .btn-grp {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .btn-grp > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .tab-btn,
  .day-tab {
    min-height: 44px !important;
  }

  .footer-top {
    padding: 2.25rem .85rem !important;
  }

  .footer .footer-socials a {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
    background-size: 176px 44px !important;
  }

  .footer .footer-socials a:nth-child(1) { background-position: 0 0 !important; }
  .footer .footer-socials a:nth-child(2) { background-position: -44px 0 !important; }
  .footer .footer-socials a:nth-child(3) { background-position: -88px 0 !important; }
  .footer .footer-socials a:nth-child(4) { background-position: -132px 0 !important; }
}

@media (orientation: landscape) and (max-width: 768px) {
  .nav-menu {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }

  .hero-institution {
    padding-top: 3.5rem !important;
  }
}

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