/* SnowGame site-wide type + spacing standard  (css/site-type.css, 2026-10-27, from SPEC v7)
   PHONES ONLY (owner 10/27, round 3): every rule below sits inside @media (max-width: 767px). From 768px the site is
   exactly as it was before this standard (c7cf46b): "桌面板的文字維持一樣大".
   Owner 10/27: "參考原本的高度與顏色，我要原本的那種"; "不要看起來那麼擠，尤其是標題的部分，上下間格要夠"; and after round 2,
   with the old home page as the model: "我要像這樣，上下的空間比較多".
   - Section titles keep the site's original look (cyan Chinese title + bigger dark-blue Kalam line, colours, italics
     and shadows as each page has them); sizes unified on phones: Chinese 26 (30 from 480px), Kalam 32.
   - Page titles (hero) 33px on phones up to 479px.
   - H3 / H4 / body / small / button sizes and the spacing tokens below.
   - The rental page keeps its own heading look (navy title on a cyan brush, owner option B); its phone sizes and
     spacing are in css/rental.css.
   Load it after every other stylesheet of the page. Never touches the navbar (.navbar, .nav-menu, .w-nav-overlay,
   .nav-link), the footer (footer.end-section) or the floating bar (#sg-fab); no html[lang="en"] rule changes geometry. */
