/* ==================================================================
   04｜響應式斷點 Responsive Breakpoints

   1060px：平板／小型筆電
   780px ：手機與直式平板
   480px ：小尺寸手機
================================================================== */


/* ================================================================
   BREAKPOINT 01｜1060px 以下
================================================================ */

@media (max-width: 1060px) {

  /* ---------- Header ---------- */

  .desktop-nav,
  .nav-cta {
    display: none;
  }

  .mobile-nav {
    display: block;
  }


  /* ---------- Hero ---------- */

  .hero {
    grid-template-columns: 1fr 0.72fr;
    padding-left: 46px;
    padding-right: 46px;
  }

  .hero-art {
    height: auto;
    max-height: 600px;
  }


  /* ---------- Quick Facts ---------- */

  .quick-facts > div {
    min-width: 95px;
    padding-inline: 12px;
  }


  /* ---------- Awards ---------- */

  .award-layout {
    grid-template-columns: 1fr;
  }

  .gift-card {
    transform: none;
  }

  /*
     兩個獎勵圓形區塊
     螢幕縮小時自動排列
  */

  .prize-badges {
    justify-content: flex-start;
    gap: 18px;
  }


  /* ---------- Registration Steps ---------- */

  .registration-steps {
    grid-template-columns: repeat(3, 1fr);
  }

}


/* ================================================================
   BREAKPOINT 02｜780px 以下
================================================================ */

@media (max-width: 780px) {

  /* ---------- General ---------- */

  html {
    scroll-padding-top: 66px;
  }


  /* ---------- Header ---------- */

  .site-header {
    height: 66px;
    padding-inline: 18px;
  }

  .brand {
    font-size: 18px;
  }


  /* ---------- Hero ---------- */

  .hero {
    min-height: auto;
    padding: 54px 20px 70px;
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-copy {
    text-align: center;
  }

.hero h1 {
  font-size: clamp(62px, 9vw, 132px);
}

  .hero h1 span {
    box-shadow: 5px 5px 0 white;
  }


  /* ---------- Hero Event Title ---------- */

  .hero-event-title {
    font-size: clamp(22px, 6vw, 34px);
    line-height: 1.2;
  }


  /* ---------- Hero Buttons ---------- */

  .hero-actions,
  .quick-facts {
    justify-content: center;
  }


  /* ---------- Hero Image ---------- */

  .hero-art {
    justify-self: center;
    width: min(100%, 430px);
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    transform: none;
    box-shadow: none;
    overflow: visible;
  }

  .hero-art img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }


  /* ---------- Main Sections ---------- */

  .intro-grid,
  .group-cards,
  .award-hero,
  .registration-card,
  .downloads-section {
    grid-template-columns: 1fr;
  }

  .intro-grid {
    gap: 38px;
  }


  /* ---------- Group Cards ---------- */

  .group-card {
    min-height: 0;
  }


  /* ---------- Qualification Table ---------- */

  .q-head {
    display: none;
  }

  .q-row {
    grid-template-columns: 1fr;
    padding: 22px 0;
  }

  .q-row > div {
    padding: 8px 0;
    border-right: 0;
  }

  .q-row > div:first-child {
    font-size: 19px;
  }

  .q-row [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--red);
    font-size: 11px;
    font-weight: 900;
  }


  /* ---------- Notice ---------- */

  .notice-grid {
    padding: 28px;
    grid-template-columns: 1fr;
    gap: 24px;
  }


  /* ---------- Timeline ---------- */

  .timeline {
    grid-template-columns: 1fr;
  }

  .timeline article {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  .timeline article:last-child {
    border-bottom: 0;
  }


  /* ---------- Awards ---------- */

  .award-hero {
    align-items: start;
  }

  .prize-badge {
    width: 190px;
    height: 190px;
    justify-self: end;
  }

  .prize-badge strong {
    font-size: 68px;
  }


  /* ---------- Two Prize Badges ---------- */

  .prize-badges {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .prize-badges .prize-badge {
    width: 160px;
    height: 160px;
  }


  /* ---------- Registration ---------- */

  .registration-actions {
    min-width: 0;
    justify-items: start;
  }

  .registration-tip {
    grid-template-columns: 1fr;
  }


  /* ---------- Registration Steps ---------- */

  .registration-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 18px;
  }

  .registration-step::after {
    display: none;
  }


  /* ---------- Download Card ---------- */

  .download-card {
    grid-template-columns: auto 1fr;
  }

  .download-status {
    grid-column: 1 / -1;
    justify-self: start;
  }


  /* ---------- Social Buttons ---------- */

  .social-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .social-buttons a {
    width: 100%;
    justify-content: center;
  }


  /* ---------- Mobile Apply Button ---------- */

  .mobile-apply {
    position: fixed;
    z-index: 45;
    left: 18px;
    right: 18px;
    bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 15px;

    color: white;
    background: var(--ink);

    border: 2px solid white;
    border-radius: 999px;

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);

    font-weight: 900;
  }


  /* ---------- Footer ---------- */

  footer {
    text-align: center;
  }

  footer img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

}


