@import url('./youxin-assets.css?v=20261030');

/* 幼新設計稿：1440 / 768 / 375。原始圖片與遮罩由 Figma 本機匯出資料保留。 */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
.youxin-site { overflow-x: clip; }
.yx-asset { position: absolute; display: none; max-width: none; pointer-events: none; z-index: 0; overflow: hidden; }
.hero::before { z-index: 1; }
.hero--news { width: 100%; background-image: none !important; }
.hero-inner { z-index: 2; }
.news-body > .yx-asset { z-index: 2; }
.story, .meaning, .philosophy, .methods, .principles { position: relative; }
.story { overflow: hidden; }
.story-text, .meaning-container, .philosophy-text { position: relative; z-index: 1; }
.heart-card:nth-child(2)::after { content: none; }
.footer { position: relative; z-index: 3; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.yx-about > section { position: relative; max-width: 1440px; margin-inline: auto; }
.yx-about { overflow-x: clip; }
.yx-gray { background: #f8f9fa; }
.yx-hero-title { font: 700 72px/1.4 Georgia, 'Times New Roman', serif; color: white; text-align: center; letter-spacing: .02em; }
.yx-copy { position: relative; z-index: 1; font: 400 18px/1.9 var(--font-family-base); color: #444; }
.yx-copy-right, .yx-copy-left { position: absolute; top: 48px; width: 691px; }
.yx-copy-right { left: calc(50% - 173px); }
.yx-copy-left { left: calc(50% - 518px); }
.yx-english-line { margin-top: 12px; }
.yx-copy-body { margin-top: 32px; }
.yx-copy-body p + p { margin-top: 12px; }
.yx-intro-copy { position: absolute; top: 64px; left: calc(50% - 518px); width: 1036px; text-align: center; }
.yx-world .yx-copy, .yx-outro .yx-copy { max-width: 1100px; margin: auto; padding: 48px 32px; text-align: center; }
.yx-world p + p { margin-top: 12px; }
.yx-explore .yx-copy { top: 72px; }
.yx-outro .yx-copy { padding-top: 40px; }
.yx-outro .yx-english-line { margin-top: 24px; }
.yx-intro { height: 815px; }
.yx-english { height: 416px; }
.yx-world { height: 172px; }
.yx-yard { height: 458px; }
.yx-explore { height: 350px; overflow: hidden; }
.yx-teacher { height: 380px; }
.yx-outro { height: 206px; }
.yx-kindergarten { height: 954px; padding-top: 240px; padding-bottom: 80px; }
.yx-kindergarten .kindergarten-container { gap: 0; }
.yx-kindergarten .school-info-row:nth-child(1), .yx-kindergarten .school-info-row:nth-child(4) { height: 99px; }
.yx-kindergarten .school-info-row:nth-child(2) { height: 133px; }
.yx-kindergarten .school-info-row:nth-child(3) { height: 303px; }
.yx-kindergarten .school-info-row { padding-block: 32px; }
.yx-kindergarten .school-info-content-text { font-size: 18px; line-height: 1.9; }
.yx-schedule { height: 1671px; padding-top: 226px; padding-bottom: 80px; }
.yx-schedule .schedule-container { gap: 40px; }
.yx-schedule .schedule-head { height: 101px; }
.yx-schedule .schedule-row { height: 83px; }
.yx-schedule .schedule-row:last-child { border-bottom: 1px solid #444; }
.yx-schedule .schedule-note { min-height: 63px; }

@media (min-width: 1024px) {
    .yx-d { display: block; }
    .story { height: 523px; }
    .meaning { min-height: 1079px; }
    .philosophy { min-height: 454px; }
    .philosophy-illust { height: 273px; }
    .methods { min-height: 382px; }
    .principles { min-height: 590px; }
    .footer { min-height: 324px; }
    .footer-container { gap: 28.8px; }
    .mv { min-height: 1131px; }
    .news-body { padding-bottom: 56px; }
    .yx-copy-right { max-width: calc(50% + 141px); }
    .yx-copy-left { left: max(32px, calc(50% - 518px)); max-width: calc(100% - 64px); }
    .yx-intro-copy { left: max(32px, calc(50% - 518px)); width: min(1036px, calc(100% - 64px)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .yx-t { display: block; }
    .hero { height: 430px; }
    .hero--visit { height: 520px; }
    .story { height: 809px; padding: 32px 0; }
    .story-container { justify-content: flex-start; }
    .story-text { width: 100%; }
    .meaning { min-height: 1343px; }
    .meaning { padding-bottom: 28.29px; }
    .philosophy { min-height: 471px; padding-top: 227.45px; }
    .philosophy-illust { display: none; }
    .philosophy-inner { gap: 0; }
    .principles { min-height: 558px; }
    .principles { padding-bottom: 47.78px; }
    .footer { min-height: 300px; }
    .yx-hero-title { font-size: 48px; }
    .yx-intro { height: 803px; }
    .yx-intro-copy { left: 40px; width: calc(100% - 80px); top: 48px; }
    .yx-intro-copy br { display: initial; }
    .yx-english { height: 652px; }
    .yx-world { height: 156px; }
    .yx-yard { height: 721px; }
    .yx-explore { height: 568px; }
    .yx-teacher { height: 668px; }
    .yx-outro { height: 204px; }
    .yx-copy { font-size: 18px; line-height: 1.9; }
    .yx-copy-right, .yx-copy-left { left: 40px; width: calc(100% - 80px); }
    .yx-english .yx-copy { top: 326px; }
    .yx-yard .yx-copy { top: 40px; }
    .yx-explore .yx-copy { top: 326px; }
    .yx-teacher .yx-copy { top: 40px; }
    .yx-world .yx-copy { padding: 40px; }
    .yx-outro .yx-copy { padding: 40px; }
    .yx-kindergarten { height: 954px; padding-top: 240px; }
    .yx-kindergarten .kindergarten-container { padding-inline: 32px; }
    .yx-schedule { height: 1672px; }
    .yx-schedule .schedule-container { padding-inline: 32px; }
}

@media (max-width: 767px) {
    .yx-m { display: block; }
    .header-inner { padding-inline: 20px; }
    .hero { height: 220px; }
    .hero--home { height: 430px; }
    .hero--visit { height: 400px; }
    .hero--news { height: auto; aspect-ratio: 375 / 220; }
    .story { height: 630px; padding: 32px 0; }
    .story-container { justify-content: flex-start; }
    .story-text { width: 100%; }
    .story-text h2 { font-size: 22px; line-height: 1.4; }
    .story-quote, .story-quote-zh { font-size: 16px; line-height: 1.8; }
    .meaning { min-height: 2227px; }
    .meaning { padding-bottom: 25px; }
    .philosophy { min-height: 543px; padding-top: 230px; }
    .philosophy { padding-bottom: 44.6px; }
    .philosophy-illust { display: none; }
    .philosophy-inner { gap: 0; }
    .methods { min-height: 345px; }
    .principles { min-height: 830px; }
    .principles { padding-bottom: 45.6px; }
    .footer { min-height: 318px; }
    .yx-hero-title { font-size: 24px; line-height: 1.4; }
    .yx-copy { font-size: 16px; line-height: 1.8; }
    .yx-copy-right, .yx-copy-left { left: 20px; width: calc(100% - 40px); }
    .yx-intro { height: 560px; }
    .yx-intro-copy { top: 32px; left: 20px; width: calc(100% - 40px); }
    .yx-intro-copy br { display: initial; }
    .yx-english { height: 673px; }
    .yx-english .yx-copy { top: 293px; }
    .yx-world { height: 162px; }
    .yx-world .yx-copy { padding: 32px 20px; }
    .yx-world p + p { margin-top: 12px; }
    .yx-yard { height: 795px; }
    .yx-yard .yx-copy { top: 32px; }
    .yx-copy-body { margin-top: 24px; }
    .yx-explore { height: 567px; }
    .yx-explore .yx-copy { top: 325px; }
    .yx-teacher { height: 744px; }
    .yx-teacher .yx-copy { top: 32px; }
    .yx-outro { height: 276px; }
    .yx-outro .yx-copy { padding: 32px 20px; }
    .yx-outro .yx-english-line { margin-top: 24px; }
    .yx-kindergarten { height: 853px; padding-top: 149px; padding-bottom: 48px; }
    .yx-kindergarten .kindergarten-container { padding: 0 20px; }
    .yx-kindergarten .school-info-label { flex-basis: 73px; width: 73px; font-size: 13px; }
    .yx-kindergarten .info-content { padding-left: 20px; }
    .yx-kindergarten .school-info-content-text { font-size: 16px; line-height: 1.9; }
    .yx-kindergarten .school-info-row { padding: 20px 0; }
    .yx-kindergarten .school-info-row:nth-child(1) { height: 71px; }
    .yx-kindergarten .school-info-row:nth-child(2) { height: 125px; }
    .yx-kindergarten .school-info-row:nth-child(3) { height: 365px; }
    .yx-kindergarten .school-info-row:nth-child(4) { height: 95px; }
    .yx-schedule { height: 1890px; padding-top: 159px; padding-bottom: 48px; }
    .yx-schedule .schedule-container { padding-inline: 20px; gap: 40px; }
    .yx-schedule .schedule-head { display: none; }
    .yx-schedule .schedule-row { height: 113px; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0; gap: 12px; }
    .yx-schedule .schedule-row:first-of-type, .yx-schedule .schedule-head + .schedule-row { height: 89px; padding-top: 0; }
    .yx-schedule .schedule-row:nth-of-type(9) { height: 143px; }
    .yx-schedule .schedule-time { flex: none; width: auto; padding: 4px 12px; font-size: 12px; }
    .yx-schedule .schedule-activity { flex: none; width: 100%; padding: 0; font-size: 16px; line-height: 1.8; }
    .yx-schedule .schedule-note { min-height: 55px; font-size: 14px; line-height: 1.8; }
    .mv { min-height: 920px; }
}

@media (max-width: 374px) {
    .yx-about .yx-copy { font-size: 14.5px; }
    .yx-kindergarten .school-info-content-text { font-size: 14px; }
    .yx-schedule .schedule-activity { font-size: 14px; }
    .yx-explore .yx-copy { top: 321px; }
    .hero--news { height: auto; aspect-ratio: 375 / 220; }
    .yx-intro .yx-asset[role="img"], .story .yx-asset[role="img"] {
        left: 20px;
        width: calc(100% - 40px);
        height: auto;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .yx-world .yx-copy, .yx-outro .yx-copy { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) { .youxin-site * { scroll-behavior: auto !important; } }

/* Original Figma GIF artwork; retain a still image for reduced motion. */
.yx-motion-poster { display:none; }
@media (prefers-reduced-motion: reduce) {
  .yx-motion { display:none; }
  .yx-motion-poster { display:inline; }
}

/* Keep overlapping leaves above the following section background. */
@media (max-width:767px) { .yx-intro .yx-leaves { z-index:2; } }
/* 手機星星 GIF 會往下超出到探索區塊，要疊在照片上面 */
@media (max-width:767px) { .yx-asset-54 { z-index:2; } }
@media (min-width:768px) and (max-width:1023px) {
    .methods > .yx-asset.yx-t { display:none; }
}

.yx-schedule-badge { display:none; }
@media (max-width:767px) {
    .yx-schedule-badge { display:block; position:absolute; left:calc(50% + 78.5px); top:39px; width:49px; height:52px; pointer-events:none; }
}

/* 關於我們手機底圖：設計稿寬 375，較寬的手機要撐滿螢幕，兩側才不會露出硬邊 */
@media (max-width:767px) {
    .yx-asset-36 { left:0; width:100%; }
    .yx-asset-57 { left:0; top:auto; bottom:0; width:100%; height:auto; aspect-ratio:375 / 65.21429; }
}

/* 預約參觀標題：只有手機在校名後換行 */
.yx-mobile-br { display:none; }
@media (max-width:767px) { .yx-mobile-br { display:inline; } }

/* 平板：塗鴉放在一日作息區塊內，放在上一區塊會被裁掉 */
@media (min-width:768px) and (max-width:1023px) {
    .yx-asset-71 { display:none; }
    .yx-schedule-badge { display:block; position:absolute; left:calc(50% - 72.83px); top:104.36px; width:60.27px; height:56.19px; pointer-events:none; }
}

/* 關於我們 1024–1439（含 iPad 橫向）：仙人掌貼表格右下、塗鴉移到一日作息標題右邊（同平板稿），標題不超出表格 */
@media (min-width:1024px) and (max-width:1439px) {
    .yx-asset-64 { left:max(32px, calc(50% - 518px)); }
    .yx-asset-73 { left:max(40px, calc(50% - 509.894px)); }
    .yx-asset-67 { left:auto; right:calc(max(32px, 50% - 518px) + 60px); top:684px; width:190px; height:190px; }
    .yx-asset-70 { display:none; }
    .yx-schedule-badge { display:block; position:absolute; left:max(311.32px, calc(50% - 238.57px)); top:104.36px; width:60.27px; height:56.19px; pointer-events:none; }
}