/* Early-bird trial pages (owner 11/06: "/early-bird 參考 /rental 給我 5 種樣式"): the frame every style shares
   (early-bird-frame.html): hero, three key numbers, the list section's title / lead / foot note, purchase tips, read-next
   links, sources and the small pieces the five resort lists share (status badges, 平台 tag, buy buttons, savings pill,
   notes). Builds on css/rental.css (load it first): the page's <main> is .rental-a.eb, so the rental page's .ra-* pieces
   (ra-hero, ra-head, ra-tip, ra-points, ra-acc, ra-addon, ra-flow, ra-end ...) work as they are. Each style adds its own
   css/eb-<x>.css after this file; site-type.css stays last. Phones follow site-type.css: body 16px, small text >= 15px. */

.rental-a.eb {
  --eb-on-bg: #e3f4ea; --eb-on-line: #b9e1c8; --eb-on: #136a41;
  --eb-end-bg: #f9e8ed; --eb-end-line: #efc4d2; --eb-end: #9b2347;
  --eb-tba-bg: #eef2f5; --eb-tba-line: #d3dce4; --eb-tba: #4d6174;
  --eb-save-bg: #fff1b8; --eb-save-line: #f1d36b;
  --eb-tag-bg: #fff3c8; --eb-tag-line: #e9c75a; --eb-tag: #5e4600;
  --eb-small: 15px; --eb-muted: #5d7488;
}

/* ===================================================================== hero (ra-hero from rental.css) */
.rental-a.eb .eb-hero__meta { max-width: 34em; margin-top: 8px; color: var(--ra-en); font-size: var(--eb-small); line-height: 1.6; }
/* the small picture top right on phones (calendar + ticket), placed like the rental page's mini rack */
.rental-a.eb .eb-mini { top: -8px; }
/* snow: phones keep two dots under the small picture, clear of the title, the ribbon and the lead (their line
   lengths change with the width, so nothing sits beside them) */
.rental-a.eb .ra-fl--1 { top: 66px; left: auto; right: 54px; }
.rental-a.eb .ra-fl--2 { top: 82px; left: auto; right: 22px; }
.rental-a.eb .ra-fl--3, .rental-a.eb .ra-fl--4, .rental-a.eb .ra-fl--5 { display: none; }
@media (min-width: 768px) {
  .rental-a.eb .ra-fl--3, .rental-a.eb .ra-fl--4, .rental-a.eb .ra-fl--5 { display: block; }
  .rental-a.eb .ra-fl--1 { top: 6px; right: 330px; }
  .rental-a.eb .ra-fl--2 { top: 56px; right: 300px; }
  .rental-a.eb .ra-fl--3 { top: 170px; right: 318px; }
  .rental-a.eb .ra-fl--4 { top: -8px; right: 26px; }
  .rental-a.eb .ra-fl--5 { top: 132px; right: -10px; }
}
@media (min-width: 1024px) {
  .rental-a.eb .ra-fl--1 { right: 356px; }
  .rental-a.eb .ra-fl--2 { top: 104px; right: 366px; }
  .rental-a.eb .ra-fl--3 { right: 344px; }
}