/* ================================================================
   BREAKPOINT 03｜480px 以下
================================================================ */

@media (max-width: 480px) {

  /* ---------- Section ---------- */

  .section {
    padding-left: 19px;
    padding-right: 19px;
  }


  /* ---------- Eyebrow ---------- */

  .eyebrow {
    font-size: 10px;
    letter-spacing: 0.12em;
  }


  /* ---------- Hero ---------- */

  .hero-intro br {
    display: none;
  }


  /* ---------- Quick Facts ---------- */

  .quick-facts {
    width: 100%;
    gap: 0;
  }

  .quick-facts > div {
    flex: 1;
    min-width: 0;
    padding: 10px 7px;
  }

  .quick-facts b {
    font-size: 21px;
  }

  .quick-facts span {
    font-size: 9px;
  }


  /* ---------- Announcement ---------- */

  .announcement {
    align-items: flex-start;
  }


  /* ---------- Awards ---------- */

  .award-row {
    align-items: flex-end;
  }

  .award-row > div {
    display: grid;
    gap: 3px;
  }

  .award-row p {
    font-size: 29px;
  }

  .gift-card {
    padding: 30px 24px;
  }

  .gift-card h3 {
    font-size: 36px;
  }


  /* ---------- Prize Badges ---------- */

  .prize-badges {
    gap: 12px;
  }

  .prize-badges .prize-badge {
    width: 135px;
    height: 135px;
  }

  .prize-badges .prize-badge strong {
    font-size: 42px;
  }

  .prize-badges .prize-badge span {
    font-size: 11px;
  }


  /* ---------- Registration Steps ---------- */

  .registration-steps {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .registration-step {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: center;
    column-gap: 16px;
  }

  .registration-step .step-circle {
    width: 70px;
    height: 70px;
  }


  /* ---------- Contact ---------- */

  .contact-card {
    padding: 28px 22px;
  }

  .contact-card dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }


  /* ---------- Width Fix ---------- */

  .registration-card,
  .group-card,
  .gift-card,
  .contact-card {
    min-width: 0;
  }


  /* ---------- Buttons ---------- */

  .button,
  .inline-action,
  .mobile-apply {
    max-width: 100%;
    text-align: center;
  }


  /* ---------- Hero Event Title ---------- */

  .hero-event-title {
    font-size: 22px;
  }


  /* ---------- Footer ---------- */

  footer {
    padding-bottom: 100px;
  }

}


/* ================================================================
   ACCESSIBILITY｜Reduced Motion
================================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}



/* ================================================================
   Judges Mobile Fix
================================================================ */

@media (max-width:780px){

    /* 評審區左右留白縮小 */
    .judges-section{
        padding:60px 14px;
    }

    /* 三個區塊一致 */
    .judge-stage{
        padding:28px 14px 24px;
    }

    /* 標題 */
    .stage-heading{
        margin-bottom:26px;
    }

    .stage-heading::after{
        display:none;
    }

    /* 三個區塊都改成一欄 */
    .stage-preliminary .judge-grid,
    .stage-semifinal .judge-grid,
    .stage-final .judge-grid{

        display:flex !important;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:36px;
    }

    /* 清掉桌機 Grid 定位 */
    .stage-final .judge-card:nth-child(4),
    .stage-final .judge-card:nth-child(5){
        transform:none;
        grid-column:auto;
    }

.judge-card{
    width:100%;
    max-width:360px;
    margin:0 auto;
}

.judge-photo-frame{
    width:100%;
    height:auto;
    aspect-ratio:400 / 555;
}

    .judge-photo{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .judge-name{
        font-size:30px;
        margin-top:18px;
    }
	/* Judges Header 手機版 */

.judges-header{
    display:block;
}

.judges-left{
    margin-bottom:28px;
}

.judges-right{
    width:100%;
    max-width:none;
    margin:0;
    padding-top:0;
}

.judges-line{
    width:100%;
    margin-bottom:18px;
}

.judges-intro{
    display:block;
    width:100%;
    max-width:none;

    font-size:16px;
    line-height:1.9;

    word-break:break-word;
}

.award-groups{

    grid-template-columns:1fr;

}

}

@media (max-width:768px){

    .footer-organizers{

        flex-direction:column;

        gap:24px;

    }

    .footer-org-logo{

        height:52px;

    }
	
	/* ==========================================================
   手機版｜評審陣容標題
========================================================== */

.judges-subtitle{

    font-size:28px;

    line-height:1.1;

}

.judges-title{

    font-size:42px;

    line-height:1;

    margin-top:6px;

}

}