/* Mobile responsive styles. Load after style.css. */

@media (max-width: 1199px) {
  .masthead__inner {
    padding: 0 24px;
  }

  .brand-logo {
    left: 24px;
  }

  .brand-proof {
    left: 330px;
  }

  .hotline {
    right: 24px;
  }

  .hero {
    height: auto;
  }

  .hero img {
    width: 100%;
    height: auto;
  }

  .course-area {
    min-height: 0;
    padding-inline: 24px;
  }

  .service-panel {
    width: calc(100% - 32px);
    height: auto;
    margin-top: -6.2vw;
  }

  .service-panel img {
    width: 100%;
    height: auto;
  }

  .course-grid {
    grid-template-columns: repeat(2, 220px);
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .brand-logo {
    top: 34px;
    width: 230px;
    height: auto;
  }

  .brand-proof {
    top: 28px;
    left: 275px;
    width: 260px;
    height: auto;
  }

  .hotline__content strong {
    font-size: 22px;
  }
}

@media (max-width: 820px) {
  .brand-proof {
    display: none;
  }
}

@media (max-width: 767px) {
  .masthead,
  .masthead__inner {
    height: 80px;
  }

  .masthead__inner {
    padding: 0 16px;
  }

  .brand-logo {
    top: 16px;
    left: 16px;
    width: 174px;
  }

  .brand-proof {
    display: none;
  }

  .hotline {
    display: none;
  }

  .hotline__icon {
    width: 34px;
    height: 34px;
  }

  .hotline__content span {
    font-size: 11px;
  }

  .hotline__content strong {
    font-size: 15px;
    letter-spacing: 0;
  }

  .primary-nav {
    height: 0;
    min-height: 0;
    background: transparent;
  }

  .primary-nav__mobile {
    position: absolute;
    top: -58px;
    right: 16px;
    display: block;
    min-height: 0;
    padding: 0;
  }

  .primary-nav__home {
    display: none;
  }

  .menu-toggle {
    min-width: 64px;
    min-height: 36px;
    color: #732018;
    background: #f1cd8e;
    border: 1px solid #e4b66c;
    border-radius: 5px;
    cursor: pointer;
  }

  .primary-nav__list {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    display: none;
    grid-template-columns: 1fr;
    width: 100%;
    height: auto;
    background: var(--nav-red);
  }

  .primary-nav__list.is-open {
    display: grid;
  }

  .primary-nav__list li,
  .primary-nav__list a {
    height: 46px;
  }

  .primary-nav__list a {
    border-top: 1px solid rgb(255 255 255 / 10%);
  }

  .hero {
    height: 230px;
  }

  .hero img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    object-position: center;
  }

  .course-area {
    padding: 0 16px 48px;
    border-radius: 0;
  }

  .service-panel {
    display: block;
    width: 100%;
    height: auto;
    margin: -24px auto 0;
  }

  .section-title {
    width: min(300px, 88vw);
    height: auto;
    margin-top: 38px;
  }

  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 28px;
  }

  .course-card {
    width: 100%;
    height: auto;
  }

  .course-card > img,
  .course-card h2,
  .course-card__body {
    width: calc(100% - 8px);
  }

  .course-card > img {
    height: auto;
    aspect-ratio: 212 / 145;
  }

  .course-card h2 {
    min-height: 46px;
    height: auto;
    padding: 5px;
    font-size: 12px;
  }

  .course-card__body {
    min-height: 154px;
    height: auto;
    padding: 10px 7px 12px;
  }

  .course-card li {
    padding-left: 11px;
    font-size: 11px;
    line-height: 1.6;
  }

  .course-card li::before {
    font-size: 16px;
  }

  .course-card__detail {
    font-size: 11px;
  }

  .section-more {
    font-size: 13px;
  }

  .section-more {
    margin-top: 28px;
  }
}

@media (max-width: 380px) {
  .brand-logo {
    width: 158px;
  }

  .hotline__icon {
    display: none;
  }
}

@media (max-width: 1199px) {
  .faculty-grid {
    grid-template-columns: repeat(2, 256px);
  }
}

