/* Shared tablet and phone safeguards. Desktop styles remain untouched. */

/* Laptop/desktop CTA: reserve a real column for the seal and allow the copy
   to wrap naturally instead of colliding with it. */
@media (min-width: 1181px) {
  .cta .cta-grid {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 220px) !important;
    gap: clamp(28px, 3vw, 48px) !important;
  }

  .cta .cta-copy {
    min-width: 0;
  }

  .cta .cta-title,
  .cta h2 {
    max-width: none !important;
    font-size: clamp(1.95rem, 2.35vw, 2.35rem) !important;
    line-height: 1.16 !important;
  }

  .cta .cta-title span {
    display: block !important;
    white-space: nowrap !important;
  }

  .cta .cta-intro br {
    display: none;
  }

  .cta .cta-intro,
  .cta .cta-grid > div > p:not(.cta-date) {
    max-width: 900px !important;
  }

  .cta .cta-badge-wrapper {
    align-self: start;
    justify-self: center;
    padding-top: 28px;
  }

  .cta .cta-badge {
    width: min(100%, 200px) !important;
    margin: 0 auto !important;
  }
}

/* iPad landscape and portrait share this range (768px-1180px).  The source
   styles previously kept the full desktop navigation and multi-column content
   at 1024px, which caused wrapping and horizontal overflow. */
@media (max-width: 1180px) {
  :root {
    --gutter: 28px;
  }

  .main-nav {
    min-height: 54px !important;
    padding: 0 18px !important;
    justify-content: flex-end !important;
  }

  .main-nav .nav-toggle-btn {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    margin: 5px 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .32) !important;
    border-radius: 4px !important;
  }

  .main-nav .nav-toggle-btn span {
    display: block !important;
    width: 23px !important;
    height: 2px !important;
    margin: 0 !important;
    background: #fff !important;
    transition: transform 160ms ease, opacity 160ms ease !important;
  }

  .main-nav .nav-toggle:checked + .nav-toggle-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  .main-nav .nav-toggle:checked + .nav-toggle-btn span:nth-child(2) {
    opacity: 0 !important;
  }

  .main-nav .nav-toggle:checked + .nav-toggle-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .main-nav .nav-list {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1001 !important;
    display: none !important;
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 54px) !important;
    margin: 0 !important;
    padding: 8px 18px 14px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #000 !important;
    border-top: 1px solid #262626 !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .28) !important;
  }

  .main-nav .nav-toggle:checked ~ .nav-list {
    display: flex !important;
  }

  .main-nav .nav-list li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #222 !important;
    text-align: center !important;
  }

  .main-nav .nav-list li:last-child {
    border-bottom: 0 !important;
  }

  .main-nav .nav-list li::after {
    display: none !important;
  }

  .main-nav .nav-list a {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    font-size: 1rem !important;
  }

  .hero-info__grid,
  .about-grid,
  .section-head,
  .ceremony-grid,
  .recognition-grid,
  .city-grid,
  .cta-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .about-grid,
  .ceremony-grid,
  .recognition-grid,
  .city-grid {
    gap: 36px !important;
  }

  .category-grid,
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .partners {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .section-head p {
    padding-top: 0 !important;
  }

  .hero-actions {
    justify-content: flex-start !important;
  }

  .cta-badge {
    justify-self: start !important;
  }

  /* The desktop CTA forces each title line to stay on one line. On an iPad
     that makes the heading wider than the viewport and clips its right side. */
  .cta .cta-copy,
  .cta .cta-title,
  .cta .cta-title span {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .cta .cta-title span {
    display: inline !important;
    white-space: normal !important;
  }

  .cta .cta-title,
  .cta h2 {
    font-size: clamp(1.9rem, 4.2vw, 2.35rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: break-word !important;
  }

  .cta .cta-date {
    font-size: 1.15rem !important;
  }

  .cta .cta-grid > div > p:not(.cta-date) {
    max-width: 100% !important;
    font-size: 1.08rem !important;
    line-height: 1.5 !important;
  }

  .cta .cta-grid > div > p.cta-tagline,
  .cta .cta-grid > div > p.cta-tagline strong {
    max-width: 100% !important;
    font-size: clamp(1.9rem, 4.2vw, 2.35rem) !important;
    line-height: 1.16 !important;
    overflow-wrap: break-word !important;
  }

  .cta-intro br {
    display: none;
  }

  .ceremony-grid,
  .recognition-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ceremony h2,
  .recognition h2,
  #host-city .section-head h2,
  #awards-legacy .section-head h2 {
    max-width: 100% !important;
    font-size: clamp(1.8rem, 3.8vw, 2.15rem) !important;
    overflow-wrap: break-word !important;
  }

  .recognition p,
  .ceremony p {
    max-width: 100% !important;
  }

  .recognition__trophy {
    width: min(100%, 320px) !important;
    justify-self: center !important;
  }

  .city-grid figure img {
    height: auto !important;
    max-height: 560px;
    object-fit: cover !important;
  }

  /* Keep image captions aligned with the content edge on tablets and phones. */
  .caption-line {
    text-align: start !important;
  }

  .profile .container,
  .welcome .container,
  #content > .container {
    width: calc(100% - 48px) !important;
    max-width: 960px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  #award_nomination_panel .row,
  #award_nomination_panel [class*="col-"] {
    min-width: 0;
  }
}