/* ===================================================================== three key numbers under the hero */
.rental-a.eb .eb-facts-sec { padding-top: 28px; }
.rental-a.eb .eb-facts { display: grid; gap: 12px; }
.rental-a.eb .eb-fact { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border: 1.5px solid var(--ra-line); border-radius: 18px; background: var(--ra-band); }
.rental-a.eb .eb-fact__icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ra-line); }
.rental-a.eb .eb-i40 { width: 36px; height: 36px; fill: none; stroke: var(--ra-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rental-a.eb .ra-tip__icon .eb-i40 { width: 40px; height: 40px; }
.rental-a.eb .eb-fact__body { min-width: 0; }
.rental-a.eb .eb-fact__num { display: block; color: var(--ra-ink); font-size: 28px; font-weight: 800; line-height: 1.2; letter-spacing: .01em; white-space: nowrap; }
.rental-a.eb .eb-fact__num small { margin-left: .08em; font-size: .62em; font-weight: 700; }
.rental-a.eb .eb-fact__text { display: block; margin-top: 2px; font-size: var(--eb-small); line-height: 1.55; }
@media (min-width: 768px) {
  .rental-a.eb .eb-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rental-a.eb .eb-fact { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; }
}
@media (min-width: 1024px) {
  .rental-a.eb .eb-facts-sec { padding-top: 36px; }
  .rental-a.eb .eb-fact { flex-direction: row; align-items: center; gap: 16px; }
  .rental-a.eb .eb-fact__num { font-size: 30px; }
}

/* ===================================================================== the resort list section (between EB-LIST markers) */
.rental-a.eb .eb-lead { max-width: 46em; margin-bottom: var(--ra-hd); }
.rental-a.eb .eb-lead p + p { margin-top: 6px; }
.rental-a.eb .eb-foot { max-width: 52em; margin-top: var(--ra-hd); color: var(--eb-muted); font-size: var(--eb-small); line-height: 1.7; }
.rental-a.eb .eb-frame-note { padding: 48px 16px; border: 2px dashed var(--ra-line-2); border-radius: 20px; color: var(--eb-muted); text-align: center; }

/* ===================================================================== shared pieces of the resort lists */
/* status badge: 販售中 (on), 已結束 (ended, set by js/eb-status.js once the deadline has passed), 未公布 (tba) */
.rental-a.eb .eb-status {
  display: inline-flex; align-items: center; flex: none; padding: 1px 10px; border: 1.5px solid transparent; border-radius: 999px;
  font-size: var(--eb-small); font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.rental-a.eb .eb-status[data-eb-status="on"] { background: var(--eb-on-bg); border-color: var(--eb-on-line); color: var(--eb-on); }
.rental-a.eb .eb-status[data-eb-status="ended"] { background: var(--eb-end-bg); border-color: var(--eb-end-line); color: var(--eb-end); }
.rental-a.eb .eb-status[data-eb-status="tba"] { background: var(--eb-tba-bg); border-color: var(--eb-tba-line); color: var(--eb-tba); }
.rental-a.eb .eb-status-note { color: var(--ra-text); font-size: var(--eb-small); line-height: 1.6; }
.rental-a.eb .is-ended .eb-status-note { display: none; }   /* as on the live page: 已結束 replaces the sale note */
.rental-a.eb .eb-ended-chip { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--eb-end-bg); color: var(--eb-end); font-size: var(--eb-small); font-weight: 700; line-height: 1.6; white-space: nowrap; }
/* prices: the early-bird price in the rental page's discount red; muted once the sale has ended */
.rental-a.eb .eb-price { color: var(--ra-red); font-weight: 800; white-space: nowrap; }
.rental-a.eb .is-ended .eb-price { color: #7b8fa1; }
.rental-a.eb .eb-save {
  display: inline-block; padding: 0 10px; border: 1.5px solid var(--eb-save-line); border-radius: 999px; background: var(--eb-save-bg);
  color: var(--ra-ink); font-size: var(--eb-small); font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.rental-a.eb .eb-save--same { border-color: var(--eb-tba-line); background: var(--eb-tba-bg); color: var(--eb-tba); }
.rental-a.eb .eb-dot { color: var(--eb-muted); }
.rental-a.eb .eb-ja { color: var(--eb-muted); font-size: var(--eb-small); font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.rental-a.eb .eb-note { display: block; color: var(--ra-text); font-size: var(--eb-small); font-weight: 400; line-height: 1.6; }
.rental-a.eb .eb-bnote { color: var(--ra-text); font-size: var(--eb-small); line-height: 1.6; }
/* resort names link to the resort pages: navy text with a soft underline */
.rental-a.eb a.eb-name, .rental-a.eb .eb-name a { color: var(--ra-ink); text-decoration: underline; text-decoration-color: var(--ra-line-2); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.rental-a.eb a.eb-name:hover, .rental-a.eb .eb-name a:hover { color: var(--ra-blue); text-decoration-color: currentColor; }
/* 平台: the five purchase links that go to ticket platforms, not to the resort */
.rental-a.eb .eb-tag {
  display: inline-block; flex: none; padding: 0 7px; border: 1px solid var(--eb-tag-line); border-radius: 6px; background: var(--eb-tag-bg);
  color: var(--eb-tag); font-size: 14px; font-weight: 700; line-height: 1.55; letter-spacing: .04em; text-decoration: none;
}
/* buy buttons: plain outline pills (owner 11/04: function buttons look like any clean site), filled on hover */
.rental-a.eb .eb-btns { display: grid; gap: 8px; }
.rental-a.eb .eb-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 14px;
  border: 2px solid var(--ra-blue); border-radius: 999px; background: #fff; color: var(--ra-blue);
  font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; transition: background-color .3s, color .3s;
}
.rental-a.eb .eb-btn:hover { background: var(--ra-blue); color: #fff; }
.rental-a.eb .eb-btn:hover .eb-tag { border-color: #fff; }
.rental-a.eb .eb-btn:focus-visible { outline: 3px solid var(--ra-ink); outline-offset: 3px; }
/* a long label breaks at its bracket (SURF&SNOW / （電子票）), not inside a word */
.rental-a.eb .eb-btn__t { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
.rental-a.eb .eb-btn .ra-ico { width: 16px; height: 16px; }
/* point lists inside a card (calendar / star / tag icons, as the rental tickets' points) */
.rental-a.eb .eb-points { gap: 6px; margin-top: 10px; }
.rental-a.eb .eb-points li { font-size: var(--eb-small); line-height: 1.6; }
.rental-a.eb .eb-points .ra-pi { margin-top: calc((1.6em - 18px) / 2); }

/* ===================================================================== dotted line with a snowflake before the tips */
.rental-a.eb .eb-sep {
  width: var(--ra-w); height: 26px; margin: var(--ra-sec) auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Ccircle cx='13' cy='13' r='13' fill='%23fff'/%3E%3Cpath d='M13 4.5v17M5.6 8.7l14.8 8.6M5.6 17.3l14.8-8.6' fill='none' stroke='%234edce9' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
    radial-gradient(circle, var(--ra-line-2) 1.6px, transparent 2.1px) center / 12px 12px repeat-x;
}
.rental-a.eb .eb-sep + .ra-sec { padding-top: calc(var(--ra-sec) * .75); }

/* ===================================================================== purchase tips (ra-tip from rental.css) */
.rental-a.eb .eb-tips .ra-tips__list { margin-top: 4px; }
.rental-a.eb .eb-faq { margin-top: calc(var(--ra-hd) + 4px); }
.rental-a.eb .eb-faq__link { display: inline-flex; flex: none; gap: 6px; max-width: 100%; }
@media (min-width: 1024px) {
  .rental-a.eb .eb-tips .ra-tips__list { row-gap: 40px; }
}

/* ===================================================================== read next + sources, on the closing dotted chapter */
.rental-a.eb .eb-ch3 { padding-top: calc(var(--ra-ch) - var(--ra-sec) / 2); }
.rental-a.eb .eb-rel { display: grid; gap: 12px; }
.rental-a.eb .eb-rel__card {
  display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 16px 18px; border: 1.5px solid var(--ra-line); border-radius: 20px;
  background: #fff; box-shadow: var(--ra-shadow); color: var(--ra-text); text-decoration: none; transition: border-color .3s;
}
.rental-a.eb .eb-rel__card:hover { border-color: var(--ra-blue); }
.rental-a.eb .eb-rel__card:focus-visible { outline: 3px solid var(--ra-ink); outline-offset: 3px; }
.rental-a.eb .eb-rel__icon { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--ra-ice); }
.rental-a.eb .eb-rel__body { display: flex; flex-direction: column; min-width: 0; }
.rental-a.eb .eb-rel__cat { color: var(--ra-en); font-size: var(--eb-small); font-weight: 700; line-height: 1.5; }
.rental-a.eb .eb-rel__title { color: var(--ra-ink); font-size: 18px; font-weight: 700; line-height: 1.45; }
.rental-a.eb .eb-rel__text { margin-top: 4px; font-size: var(--eb-small); line-height: 1.65; }
.rental-a.eb .eb-rel__cta { margin-top: 6px; color: var(--ra-blue); font-size: var(--eb-small); font-weight: 700; }
@media (min-width: 768px) {
  .rental-a.eb .eb-rel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .rental-a.eb .eb-rel__card { flex-direction: column; gap: 10px; }
}
.rental-a.eb .eb-src-sec { padding: calc(var(--ra-sec) / 2) 0 calc(var(--ra-sec) / 2); }
.rental-a.eb .eb-src__note { color: var(--eb-muted); font-size: var(--eb-small); line-height: 1.6; }
.rental-a.eb .eb-src { margin-top: 4px; }
.rental-a.eb .eb-src summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ra-blue); font-size: var(--eb-small); font-weight: 700;
  line-height: 1.5; cursor: pointer; list-style: none;
}
.rental-a.eb .eb-src summary::-webkit-details-marker { display: none; }
.rental-a.eb .eb-src summary::before { content: "+"; display: inline-block; width: 1em; font-weight: 800; text-align: center; }
.rental-a.eb .eb-src[open] summary::before { content: "−"; }
.rental-a.eb .eb-src__body { padding: 2px 0 8px; color: var(--ra-text); font-size: var(--eb-small); line-height: 1.7; }
.rental-a.eb .eb-src__body > p { margin-bottom: 10px; }
.rental-a.eb .eb-src__list { display: grid; gap: 10px 28px; }
.rental-a.eb .eb-src__list li { min-width: 0; }
.rental-a.eb .eb-src__list strong { display: block; }
.rental-a.eb .eb-src__list a { display: block; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .rental-a.eb .eb-src__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}