@media (max-width: 767px) {
  .advantages-section__desktop,
  .principal-section__desktop {
    display: none;
  }

  .advantages-section__mobile,
  .principal-section__mobile {
    display: block;
  }

  .advantages-section__mobile {
    padding: 0;
    background: #9d0000;
  }

  .advantages-section__mobile-image {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .mobile-section-heading {
    width: min(320px, 100%);
    height: auto;
    margin: 0 auto 22px;
  }

  .advantages-mobile-grid,
  .principal-mobile-grid {
    display: grid;
    grid-template-columns: minmax(0, 330px);
    gap: 16px;
    justify-content: center;
  }

  .advantages-mobile-grid img,
  .principal-mobile-grid img {
    width: 100%;
    height: auto;
  }

  .principal-section {
    margin-top: 8px;
  }

  .principal-section__mobile {
    padding: 30px 16px 38px;
    background: #fdf8ee;
  }

  .principal-mobile-grid {
    grid-template-columns: minmax(0, 300px);
  }

  .principal-mobile-grid__awards {
    max-width: 265px;
    justify-self: center;
  }

  .faculty-section {
    min-height: 0;
    padding: 0 16px 42px;
    background-size: 100% 100%;
  }

  .faculty-section__title {
    width: min(300px, 88vw);
    height: auto;
    margin-top: 34px;
  }

  .faculty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }

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

  .faculty-card-link {
  display: block;
  color: inherit;
  border-radius: 12px;
  text-decoration: none;
}

.faculty-card-link:hover .faculty-card,
.faculty-card-link:focus-visible .faculty-card {
  border-color: #c98b60;
  box-shadow: 0 8px 22px rgb(128 46 23 / 12%);
}

.faculty-card > img {
    width: calc(100% - 8px);
    height: auto;
    aspect-ratio: 8 / 5;
    margin-top: 4px;
    border-radius: 8px;
  }

  .faculty-card__body {
    padding: 9px 8px 13px;
  }

  .faculty-card__heading {
    gap: 5px;
  }

  .faculty-card h3 {
    font-size: 16px;
  }

  .faculty-card__heading span {
    padding: 2px 6px;
    font-size: 9px;
  }

  .faculty-card ul {
    margin-top: 8px;
  }

  .faculty-card li {
    padding-left: 9px;
    font-size: 10px;
    line-height: 1.55;
  }
}

@media (max-width: 1199px) {
  .environment-grid,
  .news-grid {
    grid-template-columns: repeat(2, 270px);
  }
}

@media (max-width: 767px) {
  .environment-section,
  .news-section {
    min-height: 0;
    padding: 0 16px 42px;
  }

  .content-section-title {
    width: min(220px, 70vw);
    margin-top: 30px;
  }

  .environment-grid,
  .news-grid {
    grid-template-columns: minmax(0, 280px);
    gap: 16px;
    justify-content: center;
    margin-top: 22px;
  }

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

  .environment-card,
  .news-card {
    width: 100%;
    min-height: 0;
  }

  .environment-card img,
  .news-card > img {
    height: auto;
    aspect-ratio: 27 / 16;
  }

  .environment-card h3 {
    margin: 10px 9px 12px;
    font-size: 14px;
  }

  .news-card__body {
    padding: 8px 8px 11px;
  }

  .news-card time,
  .news-card button {
    font-size: 9px;
  }

  .news-card h3 {
    min-height: 49px;
    margin: 5px 0 7px;
    font-size: 13px;
    line-height: 1.45;
  }
}

@media (max-width: 767px) {
  .site-footer {
    min-height: 0;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: 0;
    padding: 30px 24px 24px;
  }

  .footer-brand {
    padding: 0 0 22px;
    border-right: 0;
    border-bottom: 1px solid rgb(232 192 139 / 30%);
  }

  .footer-brand > img {
    width: min(280px, 100%);
    height: auto;
  }

  .footer-brand p,
  .footer-contact__item {
    font-size: 13px;
  }

  .footer-contact__phone strong {
    font-size: 21px;
  }

  .footer-qr {
    justify-content: flex-start;
  }

  .site-footer__copyright {
    padding: 0 20px 24px;
    font-size: 10px;
  }
}

