/* A DAY AT SMOKEY — sdilena komponenta (src/components/a-day.mjs).
   Figma COMPONENT 912:29605 (navy), svetla varianta 870:11867 (On the Hill), planovac 894:20199.
   Hodnoty calc(N * var(--u)) = design px pri 1920. */

.cs-aday {
  --ad-bg: var(--c-navy); --ad-fg: #fff; --ad-gold: #c49c51; --ad-line: #fff; --ad-cab: #fff; --ad-win: var(--c-navy);
  background: var(--ad-bg); color: var(--ad-fg); position: relative;
}
.cs-aday--light { --ad-bg: #fff; --ad-fg: var(--c-navy); --ad-line: var(--c-navy); --ad-cab: var(--c-navy-3); --ad-win: #fff; }
.cs-aday__in { max-width: var(--maxw); margin-inline: auto; padding: calc(80 * var(--u)) calc(108 * var(--u)) calc(67 * var(--u)); }
.cs-aday--light .cs-aday__in { padding-bottom: calc(80 * var(--u)); }

/* ---------------------------------------------------------------- hlavicka */
.cs-aday__head { position: relative; }
.cs-aday__eyebrow { font-weight: 700; font-size: max(12px, calc(16 * var(--u))); line-height: 1.45; color: var(--ad-gold); text-transform: uppercase; letter-spacing: 0; }
.cs-aday__h { font-weight: 800; font-size: max(30px, calc(45 * var(--u))); line-height: 1.449; text-transform: uppercase; letter-spacing: 0; }
.cs-aday--light .cs-aday__h { margin-top: calc(32 * var(--u)); }
.cs-aday__lead { margin-top: calc(32 * var(--u)); max-width: calc(1350 * var(--u)); font-weight: 400; font-size: max(17px, calc(24 * var(--u))); line-height: 1.45; letter-spacing: 0; }

/* prepinac sezon (jen s JS; ve Figme neni — viz report) */
.cs-aday__switch { position: absolute; right: 0; bottom: calc(14 * var(--u)); display: flex; gap: max(16px, calc(28 * var(--u))); }
.cs-aday__sw { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-size: max(12px, calc(14 * var(--u))); letter-spacing: .3px; text-transform: uppercase; color: inherit; }
.cs-aday__sw-track { position: relative; width: 38px; height: 20px; border-radius: 10px; border: 2px solid currentColor; opacity: .55; transition: opacity .2s, background-color .2s; }
.cs-aday__sw-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: currentColor; transition: transform .2s var(--ease); }
.cs-aday__sw[aria-pressed="true"] .cs-aday__sw-track { opacity: 1; background: currentColor; }
.cs-aday__sw[aria-pressed="true"] .cs-aday__sw-track::after { transform: translateX(18px); background: var(--ad-bg); }
.cs-aday__sw:hover .cs-aday__sw-track { opacity: 1; }

/* ---------------------------------------------------------------- sezona */
.cs-aday__season { margin-top: calc(92 * var(--u)); }
.cs-aday--light .cs-aday__season { margin-top: calc(32 * var(--u)); }
.cs-aday__hero { display: grid; grid-template-columns: calc(1000 * var(--u)) 1fr; gap: calc(40 * var(--u)); align-items: start; }
.cs-aday__hero-media { height: calc(420 * var(--u)); border-radius: 7px; overflow: hidden; background: rgba(127, 127, 127, .15); }
.cs-aday__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cs-aday__intro { display: flex; flex-direction: column; gap: calc(20 * var(--u)); max-width: calc(624 * var(--u) + 40px); }
.cs-aday__season--winter .cs-aday__intro { padding-top: calc(40 * var(--u)); }
.cs-aday__season-name { font-weight: 700; font-size: max(12px, calc(18 * var(--u))); line-height: 1.45; color: var(--ad-gold); text-transform: uppercase; letter-spacing: 0; }
.cs-aday__season-h { font-weight: 800; font-size: max(26px, calc(48 * var(--u))); line-height: 1.45; letter-spacing: 0; }
.cs-aday--light .cs-aday__season-h { font-size: max(26px, calc(45 * var(--u))); }
.cs-aday__season-p { font-weight: 400; font-size: max(16px, calc(23 * var(--u))); line-height: 1.452; letter-spacing: 0; }
.cs-aday__tags { font-weight: 700; font-size: max(11px, calc(14 * var(--u))); line-height: 1.45; color: var(--ad-gold); text-transform: uppercase; letter-spacing: 0; }