@media (max-width: 1024px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

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

  iframe,
  video {
    width: 100%;
  }

  .site-banner,
  .masthead {
    width: 100%;
    overflow: hidden;
  }

  .site-banner img,
  .masthead img {
    width: 100%;
    height: auto;
  }

  main,
  section,
  .profile,
  .welcome,
  #content {
    max-width: 100%;
  }

  .container,
  .container-fluid,
  .shell {
    min-width: 0;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  a,
  label,
  strong,
  span {
    overflow-wrap: anywhere;
  }

  table {
    max-width: 100%;
  }

  .table-responsive,
  .responsive-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

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

  .select2-container {
    max-width: 100% !important;
  }

  .carousel,
  .carousel-inner,
  .carousel-item,
  .carousel-item img {
    max-width: 100%;
  }

  .global-award [style*="height: 768px"] {
    height: auto !important;
    min-height: 440px;
    padding: 60px 40px 90px !important;
  }

  .shell {
    width: calc(100vw - 48px);
  }

  .image-row,
  .category-grid {
    gap: 22px;
  }

  .site-footer .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px 28px !important;
  }

  .site-footer .footer-col {
    min-width: 0;
  }

  .site-footer .subscribe-form {
    width: min(620px, 100%) !important;
  }
}

@media (max-width: 900px) {
  .main-nav {
    width: 100%;
  }

  .nav-list {
    width: 100%;
  }

  .nav-list a {
    white-space: normal;
    text-align: center;
  }

  .ticker-inner,
  .ticker .shell {
    padding-right: 20px;
    padding-left: 20px;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer .footer-institute__intro {
    padding-right: 18px !important;
    padding-left: 18px !important;
    font-size: 1.05rem !important;
  }
}

@media (max-width: 768px) {
  .container,
  .container-fluid {
    width: 100%;
    padding-right: 18px;
    padding-left: 18px;
  }

  .profile,
  .welcome {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .profile > .container[style],
  .profile .container[style] {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .profile h2,
  .welcome h2,
  #content h2 {
    font-size: clamp(1.55rem, 6vw, 2rem) !important;
    line-height: 1.2;
  }

  .profile p,
  .profile li,
  .welcome p,
  .welcome li,
  #content p,
  #content li {
    text-align: left !important;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-right: 18px;
    padding-left: 18px;
  }

  .stat,
  .stat-card {
    min-width: 0;
  }

  .section-head,
  .awards-catalogue,
  .award-detail,
  .institute-note {
    max-width: 100%;
  }

  .awards-catalogue li,
  .award-detail h1,
  .award-detail h2 {
    overflow-wrap: anywhere;
  }

  .section-intro__break {
    display: none;
  }

  .gallery-box,
  .gallery-box img {
    width: 100%;
    height: auto;
  }

  #award_nomination_panel .row,
  #award_nomination_panel [class*="col-"] {
    min-width: 0;
    max-width: 100%;
  }

  #award_nomination_panel input,
  #award_nomination_panel select,
  #award_nomination_panel textarea,
  #award_nomination_panel .select2-container {
    width: 100% !important;
  }

  .global-award [style*="height: 768px"] {
    min-height: 340px;
    padding: 36px 20px 60px !important;
    background-position: center bottom !important;
  }

  .cta .cta-title,
  .cta h2,
  .cta .cta-grid > div > p.cta-tagline,
  .cta .cta-grid > div > p.cta-tagline strong {
    font-size: 1.7rem !important;
  }

  .cta .cta-grid > div > p:not(.cta-date) {
    font-size: 1rem !important;
  }
}