@media(max-width:900px){
.about-hero{height:auto}.about-hero img{height:auto;aspect-ratio:3/1}
.about-content{padding:24px 22px 52px}.about-intro{grid-template-columns:1fr}.about-intro__copy{order:2}
.about-stats{grid-template-columns:repeat(2,1fr);gap:24px}.about-stats div:nth-child(2){border-right:0}
.about-advantages,.about-principal-grid{grid-template-columns:repeat(2,1fr)}
.about-principal-grid{padding:0}
.about-environment{grid-template-columns:repeat(2,1fr)}
.about-environment figure,.about-environment figure:nth-child(n){grid-column:auto}
.about-honors>img{height:auto}.about-consultation{height:auto}.about-consultation img{height:auto;aspect-ratio:3/1}
}

@media(max-width:560px){
.about-content{padding-inline:14px}.about-intro{padding:18px}
.about-intro__visual>img{height:auto;aspect-ratio:16/10}.about-intro__visual>div{grid-template-columns:1fr;gap:12px}.about-intro__visual span{border:0}
.about-stats{grid-template-columns:1fr}.about-stats div{padding:14px 0;border-right:0;border-bottom:1px solid rgb(255 221 159 / 34%)}
.about-advantages,.about-principal-grid,.about-environment{grid-template-columns:1fr}
.about-principals .about-section__heading{background-size:100% auto}
}

@media(max-width:900px){.academic-hero{height:auto}.academic-hero img{height:auto;aspect-ratio:3/1}.academic-content{padding:22px 20px 56px}.student-grid,.result-grid{grid-template-columns:repeat(2,1fr)}.college-list{grid-template-columns:repeat(4,1fr)}.college-list span:nth-child(4n){border-right:0}}

@media(max-width:560px){.academic-content{padding-inline:14px}.academic-section{padding-top:50px}.student-grid,.result-grid{grid-template-columns:1fr}.college-list{grid-template-columns:repeat(2,1fr)}.college-list span:nth-child(2n){border-right:0}}

@media (max-width: 960px) {
  .contact-hero { height: auto; }
  .contact-hero img { height: auto; aspect-ratio: 3 / 1; }
  .contact-content { padding: 46px 28px 64px; }
  .contact-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-route-grid { grid-template-columns: 1fr; }
  .contact-route-card { display: grid; grid-template-columns: minmax(0, 1fr) 42%; column-gap: 22px; min-height: 0; }
  .contact-route-card h3,
  .contact-route-card p { grid-column: 1; }
  .contact-route-card img { grid-column: 2; grid-row: 1 / 3; height: 180px; }
}

@media (max-width: 640px) {
  .contact-hero img { min-height: 190px; object-position: center; }
  .contact-content { padding: 34px 14px 48px; }
  .contact-section + .contact-section { margin-top: 48px; }
  .contact-section__heading h1,
  .contact-section__heading h2 { font-size: 28px; }
  .contact-info-grid { grid-template-columns: 1fr; gap: 14px; }
  .contact-info-card { min-height: 195px; }
  .contact-map { height: 280px; }
  .contact-map > span { min-width: 190px; }
  .contact-route-card { display: flex; }
  .contact-route-card p { min-height: 0; }
  .contact-route-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}

@media(max-width:900px){.curriculum-hero{height:auto}.curriculum-hero img{height:auto;aspect-ratio:3/1}.curriculum-content{padding-inline:20px}.curriculum-course-grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:560px){.curriculum-content{padding:26px 14px 58px}.curriculum-course-grid{grid-template-columns:1fr}.curriculum-course-card ul{min-height:0}.curriculum-image-section{padding-top:52px}}

@media(max-width:900px){.faculty-hero{height:auto}.faculty-hero img{height:auto;aspect-ratio:1024/379}.faculty-teachers{padding:42px 28px 0}.faculty-core-grid,.faculty-showcase-grid{grid-template-columns:repeat(2,1fr);gap:20px}}

@media(max-width:560px){.faculty-teachers{padding-inline:14px}.faculty-core-grid,.faculty-showcase-grid{grid-template-columns:1fr}.faculty-heading h2::before,.faculty-heading h2::after{margin-inline:8px}.faculty-content{padding-bottom:54px}}

@media(max-width:1199px){.news-board{padding-inline:34px}.news-filters{width:calc(100% - 320px)}.news-layout{grid-template-columns:minmax(0,1fr) 290px}}

@media(max-width:900px){.news-hero{height:auto}.news-hero img{height:auto;aspect-ratio:3/1}.news-board{min-height:0;padding:38px 24px 60px}.news-filters{grid-template-columns:repeat(3,1fr);width:100%}.news-layout{grid-template-columns:1fr}.news-sidebar{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px;margin-top:0}.hot-news{margin-top:0}}