/* ---------------------------------------------------------------- lanovka se 4 zastavkami (1704 x 830) */
.cs-aday-stops { --ad-line: var(--c-navy); --ad-cab: var(--c-navy-3); --ad-win: #fff; position: relative; margin-top: calc(32 * var(--u)); padding-bottom: calc(42 * var(--u)); color: inherit; }
.cs-aday--navy .cs-aday-stops { --ad-line: #fff; --ad-cab: #fff; --ad-win: var(--c-navy); }
.cs-aday--light .cs-aday-stops { --ad-line: var(--c-navy); --ad-cab: var(--c-navy-3); --ad-win: #fff; }
.cs-aday__season--winter .cs-aday-stops { margin-top: calc(42 * var(--u)); }
.cs-aday-stops__cable { position: absolute; left: 0; top: 0; width: 100%; height: calc(320 * var(--u)); overflow: visible; pointer-events: none; }
.cs-aday-stops__cable line { stroke: var(--ad-line); stroke-width: 1.4; }
.cs-aday-stops__list { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(24 * var(--u)); align-items: start; }
.cs-aday-stop { position: relative; display: flex; flex-direction: column; }
.cs-aday-stop--1 { margin-top: calc(360 * var(--u)); }
.cs-aday-stop--2 { margin-top: calc(286 * var(--u)); }
.cs-aday-stop--3 { margin-top: calc(212 * var(--u)); }
.cs-aday-stop--4 { margin-top: calc(138 * var(--u)); }
.cs-aday-stop__hang { position: absolute; left: calc(180 * var(--u)); top: calc(-80 * var(--u)); width: calc(48 * var(--u)); height: calc(59 * var(--u)); color: var(--ad-cab); pointer-events: none; }
.cs-aday-stop__carriage { width: 100%; height: calc(19 * var(--u)); fill: currentColor; }
.cs-aday-stop__rod { position: absolute; left: calc(22 * var(--u)); top: calc(17 * var(--u)); width: calc(5 * var(--u)); height: calc(42 * var(--u)); background: currentColor; border-radius: 1px; }
.cs-aday-stop__media { height: calc(240 * var(--u)); border-radius: 7px; overflow: hidden; background: rgba(127, 127, 127, .15); }
.cs-aday-stop__media--alt { width: calc(396 / 408 * 100%); height: calc(246 * var(--u)); margin-bottom: calc(-6 * var(--u)); }
.cs-aday-stop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.cs-aday-stop:hover .cs-aday-stop__media img { transform: scale(1.03); }
.cs-aday-stop__eyebrow { margin-top: calc(16 * var(--u)); font-weight: 700; font-size: max(11px, calc(14 * var(--u))); line-height: 1.45; color: var(--ad-gold, #c49c51); text-transform: uppercase; letter-spacing: 0; }
.cs-aday-stop__h { margin-top: calc(16 * var(--u)); font-weight: 700; font-size: max(17px, calc(25 * var(--u))); line-height: 1.448; letter-spacing: 0; }
.cs-aday-stop__p { margin-top: calc(16 * var(--u)); font-weight: 400; font-size: max(14px, calc(19 * var(--u))); line-height: 1.4526; letter-spacing: 0; }

/* kabinka sledujici mys (Figma "Gondola / mouse-follow cabin", 36x48, klid na x=804 v ramu) */
.cs-aday-cabin {
  --t: var(--rest, .482);
  position: absolute; left: calc(-6 * var(--u)); top: calc(314 * var(--u)); width: calc(36 * var(--u)); height: calc(48 * var(--u)); min-width: 22px; min-height: 29px;
  color: var(--ad-cab); pointer-events: none; transform-origin: 50% 0;
  transform: translate(calc(1680 * var(--t) * var(--u)), calc(-296 * var(--t) * var(--u))) rotate(var(--sw, 0deg));
}
.cs-aday-cabin__svg { width: 100%; height: 100%; }
.cs-aday-cabin__grip, .cs-aday-cabin__body { fill: currentColor; }
.cs-aday-cabin__win, .cs-aday-cabin__line { fill: var(--ad-win); }

/* ---------------------------------------------------------------- tip + CTA (svetla varianta) */
.cs-aday__foot { display: flex; flex-direction: column; align-items: flex-start; }
.cs-aday__foot--cta { margin-top: calc(61 * var(--u)); }
.cs-aday__foot--cta .cs-aday__tip { margin-top: calc(14 * var(--u)); }
.cs-aday__foot--tip { margin-top: calc(55 * var(--u)); }
.cs-aday__foot--tip .cs-aday-cta { margin-top: calc(42 * var(--u)); }
.cs-aday__tip { max-width: calc(1154 * var(--u) + 120px); font-weight: 400; font-size: max(14px, calc(17 * var(--u))); line-height: 1.453; letter-spacing: 0; }
.cs-aday-cta { display: inline-flex; align-items: center; gap: calc(11 * var(--u)); min-height: max(48px, calc(67 * var(--u))); padding: 0 calc(21 * var(--u)) 0 calc(24 * var(--u)); border: 3px solid currentColor; border-radius: 7px; font-weight: 700; font-size: max(13px, calc(16 * var(--u))); line-height: 1.45; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); }
.cs-aday-cta span { min-width: calc(236 * var(--u)); }
.cs-aday-cta__arr { width: max(13px, calc(16 * var(--u))); height: auto; flex: none; }
.cs-aday--light .cs-aday-cta:hover { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.cs-aday--navy .cs-aday-cta:hover { background: #fff; color: var(--c-navy); border-color: #fff; }

/* ---------------------------------------------------------------- planovac (Figma 894:20199) */
.cs-aday-planner { background: #fff; color: var(--c-navy); }
.cs-aday-planner__in { max-width: var(--maxw); margin-inline: auto; padding: calc(32 * var(--u)) calc(108 * var(--u)) calc(19 * var(--u)); }
.cs-aday-planner__h { min-height: calc(67 * var(--u)); font-weight: 800; font-size: max(24px, calc(40 * var(--u))); line-height: 1.22; text-transform: uppercase; letter-spacing: 0; }
.cs-aday-planner__box { display: flex; flex-direction: column; gap: calc(26 * var(--u)); padding: calc(36 * var(--u)) 0; }
.cs-aday-planner__row { display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--u)); margin: 0; padding: 0; border: 0; min-width: 0; }
.cs-aday-planner__label { width: calc(152 * var(--u)); min-width: 90px; font-weight: 700; font-size: max(17px, calc(26 * var(--u))); line-height: 1.22; text-transform: uppercase; letter-spacing: 0; }
.cs-aday-opt { position: relative; display: inline-flex; align-items: center; gap: calc(12 * var(--u)); width: calc(240 * var(--u)); min-width: 150px; height: calc(56 * var(--u)); min-height: 44px; padding: 0 calc(18 * var(--u)); border: 2px solid var(--c-navy); border-radius: 7px; background: #fff; font-weight: 400; font-size: max(14px, calc(20 * var(--u))); line-height: 1.22; letter-spacing: 0; cursor: pointer; transition: background-color .2s; }
.cs-aday-opt--days { border-width: 3px; padding-left: calc(18 * var(--u) + 1px); }
.cs-aday-opt:hover { background: var(--c-bg); }
.cs-aday-opt__dot { position: relative; flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); min-width: 18px; min-height: 18px; border: 1.5px solid var(--c-navy); border-radius: 50%; }
.cs-aday-opt__dot::after { content: ""; position: absolute; inset: 0; margin: auto; width: 50%; height: 50%; border-radius: 50%; background: var(--c-navy); transform: scale(0); transition: transform .15s var(--ease); }
.cs-aday-opt[aria-current="true"] .cs-aday-opt__dot::after, .cs-aday-opt input:checked + .cs-aday-opt__dot::after { transform: scale(1); }
.cs-aday-opt:has(input:focus-visible) { outline: 3px solid var(--c-gold-2); outline-offset: 3px; }

/* ---------------------------------------------------------------- tablet / mobil */
@media (max-width: 1279px) {
  .cs-aday__switch { position: static; margin-top: 16px; }
}
@media (max-width: 1023px) {
  .cs-aday__in { padding: 64px var(--gut) 56px; }
  .cs-aday--light .cs-aday__in { padding-bottom: 64px; }
  .cs-aday__season, .cs-aday--light .cs-aday__season { margin-top: 48px; }
  .cs-aday__hero { grid-template-columns: 1fr; gap: 24px; }
  .cs-aday__hero-media { height: auto; aspect-ratio: 1000 / 420; }
  .cs-aday__intro { gap: 12px; max-width: 640px; }
  .cs-aday__season--winter .cs-aday__intro { padding-top: 0; }
  .cs-aday-stops, .cs-aday__season--winter .cs-aday-stops { margin-top: 32px; padding-bottom: 0; }
  .cs-aday-stops__cable, .cs-aday-stop__hang, .cs-aday-cabin { display: none; }
  .cs-aday-stops__list { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .cs-aday-stop--1, .cs-aday-stop--2, .cs-aday-stop--3, .cs-aday-stop--4 { margin-top: 0; }
  .cs-aday-stop__media, .cs-aday-stop__media--alt { width: 100%; height: auto; aspect-ratio: 408 / 240; margin-bottom: 0; }
  .cs-aday-stop__eyebrow { margin-top: 14px; }
  .cs-aday-stop__h, .cs-aday-stop__p { margin-top: 8px; }
  .cs-aday__foot--cta, .cs-aday__foot--tip { margin-top: 32px; }
  .cs-aday__foot--tip .cs-aday-cta { margin-top: 24px; }
  .cs-aday-planner__in { padding: 40px var(--gut) 8px; }
  .cs-aday-planner__box { gap: 16px; padding: 24px 0; }
  .cs-aday-planner__row { gap: 10px; }
  .cs-aday-planner__label { width: 100%; }
}
@media (max-width: 767px) {
  .cs-aday__in { padding: 48px 0 48px; }
  .cs-aday__head, .cs-aday__lead, .cs-aday__hero, .cs-aday__foot { padding-inline: 16px; }
  .cs-aday__hero-media { border-radius: 7px; }
  .cs-aday__lead { font-size: 16px; }
  .cs-aday-stops__list { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cs-aday-stops__list::-webkit-scrollbar { display: none; }
  .cs-aday-stop { flex: none; width: 78vw; max-width: 340px; scroll-snap-align: start; }
  .cs-aday-planner__in { padding-inline: 16px; }
  .cs-aday-opt { width: calc(50% - 5px); min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-aday-cabin { transform: translate(calc(1680 * var(--rest, .482) * var(--u)), calc(-296 * var(--rest, .482) * var(--u))); }
}