@media (max-width: 767px) {
  /* ===================================================================== 1. tokens */
  :root {
    /* section title: the resort-page set (Webflow .heading-title-chinese + opt.css Kalam token) */
    --fs-h2: 26px;                           /* Chinese title, phones up to 479px; 30px from 480px */
    --fs-h2-en: 32px;                        /* Kalam line */
    --lh-h2: 1.5; --lh-en: 1;
    --sp-pair: 28px;                         /* Chinese title -> Kalam line: ink about 34, as the old home page (owner 10/27) */

    /* the rest of the scale (unchanged from v5) */
    --fs-h1-phone: 33px;                     /* hero title on phones up to 479px; from 480px each page's own size */
    --fs-h3: 20px;  --fs-h4: 18px;
    --fs-body: 16px; --fs-small: 15px; --fs-btn: 16px; --fs-cta: 18px;
    --fs-end: 26px;
    --lh-h3: 1.4; --lh-h4: 1.5; --lh-body: 1.75; --lh-small: 1.6;

    /* spacing on phones (owner 10/27: "上下的空間比較多", the old home page as the model) */
    --sp-head: 44px;       /* heading block -> its content (a box, card or picture): about 48 of ink, as the old home page (47.5) */
    --sp-head-text: calc(var(--sp-head) - 12px);   /* the same when running text follows: its own room above the letters adds the rest */
    --sp-h3: 10px;         /* card / item title -> its text */
    --sp-block: 20px;      /* between cards / blocks inside a section */
    --sp-section: 64px;    /* between two sections */
    --sp-chapter: 88px;    /* big breaks */
    --sp-group: 48px;      /* between short sibling sections of one group (recruit job conditions) */
    --sp-hero: 40px;       /* page photo -> the first section title under it (ink distance) */

    /* the older shared heading tokens (opt.css, course-choice.css, reserve-layout.css read these) follow the scale */
    --sg-heading-zh-size: var(--fs-h2);
    --sg-heading-en-size: var(--fs-h2-en);
    --sg-heading-zh-line-height: var(--lh-h2);
    --sg-heading-en-line-height: var(--lh-en);
    --sg-heading-title-gap: var(--sp-pair);
    /* the reserve page's own rhythm tokens (reserve-layout.css) follow the site tokens */
    --rl-space-section: calc(var(--sp-section) / 2);
    --rl-space-heading: var(--sp-head);
    --rl-space-block: var(--sp-block);
    --rl-space-tight: var(--sp-h3);
  }
  @media (min-width: 480px) {
    :root { --fs-h2: 30px; --sp-pair: 26px; }   /* the 30px title brings 2px more room under its letters */
  }

  /* ===================================================================== 2. H1  page title: phones only */
  @media (max-width: 479px) {
    .rental-a .ra-hero__title,
    .blog-hero-title, .guide-hero .blog-hero-title { font-size: var(--fs-h1-phone); }
  }

  /* ===================================================================== 3. H2  section title + Kalam line (sizes only) */
  .heading-title-chinese:not(.more),
  .heading-title:not(.en),
  .qa-title-text:not(.next),
  .intro-text,
  .sg-shared-heading-zh,
  .sg-choice .sg-choice-heading h2,
  .guide-section-heading h2, .guide-checklist-heading h2,
  .season-overview h2 {
    font-size: var(--fs-h2); line-height: var(--lh-h2);
    margin-bottom: var(--sp-head); padding-top: 0; padding-bottom: 0;   /* margin-top stays with each page's section rhythm */
  }
  .heading-title-en,
  .heading-title-en.big, .heading-title-en._4ch-en, .heading-title-en._12ch-en, .heading-title-en.mobile-custom,
  .heading-title.en,
  .sg-shared-heading-en,
  .sg-choice .sg-choice-heading p {
    font-size: var(--fs-h2-en); line-height: var(--lh-en);
  }
  /* the pair: the Kalam line sits --sp-pair under the Chinese title (ink about 34, as the old home page) and carries the
     gap to the content. Flex wrappers (reserve, course choice) get the same gap from --sg-heading-title-gap instead. */
  .heading-title-en, .heading-title.en { margin-top: var(--sp-pair); margin-bottom: var(--sp-head); padding-top: 0; padding-bottom: 0; }
  .heading-title-chinese:not(.more):has(+ .heading-title-en),
  .heading-title:not(.en):has(+ .heading-title.en),
  .sg-shared-heading-zh:has(+ .sg-shared-heading-en),
  .sg-choice .sg-choice-heading h2:has(+ p) { margin-bottom: 0; }
  .qa-title-text:not(.next):has(+ .qa-title-text.next) { margin-bottom: 4px; }
  .qa-title-text.next { margin-top: 0; }
  .sg-section-heading-effect { gap: var(--sp-pair); }   /* course-choice.css hard-codes 10px on phones */
  /* the course-choice title: course-choice.css hard-codes a 10px gap on phones; its Kalam line is tilted -1.5deg, which
     eats about 4px, so it gets 4px more to look like the pairs elsewhere */
  .sg-choice .sg-choice-heading { gap: calc(var(--sp-pair) + 4px); }

  /* ===================================================================== 4. H3  card / sub-section title (size only) */
  .list-intro h3,
  .heading-title-chinese.more,
  .card-text,
  .feature-text,
  .access-title,
  .mobile-flex-down,
  .class-time-title,
  .qa-title-text.next,
  .refund-title-text,
  .ticket-bar-text,
  .lesson-facts:not(#lesson-prices) h3,   /* the price table (#lesson-prices) is phase 2: nothing inside it is touched */
  .sg-choice .sg-choice-copy h3 {
    font-size: var(--fs-h3); line-height: var(--lh-h3);
  }
  /* the resort cards (.card.intro: card name and Japanese name) are phase 2: their sizes and the fixed 50px name box go
     together (a 20px English name broke onto three lines and ran into the Japanese name), so they keep their own sizes */
  .list-intro h3 { margin-top: 0; margin-bottom: var(--sp-h3); }

  /* ===================================================================== 5. H4  item title (size only) */
  .time-title,
  .heading-feature,
  .hire-text:not(.long):not(.ps),
  .question,
  .lesson-head,
  .lesson-facts:not(#lesson-prices) h4,
  .season-status__title,
  .guide-checklist h3 {
    font-size: var(--fs-h4); line-height: var(--lh-h4);
  }

  /* ===================================================================== 6. body text */
  .text-inside, .text-inside.access, .text-inside.higer-smaller,
  .list-intro,
  .feature-txt-inside,
  .lesson-text,
  .time-text, .sg-paper-collage-flow .time-text,
  .answer,
  .hire-text.long,
  .take-bus-location,
  .season-status__copy,
  .sg-choice .sg-choice-summary,
  .sg-choice .sg-choice-details-body dd,
  .guide-section-heading p, .guide-checklist-heading p, .guide-card p, .guide-checklist p,
  .blog-hero-subtitle,
  .refund-container > .inside-text {   /* refund: the refund-rate list (.next, kept indented) and the closing lines, 14px before */
    font-size: var(--fs-body); line-height: var(--lh-body);
  }

  /* ===================================================================== 7. small text (never below 15px) */
  .ticket-price-text-next,
  .season-status__eyebrow,
  .season-overview__footer,
  .sg-choice .sg-choice-details-body dt,
  .hire-text.ps,
  .intro-container > .text-card.mini-bar > div {
    font-size: var(--fs-small); line-height: var(--lh-small);
  }

  /* ===================================================================== 8. buttons (size only) */
  .buy-button,
  .reservation,
  .notice-text,
  .sg-choice .sg-choice-details summary {
    font-size: var(--fs-btn); line-height: 1.35;
  }

  /* ===================================================================== 9. closing call to action (size only) */
  a.ready-section .end-text { font-size: var(--fs-end); }          /* size only: the original line height (2) keeps */
  a.ready-section .end-text.next { font-size: var(--fs-cta); }     /* the title and "點我了解更多" apart as before */
  a.ready-section { padding-top: calc(var(--sp-section) / 2); padding-bottom: calc(var(--sp-section) / 2); }

  /* ===================================================================== 9a. reserve page layers (reserve-layout.css uses #id / sibling chains) */
  .top-bar.introduction + main .lesson-head { font-size: var(--fs-h4); line-height: var(--lh-h4); }
  .top-bar.introduction + main .lesson-text { font-size: var(--fs-body); line-height: var(--lh-body); }
  #choose-your-ride + main .sg-paper-collage-flow .time-title,
  #choose-your-ride + main .sg-process-section .class-time-title, #choose-your-ride + main .sg-process-half-section .class-time-title { font-size: var(--fs-h4); }
  #choose-your-ride + main .sg-paper-collage-flow .time-text { font-size: var(--fs-body); line-height: var(--lh-body); }
  #notice .tab-link, #notice .tab-link.w--current { font-size: var(--fs-btn); }

  /* ===================================================================== 9a2. recruit page: title rows */
  /* phones and tablets: the Chinese title and its Kalam line sit side by side; with the 32px Kalam the row no longer
     fits at 360px and squeezed "加分項目" onto two lines, so the Kalam line may drop below instead. In the row the Kalam
     line sits on the title's baseline; once it drops below, the row gap gives the usual 20px, and the block keeps the
     heading gap to its content. */
  @media (max-width: 991px) {
    .hire-title-block { flex-wrap: wrap; align-items: baseline; row-gap: var(--sp-pair); margin-bottom: var(--sp-head); }
    .hire-title-block > .heading-title-chinese, .hire-title-block > .heading-title-en { margin-top: 0; margin-bottom: 0; }
  }
  /* every recruit text line: no lone last character, and the salary line keeps "¥ 7,200" together (it broke as
     "… ~ ¥" / "7,200" at 360-390px); both languages */
  .hire-text { text-wrap: pretty; }
  /* the job conditions 工作期間, 薪資待遇 and 福利 are one or two lines each: they follow 工作地點 at the smaller group gap
     (48) instead of a full section gap; 工作地點 and 招聘流程 keep the section gap that opens and closes the group.
     (main-comtainer children: 1 lead title, 2 全職, 3 培訓, 4 加分項目, 5 工作地點, 6 工作期間, 7 薪資待遇, 8 福利; same on en/) */
  .top-bar.hire ~ main .main-comtainer > .text-card:nth-child(n+6):nth-child(-n+8) { padding-top: var(--sp-group); }

  /* ===================================================================== 9b. English pages: font size only, never larger than the Chinese page */

  /* ===================================================================== 9c. text shadows that scale with the text */
  /* The home titles (.heading-title, italic), the home feature titles (.feature-text) and the closing line (.end-text)
     carry a fixed Webflow shadow (15px 9px 5px; 10px 8px 5px on phones). At the new, smaller sizes the fixed offset looked
     like a double image, so each shadow is now the original offset / blur divided by the original font size at that
     breakpoint, in em: the same look at the new size. Colours unchanged. Selectors stay at one or two classes, so the
     course page's own "a.ready-section .end-text { text-shadow: none }" still wins. */
  .heading-title { text-shadow: .333em .2em .111em #0003; }                 /* 15 9 5 on 45px */
  .heading-title.en { text-shadow: .25em .15em .083em #0003; }              /* 15 9 5 on 60px */
  .feature-text { text-shadow: .333em .2em .111em #0003; }                  /* 15 9 5 on 45px */
  .end-text { text-shadow: .333em .2em .111em #0003; }                      /* 15 9 5 on 45px */
  .end-text.next { text-shadow: .429em .257em .143em #0003; }               /* 15 9 5 on 35px */
  @media screen and (max-width: 991px) {
    .feature-text { text-shadow: .405em .243em .135em #0003; }              /* 15 9 5 on 37px */
  }
  @media screen and (max-width: 767px) {
    .heading-title { text-shadow: .395em .237em .132em #0003; }             /* 15 9 5 on 38px */
    .heading-title.en { text-shadow: .333em .2em .111em #0003; }            /* 15 9 5 on 45px */
    .end-text { text-shadow: .441em .265em .147em #0003; }                  /* 15 9 5 on 34px */
    .end-text.next { text-shadow: .5em .3em .167em #0003; }                 /* 15 9 5 on 30px */
  }
  @media screen and (max-width: 479px) {
    .heading-title { text-shadow: .4em .32em .2em #0000001c; }              /* 10 8 5 on 25px */
    .heading-title.en { text-shadow: .323em .258em .161em #0000001c; }      /* 10 8 5 on 31px */
    .feature-text { text-shadow: .5em .3em .167em #0003; }                  /* 15 9 5 on 30px */
    .end-text { text-shadow: .652em .391em .217em #0003; }                  /* 15 9 5 on 23px */
    .end-text.next { text-shadow: .75em .45em .25em #0003; }                /* 15 9 5 on 20px */
  }

  /* ===================================================================== 10. section rhythm (space above a section title) */
  /* Every section title gets the section gap (--sp-section, 64) above it and the heading gap (--sp-head, about 48 of
     ink) below it (owner 10/27: room above and below, no ratio). The title itself carries no top margin; the gap lives
     on the section box. */

  /* resort pages (12 pages share .intro-container): one section = one .text-card; the update note (.mini-bar) and the
     "more tickets" line (.more) belong to the section above, so they get no extra space */
  .intro-container > .text-card:not(.mini-bar):not(.more) { padding-top: var(--sp-section); }
  .intro-container .heading-title-chinese, .headind-title-div .heading-title:not(.en) { margin-top: 0; }
  @media (max-width: 991px) {
    /* the ticket section stacks its title over the tickets with a 30px flex gap on top of the heading gap */
    .intro-container > .text-card.mid-1 { row-gap: 0; }
  }
  /* the first item of a feature list sits right under the section title (岩原: 雪場特色) */
  .intro-container .list-intro:first-child > .heading-feature:first-child { margin-top: 0; }

  /* home page: a section-title band gets the section gap above it and none below; the cards and the four feature bands
     start right under their title */
  .feature-section { padding-top: var(--sp-section); padding-bottom: 0; }
  .feature-section + .go-section { padding-top: 0; }
  .feature-section-main { padding-top: calc(var(--sp-section) / 2); padding-bottom: calc(var(--sp-section) / 2); }
  .feature-section + .feature-section-main { padding-top: 0; }
  /* the light-blue feature bands (.next) open with the full section gap inside their top edge (the half gap left about
     40px on phones); the bottom keeps half of it, since the band's own pictures already leave room at the bottom */
  .feature-section-main.next { padding-top: var(--sp-section); }
  .feature-section > .animate-bar-container { padding-bottom: 0; }
  .feature-section + footer:not(.end-section) > .photo-stack { padding-top: 0; }

  /* access and recruit: the page's lead title (.text-card.top-title) opens the page one section gap under the photo;
     each section card after it (access: the transport chapters, recruit: the job cards) opens with the section gap,
     the first one with half of it, since the lead title's own heading gap already sits above it */
  .top-bar.access ~ main .text-card.top-title,
  .top-bar.hire ~ main .text-card.top-title { padding-top: var(--sp-section); padding-bottom: 0; }
  .top-bar.access ~ main .text-card.top-title > .heading-title-chinese,
  .top-bar.hire ~ main .text-card.top-title > .heading-title-chinese,
  .top-bar.access ~ main .text-card.animation .heading-title-chinese { margin-top: 0; }
  .top-bar.access ~ main .text-card.animation,
  .top-bar.hire ~ main .text-card:not(.top-title) { padding-top: var(--sp-section); }
  .top-bar.access ~ main .text-card.top-title + .text-card.animation,
  .top-bar.hire ~ main .text-card.top-title + .text-card { padding-top: calc(var(--sp-section) / 2); }

  /* access: the closing "各雪場交通" title over the resort cards */
  .head-block.titile-more-space { padding-top: var(--sp-section); padding-bottom: 0; }
  .head-block.titile-more-space > .heading-title-chinese { margin-top: 0; }
  .w-container:has(> .head-block.titile-more-space) + .resort-section,
  .w-container:has(> .head-block.titile-more-space) + .resort-section > .card-stack { padding-top: 0; }

  /* resort guide (雪場介紹): the title row under the photo */
  main.title-section > .intro-bar { padding-top: var(--sp-section); }
  main.title-section > .intro-bar > .intro-text { margin-top: 0; }
  @media (max-width: 767px) {
    /* stacked: the "新手推薦" legend belongs to the title */
    main.title-section > .intro-bar > .intro-text { margin-bottom: calc(var(--sp-head) - 9px); }   /* the legend's icon row sits 9px into its box */
  }

  /* FAQ: each category title sits on a thin rule, just above its questions; the rule keeps the section gap from the
     questions above it. (The first title under the photo: section 10z.) */
  .title-section:has(.qa-title-text) { margin-top: calc(var(--sp-section) / 2); margin-bottom: 0; }

  .title-section .qa-title-text:not(.next) { margin-top: 0; }
  .title-section .qa-title-text.next { margin-bottom: 0; }   /* the rule sits right under the subtitle; the questions start 16px below it */
  main.qa { padding-bottom: var(--sp-section); }
  /* each question keeps (a little more than) the room it had at 21-22px: 14px above and below instead of 10px, so the
     18px question sits about 26px from the rules around it (22-24px before) */
  .qa-inside .question { margin-top: 14px; margin-bottom: 14px; }

  /* ski guide (blog): the two coloured bands take the section gap top and bottom; the lead line belongs to its title */
  .guide-links-section, .guide-checklist-section { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
  .guide-section-heading h2, .guide-checklist-heading h2 { margin-bottom: 0; }
  .guide-section-heading p, .guide-checklist-heading p { margin-top: var(--sp-h3); }
  .guide-section-heading { margin-bottom: var(--sp-head); }
  .guide-checklist-container { row-gap: var(--sp-head); }
  /* the four guide cards are links with a card title (h2 by tag, H3 by role) */
  .guide-card h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

  /* refund: the policy text starts one section gap under the photo */
  .top-bar.refund + main .refund-container { margin-top: var(--sp-section); margin-bottom: var(--sp-section); }
  /* refund-rate list (.next, now body size, body line spacing): a rate that wraps never leaves one character on the
     next line (「費用」 moves down together) */
  .refund-container > .inside-text.next { text-wrap: pretty; }

  /* course page (reserve-layout.css gives every band the same top and bottom padding): a band opens with the full section
     gap, the plain bands close with half of it; the coloured course-choice band keeps the full gap on both sides */
  .top-bar.introduction + main .text-card.top-title { padding-top: var(--sp-section); padding-bottom: calc(var(--sp-section) / 2); }
  #choose-your-ride.sg-choice { padding-top: var(--sp-section); padding-bottom: var(--sp-section); }
  #choose-your-ride + main > .comtainer { padding-top: var(--sp-section); padding-bottom: calc(var(--sp-section) / 2); }

  /* ===================================================================== 10z. the first section title under the page photo */
  /* Owner 10/27 (after launch): the full section gap under the page photo looked like an empty band. The first section
     title right under the photo (.top-bar on most pages, the big photo on the home page) sits closer: 40 of ink distance
     (--sp-hero). The paddings below are that minus the title's own room above its letters (half the line gap plus the
     glyph inset, about 8px for a 26-30px title at line height 1.5). The resort pages keep their own first gap
     (unchanged); the rental page sets its own in css/rental.css. */
  .top-bar.access ~ main .text-card.top-title,
  .top-bar.hire ~ main .text-card.top-title,
  .top-bar.introduction + main .text-card.top-title { padding-top: calc(var(--sp-hero) - 8px); }
  main.title-section > .intro-bar { padding-top: calc(var(--sp-hero) - 8px - 10px); }   /* main.title-section adds 10px */
  .top-bar + .title-section:has(.qa-title-text) { margin-top: calc(var(--sp-hero) - 8px); }
  /* refund: the opening lines are a 20-22px title at line height 2, so about 24px of room sits above their letters */
  .top-bar.refund + main .refund-container { margin-top: calc(var(--sp-hero) - 24px); }
  /* home: the first title band under the big photo; its Lottie row's own 15px top padding is dropped as well */
  .camera + .feature-section { padding-top: calc(var(--sp-hero) - 8px); }
  .camera + .feature-section > .animate-bar-container { padding-top: 0; }

  /* ===================================================================== 10y. heading block -> content: about 48 of ink */
  /* resort pages: when the section text (or a list that starts with an item title) follows the title directly */
  .intro-container > .text-card > div:first-child:has(+ .text-inside, + ol, + ul) > .heading-title-en:last-child { margin-bottom: var(--sp-head-text); }
  /* home page: the feature list under "選擇我們的原因" starts with its own room (list padding, the number's cell and the
     number picture beside the first feature title), so the Kalam line keeps only 10px */
  #feature > .animate-bar-container .heading-title.en { margin-bottom: calc(var(--sp-head) - 34px); }
  /* resort shuttle sections: the title block ends with an outlined link button (官方最新交通資訊, 點我預約); its label sits
     about 14px into the button */
  .intro-container > .text-card > div:first-child > .heading-title-en:has(+ .reservation) { margin-bottom: calc(var(--sp-head) - 14px); }
  /* course page, "想學什麼？": the tilted Kalam line ends about 6px lower than a straight one */
  #choose-your-ride .sg-choice-heading { margin-bottom: calc(var(--sp-head) - 6px); }
}