/* Early-bird lift ticket page (/early-bird, /en/early-bird), 2026-27 season, checked 2026-11-05.
   A standalone page (owner 2026-11-05: early-bird tickets get their own page; the blog is only for news).
   Load after opt.css and before site-type.css (site-type.css stays last). The look reuses the guide pieces in opt.css
   (.guide-hero, .guide-section-heading, .guide-checklist-*, .guide-card-category/-cta); new pieces are prefixed
   .article- and .eb- . Phones follow site-type.css: body text 16px, small text never below 15px. */

/* ===================================================================== hero additions */
.article-hero .article-meta { width: min(100%, 760px); margin: 14px 0 0; color: #3f5560; font-size: 14px; line-height: 1.6; letter-spacing: 0; }

/* ===================================================================== bands */
.article-band { padding: 56px 24px 64px; background: #fff; }
.article-band--grey { background: #f5f7f8; }
.article-wrap { width: min(100%, 1120px); margin: 0 auto; }
.article-band .guide-section-heading { margin-bottom: 24px; }

/* the lead paragraphs */
.article-lead { max-width: 780px; }
.article-lead p { margin: 0 0 14px; color: #304a56; font-size: 17px; line-height: 1.85; letter-spacing: 0; text-wrap: pretty; }
.article-lead p:last-child { margin-bottom: 0; }
.article-lead strong { color: #18242b; }

/* three key facts */
.eb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 32px 0 0; padding: 0; list-style: none; }
.eb-facts li { min-width: 0; padding: 18px 20px; border: 1px solid #d8e0e4; border-radius: 8px; background: #f7fafb; }
.eb-fact-num { display: block; color: #0f5f80; font-size: 30px; line-height: 1.25; font-weight: 800; letter-spacing: 0; }
.eb-fact-text { display: block; margin-top: 6px; color: #3d4f57; font-size: 15px; line-height: 1.6; letter-spacing: 0; }

/* deadlines in date order */
.eb-deadlines { margin: 32px 0 0; }
.eb-deadlines-title { margin: 0; color: #18242b; font-size: 18px; line-height: 1.5; font-weight: 700; letter-spacing: 0; }
.eb-deadlines-note { margin: 4px 0 0; color: #4b5960; font-size: 14px; line-height: 1.6; letter-spacing: 0; }
.eb-dl-list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.eb-dl-list li { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border: 1px solid #cfe0e7; border-radius: 8px; background: #fff; color: #263a43; font-size: 15px; line-height: 1.5; letter-spacing: 0; }
.eb-dl-date { color: #075f83; font-weight: 800; white-space: nowrap; }
.eb-dl-list li.is-ended { border-color: #e2e7ea; background: #f4f6f7; color: #6b7c84; }
.eb-dl-list li.is-ended .eb-dl-date { color: #6b7c84; text-decoration: line-through; }
.eb-dl-ended { color: #6b7c84; font-size: 13px; }
.eb-nowrap { white-space: nowrap; }

/* ===================================================================== the resort table */
.eb-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #d7e4e9; border-radius: 10px; color: #193d4a; text-align: left; text-wrap: pretty; letter-spacing: 0; }
.eb-table a { color: #1c6685; text-decoration: underline; text-underline-offset: 3px; }
.eb-table a:hover { color: #0f4a63; }
.eb-ja { display: block; margin-top: 2px; color: #5c7580; font-size: 13px; line-height: 1.5; font-weight: 400; }
.eb-ticket { display: block; font-weight: 700; color: #193d4a; }
.eb-price { display: block; margin-top: 4px; color: #0d5675; font-size: 18px; line-height: 1.4; font-weight: 800; }
.eb-reg { display: block; color: #193d4a; font-size: 16px; line-height: 1.5; font-weight: 700; }
.eb-sub { display: block; color: #304a56; }
.eb-note { display: block; margin-top: 4px; color: #3f5963; font-size: 13px; line-height: 1.6; font-weight: 400; }
.eb-deadline { display: block; font-weight: 700; color: #193d4a; }
.eb-buy { display: block; }
.eb-buy + .eb-buy { margin-top: 6px; }
.eb-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid #cdd8dd; border-radius: 4px; background: #f6f8f9; color: #4b5960; font-size: 12px; line-height: 1.6; font-weight: 700; vertical-align: 1px; text-decoration: none; }
.eb-status { display: inline-block; max-width: 100%; padding: 3px 10px; border-radius: 6px; border: 1px solid transparent; font-size: 14px; line-height: 1.5; font-weight: 700; }
.eb-status--on { background: #e3f3ea; border-color: #bfe0cc; color: #146c45; }
.eb-status--tba { background: #eef2f4; border-color: #d8e0e4; color: #4b5960; }
.eb-status--ended { background: #f6eceb; border-color: #e8cfcb; color: #8a3b33; }
.eb-row.is-ended .eb-status-note { display: none; }
.eb-row.is-ended .eb-price { color: #5c7580; }
.eb-tba-text { display: block; color: #3f5963; }
.eb-table-foot { max-width: 880px; margin: 16px 0 0; color: #4b5960; font-size: 13px; line-height: 1.8; letter-spacing: 0; text-wrap: pretty; }
.eb-row { scroll-margin-top: 130px; }

/* computers (1200px and up): one table, six columns, always inside its box (no sideways scrolling) */
@media (min-width: 1200px) {
  .eb-table { table-layout: fixed; font-size: 15px; line-height: 1.65; }
  .eb-table th, .eb-table td { padding: 14px 12px; vertical-align: top; overflow-wrap: break-word; }
  .eb-table thead th { background: #edf5f7; color: #295367; font-size: 14px; font-weight: 700; line-height: 1.5; border-bottom: 1px solid #d7e4e9; }
  .eb-table thead th:nth-child(1) { width: 15%; border-top-left-radius: 9px; }
  .eb-table thead th:nth-child(2) { width: 24%; }
  .eb-table thead th:nth-child(3) { width: 14%; }
  .eb-table thead th:nth-child(4) { width: 12%; }
  .eb-table thead th:nth-child(5) { width: 23%; }
  .eb-table thead th:nth-child(6) { width: 12%; border-top-right-radius: 9px; }
  .eb-table .eb-c-name .eb-ja { font-size: 12px; }
  /* English runs longer: a little more room for the status badges */
  html[lang="en"] .eb-table thead th:nth-child(2) { width: 23%; }
  html[lang="en"] .eb-table thead th:nth-child(6) { width: 13%; }
  .eb-table tbody th, .eb-table tbody td { border-bottom: 1px solid #e6edef; }
  .eb-table tbody tr:last-child > * { border-bottom: 0; }
  .eb-table tbody th { font-size: 16px; font-weight: 700; }
  .eb-table .eb-c-status .eb-note { margin-top: 6px; }
  .eb-row--tba td { color: #3f5963; }
}

/* phones, tablets and small laptops (under 1200px): one card per resort (name, then status, then label | value rows) */
@media (max-width: 1199px) {
  .eb-table { border: 0; border-radius: 0; background: transparent; }
  .eb-table, .eb-table tbody, .eb-table tr, .eb-table th, .eb-table td { display: block; }
  .eb-table thead { display: none; }
  .eb-table tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .eb-table tr.eb-row { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "status" "ticket" "regular" "sale" "buy"; align-content: start; min-width: 0; padding: 16px; background: #fff; border: 1px solid #d7e4e9; border-radius: 10px; }
  .eb-table .eb-c-name { grid-area: name; min-width: 0; font-size: 20px; line-height: 1.4; font-weight: 700; }
  .eb-table .eb-c-name .eb-ja { font-size: 15px; }
  .eb-table .eb-c-status { grid-area: status; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; }
  .eb-table .eb-c-status .eb-note { margin-top: 0; font-size: 15px; line-height: 1.5; }
  .eb-table .eb-c-ticket { grid-area: ticket; }
  .eb-table .eb-c-regular { grid-area: regular; }
  .eb-table .eb-c-sale { grid-area: sale; }
  .eb-table .eb-c-buy { grid-area: buy; }
  .eb-table td:not(.eb-c-status) { display: grid; grid-template-columns: 4.7em minmax(0, 1fr); column-gap: 10px; min-width: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid #edf2f4; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
  .eb-table td:not(.eb-c-status)::before { content: attr(data-label); grid-column: 1; grid-row: 1 / span 6; color: #5c7580; font-size: 15px; line-height: 1.7; font-weight: 700; }
  .eb-table td:not(.eb-c-status) > * { grid-column: 2; min-width: 0; }
  .eb-price { margin-top: 2px; font-size: 18px; }
  .eb-note { font-size: 15px; line-height: 1.6; }
  .eb-tag { font-size: 13px; }
  .eb-table-foot { font-size: 15px; line-height: 1.7; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .eb-table tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================== tips (reuses the green checklist band) */
.eb-tips .guide-checklist p a { color: #075f83; text-decoration: underline; text-underline-offset: 3px; }

/* ===================================================================== related pages */
.eb-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.eb-related li { min-width: 0; display: flex; }
.eb-related a { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid #d8e0e4; border-radius: 8px; background: #fff; color: #18242b; text-decoration: none; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; }
.eb-related a:hover, .eb-related a:focus-visible { border-color: #1595c6; box-shadow: 0 8px 22px rgba(24, 49, 61, 0.12); transform: translateY(-2px); }
.eb-related a:focus-visible { outline: 3px solid #f1b800; outline-offset: 3px; }
.eb-related h3 { margin: 0; color: #18242b; font-size: 20px; line-height: 1.4; letter-spacing: 0; }
.eb-related p { margin: 8px 0 16px; color: #536169; font-size: 15px; line-height: 1.7; letter-spacing: 0; }
.eb-related .guide-card-cta { margin-top: auto; }

/* ===================================================================== sources */
.eb-sources { margin: 40px 0 0; border-top: 1px solid #d8e0e4; }
.eb-sources summary { display: flex; align-items: center; gap: 8px; min-height: 48px; color: #075f83; font-size: 15px; line-height: 1.5; font-weight: 700; cursor: pointer; list-style: none; }
.eb-sources summary::-webkit-details-marker { display: none; }
.eb-sources summary::before { content: "+"; display: inline-block; width: 1em; text-align: center; font-weight: 800; }
.eb-sources[open] summary::before { content: "−"; }
.eb-sources-body { padding: 4px 0 8px; color: #3f5963; font-size: 13px; line-height: 1.7; letter-spacing: 0; }
.eb-sources-body p { margin: 0 0 10px; }
.eb-sources-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.eb-sources-list li { min-width: 0; }
.eb-sources-list strong { display: block; color: #193d4a; }
.eb-sources-list a { display: block; color: #1c6685; overflow-wrap: anywhere; text-underline-offset: 3px; }

/* ===================================================================== keep reading surfaces clear of the floating buttons
   (the same right gutter site-content.css gives the season table and the coach pages) */
@media (min-width: 601px) and (max-width: 1279px) {
  .article-band, .eb-tips { padding-right: 96px; }
  .article-hero { padding-right: 96px; }
}

/* ===================================================================== phones */
@media (max-width: 767px) {
  .article-band { padding: var(--sp-section, 48px) 16px; }
  .article-band .guide-section-heading { margin-bottom: var(--sp-head, 28px); }
  .article-lead p { font-size: 16px; line-height: 1.8; }
  .eb-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; }
  .eb-facts li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 14px 16px; }
  .eb-fact-num { white-space: nowrap; }
  .eb-fact-num { font-size: 24px; }
  .eb-fact-text { margin-top: 0; }
  .eb-deadlines-note { font-size: 15px; }
  .eb-dl-list li { font-size: 15px; }
  .eb-related { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .eb-related a { padding: 18px; }
  .eb-related p { font-size: 16px; }
  .eb-sources-body { font-size: 15px; }
  .eb-sources-list { grid-template-columns: minmax(0, 1fr); }
  .article-hero .article-meta { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .eb-related a { transition: none; }
  .eb-related a:hover, .eb-related a:focus-visible { transform: none; }
}