@media(max-width:640px){.news-hero img{min-height:190px;object-position:center}.news-board{padding:28px 14px 44px}.news-filters{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.news-list-card{grid-template-columns:1fr;gap:14px;padding:12px}.news-list-card>img{width:100%;height:auto;aspect-ratio:16/9}.news-list-card h2{font-size:16px}.news-sidebar{display:block}.news-sidebar__banner{width:100%;height:auto;aspect-ratio:2.8/1}.hot-news{margin-top:18px}.news-pagination{flex-wrap:wrap;padding-top:34px}}

@media(max-width:900px){.news-detail-board{padding:38px 24px 60px}.news-detail-layout{grid-template-columns:1fr}.news-detail-page .news-sidebar{display:grid;grid-template-columns:290px minmax(0,1fr);gap:20px}.news-detail-page .hot-news{margin-top:0}}

@media(max-width:640px){.news-detail-board{padding:28px 14px 44px}.news-article{padding:22px 16px}.news-article h1{font-size:20px}.news-article-meta{align-items:flex-start;flex-direction:column;margin-bottom:24px}.news-article-meta__actions{align-self:flex-end}.news-article-nav{grid-template-columns:1fr}.news-article-nav a:last-child{text-align:left}.news-detail-page .news-sidebar{display:block}.news-detail-page .news-sidebar__banner{width:100%;height:auto}.news-detail-page .hot-news{margin-top:18px}}

@media(max-width:900px){.about-honors__grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:560px){.about-honors__grid{grid-template-columns:1fr}.about-honors>.about-honors__title{width:min(372px,100%)}}

@media(max-width:900px){.environment-hero{height:auto}.environment-hero img{height:auto;aspect-ratio:3/1}.environment-content{padding:46px 22px 58px}.environment-feature{grid-template-columns:1fr}.environment-feature__photo{min-height:420px}.environment-gallery{grid-template-columns:repeat(2,1fr);padding-inline:0}}

@media(max-width:560px){.environment-hero img{min-height:190px;object-position:center}.environment-content{padding:34px 14px 48px}.environment-feature__photo{min-height:300px}.environment-feature__photo figcaption{padding:15px 18px}.environment-feature__photo strong{font-size:22px}.environment-feature__copy{padding:30px 18px}.environment-feature__copy>p{font-size:14px}.environment-feature__points{margin-top:28px}.environment-feature__points>div{padding-inline:5px}.environment-feature__points strong{font-size:14px}.environment-gallery{grid-template-columns:1fr;gap:18px;padding-top:48px}.environment-gallery img{height:auto;aspect-ratio:16/9}.environment-pagination{flex-wrap:wrap;padding-top:38px}}

@media(max-width:900px){.environment-gallery{grid-template-columns:repeat(2,270px)}}

@media(max-width:560px){.environment-gallery{grid-template-columns:minmax(0,280px);gap:16px}.environment-gallery .environment-card img{height:auto;aspect-ratio:27/16}}

@media(max-width:900px){.curriculum-detail-hero{height:auto}.curriculum-detail-hero img{height:auto;aspect-ratio:3/1}.curriculum-detail-content{padding:28px 28px 48px}.curriculum-detail-heading h1{font-size:38px}.curriculum-detail-overview,.curriculum-detail-columns{grid-template-columns:1fr}.curriculum-detail-overview__photo{height:auto;aspect-ratio:2/1}.curriculum-detail-classroom{margin-top:0}.curriculum-detail-suitable ul{min-height:0}}

@media(max-width:560px){.curriculum-detail-hero img{min-height:190px;object-position:center}.curriculum-detail-content{padding:24px 14px 40px}.curriculum-detail-heading{padding-block:24px}.curriculum-detail-heading h1{font-size:30px}.curriculum-detail-heading p{font-size:15px}.curriculum-detail-overview__photo{aspect-ratio:16/10}.curriculum-detail-benefits{grid-template-columns:repeat(2,1fr);gap:20px 0}.curriculum-detail-benefits>div:nth-child(2){border:0}.curriculum-detail-feature-grid{grid-template-columns:1fr}.curriculum-detail-schedule dl>div{grid-template-columns:88px 1fr}.curriculum-detail-schedule dt,.curriculum-detail-schedule dd{padding-inline:9px}}

@media(max-width:1050px){.home-principals__layout{grid-template-columns:minmax(0,1fr) 220px;margin-left:88px}.home-principal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-principals__awards{width:220px}.home-principal-card>img{height:200px}}

@media(max-width:760px){.home-principals{padding-inline:22px}.home-principals__layout{grid-template-columns:1fr;margin-left:0}.home-principals__awards{width:265px;max-width:100%;margin:8px auto 0}.home-principals__motto{display:none}}

@media(max-width:760px){.home-principal-card>div{padding:10px 16px 18px}.home-principal-card h3{gap:7px;margin-bottom:8px;font-size:22px}.home-principal-card h3 small{padding:4px 8px;font-size:11px}.home-principal-card ul{padding-left:18px;font-size:13px;line-height:1.75}}

@media(max-width:560px){.home-principals{padding:30px 14px 94px}.home-principals__heading{margin-bottom:22px}.home-principals__layout{margin-left:0}.home-principal-grid{grid-template-columns:1fr}.home-principal-card{min-height:0}.home-principal-card>img{height:auto;aspect-ratio:6/5}.home-principals__motto{display:none}.home-principals__wave{height:82px}}

/* 375px ????????? HTML ?????? */
@media (max-width: 560px) {
  html,
  body {
    min-width: 0;
    width: 100%;
  }

  .hero {
    height: auto;
  }

  .hero picture,
  .hero img {
    display: block;
  }

  .hero img {
    height: auto;
    object-fit: contain;
  }

  .course-grid,
  .faculty-grid,
  .news-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #courses .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #faculty .faculty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #courses > .service-panel {
    display: none;
  }

  #courses .course-card__body {
    display: none;
  }

  .home-principal-grid {
    grid-template-columns: minmax(0, 300px);
    justify-content: center;
    gap: 16px;
  }

  .home-principal-card {
    width: 100%;
  }

  .home-principal-card > img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .home-principal-card > div {
    padding: 10px 22px 20px;
  }

  .home-principal-card h3 {
    gap: 8px;
    margin-bottom: 9px;
    font-size: 22px;
  }

  .home-principal-card h3 small {
    padding: 4px 9px;
    font-size: 11px;
  }

  .home-principal-card ul {
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.75;
  }
}