@media (max-width: 576px) {
  .container,
  .container-fluid {
    padding-right: 14px;
    padding-left: 14px;
  }

  /* Award cards: one readable card per row on phones. Tablets retain the
     balanced two-column layout defined above. */
  .category-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
    margin-top: 24px !important;
    margin-bottom: 36px !important;
  }

  .category-card {
    width: 100%;
    min-width: 0;
  }

  .category-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  .category-card h3,
  #award-categories .category-card h3 {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 14px 4px 16px !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .caption-line {
    margin: 18px 0 28px !important;
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
  }

  /* Compact display typography prevents isolated words and overly tall
     headings in the procedure, ceremony, host-city and legacy sections. */
  .section-head h2,
  #award-categories .section-head h2,
  #nomination-procedure .section-head h2,
  #host-city .section-head h2,
  #awards-legacy .section-head h2,
  .ecosystem .section-head h2,
  .ceremony h2,
  .recognition h2 {
    max-width: 100% !important;
    font-size: 1.45rem !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .section-head,
  .nomination-page .section-head.section-head--primary {
    margin-bottom: 24px !important;
    padding-top: 22px !important;
    padding-bottom: 12px !important;
  }

  .section-head .eyebrow,
  .ceremony .eyebrow,
  .recognition .eyebrow,
  #host-city .eyebrow,
  #awards-legacy .eyebrow {
    margin-bottom: 8px !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
  }

  .ceremony,
  .recognition,
  #host-city,
  #awards-legacy {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .ceremony p,
  .recognition p,
  .section-head p,
  .city-cards p {
    font-size: .95rem !important;
    line-height: 1.5 !important;
  }

  .site-footer .footer-institute__intro,
  .site-footer .footer-bottom p {
    max-width: 100% !important;
    padding-right: 4px !important;
    padding-left: 4px !important;
    font-size: .95rem !important;
    line-height: 1.5 !important;
  }

  .site-footer .footer-institute__lockup {
    width: min(100%, 430px) !important;
  }

  .site-footer .subscribe-form > strong,
  .site-footer .footer-subscribe .subscribe-form > strong {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: clamp(.78rem, 3.7vw, .95rem) !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
  }

  .site-footer .footer-subscribe,
  .site-footer .subscribe-row {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .site-footer .input-wrapper {
    gap: 10px !important;
  }

  .ticker-inner,
  .ticker .shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ticker p,
  .ticker .shell {
    font-size: 0.95rem;
    line-height: 1.45;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .stat,
  .stat-card {
    border-right: 0 !important;
  }

  .section-head,
  .nomination-page .section-head.section-head--primary {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .awards-catalogue,
  .award-detail {
    width: calc(100% - 28px);
  }

  .award-detail h1 {
    font-size: 25px;
  }

  .award-detail__back {
    font-size: 21px;
    line-height: 28px;
  }

  .footer-subscribe .input-wrapper {
    width: 100%;
  }

  .footer-subscribe .input-wrapper i {
    display: none !important;
  }

  .footer-subscribe input,
  .footer-subscribe button {
    width: 100% !important;
  }

  .footer-subscribe .social-icons {
    width: 100%;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .footer-subscribe .social-icons span {
    width: 100%;
    padding-right: 0 !important;
    text-align: center;
  }

  .contact-form .row > [class*="col-"],
  #award_nomination_panel .row > [class*="col-"] {
    width: 100%;
  }

  .global-award [style*="height: 768px"] {
    min-height: 280px;
    padding: 28px 14px 44px !important;
  }
}