/* Image performance compatibility for responsive picture wrappers. */
@media (max-width: 1050px) {
  .home-principal-card > .optimized-picture > img {
    height: 200px;
  }
}

@media (max-width: 960px) and (min-width: 641px) {
  .contact-route-card > .optimized-picture {
    grid-column: 2;
    grid-row: 1 / 3;
    height: 180px;
  }

  .contact-route-card > .optimized-picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (max-width: 560px) {
  .course-card > .optimized-picture > img {
    width: 100%;
    height: auto;
    aspect-ratio: 212 / 145;
  }

  .home-principal-card > .optimized-picture > img {
    width: calc(100% - 24px);
    height: auto;
    aspect-ratio: 6 / 5;
  }
}


/* About picture wrapper: preserve the original mobile intro ratio. */
@media (max-width: 560px) {
  .about-intro__visual > .optimized-picture {
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .about-intro__visual > .optimized-picture > img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}
/* Hide the desktop advantages artwork on mobile after picture optimization. */
@media (max-width: 767px) {
  #school > .optimized-picture > .advantages-section__desktop {
    display: none;
  }
}
/* About advantages: two cards per row on mobile. */
@media (max-width: 560px) {
  .about-page .about-advantages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* About environment and honors: two cards per row on mobile. */
@media (max-width: 560px) {
  .about-page .about-environment,
  .about-page .about-honors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-page .about-environment img {
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
}
/* Course page: keep only image and title on mobile cards. */
@media (max-width: 767px) {
  .curriculum-page .course-page-grid .course-card__body {
    display: none;
  }
}
/* Course page mobile cards: flush media and larger titles. */
@media (max-width: 767px) {
  .curriculum-page .course-page-grid .course-card > .optimized-picture {
    width: 100%;
    margin: 0;
  }

  .curriculum-page .course-page-grid .course-card > .optimized-picture > img {
    width: 100%;
    margin: 0;
    border-radius: 9px 9px 0 0;
  }

  .curriculum-page .course-page-grid .course-card > h2 {
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 8px;
    font-size: 16px;
  }
}