/* mobile.tasting-tile.css
   "Flight tile" — provningskort med dryckesordning.
   Confetti-varianten (V1c) ported från redesignen i Reshape vinsmak.se.

   Användning: lägg in i mobile.html EFTER mobile.components.css:
     <link rel="stylesheet" href="mobile.tasting-tile.css" />

   Förutsätter CSS-variabler från mobile.theme.css
   (--color-wine, --color-terracotta, --color-sun, --color-olive,
    --color-cream, --color-muted, --color-brown, --color-ink,
    --radius-md, --font-display, --font-body, --font-script).

   Klasser börjar med .mobile-tasting-flight-* så att de samexisterar
   med befintliga .mobile-tasting-wine-* utan kollision.
*/

/* ── List container ─────────────────────────────────────────── */
.mobile-tasting-flight-list {
  list-style: none;
  margin: 6px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Tile root ──────────────────────────────────────────────── */
.mobile-tasting-flight-tile {
  position: relative;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 10px 22px rgba(43, 11, 16, 0.10),
    0 0 0 1px rgba(246, 178, 60, 0.25);
  min-height: 102px;
  /* reset native button styling when used inside <button> */
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.mobile-tasting-flight-tile:focus-visible {
  outline: 2px solid var(--color-terracotta, #C96A3A);
  outline-offset: 3px;
}

/* highlight current wine — terracotta ring + subtle lift */
.mobile-tasting-flight-tile.is-current {
  box-shadow:
    0 14px 28px rgba(201, 106, 58, 0.22),
    0 0 0 2px var(--color-terracotta, #C96A3A);
  transform: translateY(-1px);
}

/* dim past / future wines slightly when one is current */
.mobile-tasting-flight-tile.is-done {
  opacity: 0.7;
}

/* ── Left panel — sun gradient + numeral + confetti ─────────── */
.mobile-tasting-flight-tile__panel {
  position: relative;
  flex: 0 0 100px;
  width: 100px;
  background:
    radial-gradient(
      120% 90% at 20% 20%,
      var(--color-sun, #F6B23C) 0%,
      var(--color-terracotta, #C96A3A) 70%,
      #A8451E 100%
    );
  overflow: hidden;
}

/* warm sun halo bottom-left */
.mobile-tasting-flight-tile__panel::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: -10px;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--color-sun, #F6B23C) 0%, transparent 65%);
  opacity: 0.8;
  pointer-events: none;
}

/* the big italic numeral */
.mobile-tasting-flight-tile__num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display, "Playfair Display", serif);
  font-style: italic;
  font-weight: 600;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  text-shadow:
    0 4px 0 rgba(90, 21, 32, 0.35),
    0 8px 14px rgba(90, 21, 32, 0.30);
  transform: rotate(-6deg);
  pointer-events: none;
}

/* slightly smaller numeral when the number is 2 digits */
.mobile-tasting-flight-tile__num--wide {
  font-size: 58px;
  letter-spacing: -0.06em;
}

/* curling streamer in the top-right corner of the panel */
.mobile-tasting-flight-tile__streamer {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 40px;
  height: 60px;
  transform: rotate(12deg);
  pointer-events: none;
}

/* ── Confetti dots ──────────────────────────────────────────── */
/* 8 deterministically positioned little rectangles. */
.mobile-tasting-flight-tile__confetti {
  position: absolute;
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.mobile-tasting-flight-tile__confetti--1 { left: 10%; top: 14%; width:  8px; height: 12px; background: var(--color-wine, #5A1520);       transform: rotate(-18deg); }
.mobile-tasting-flight-tile__confetti--2 { left: 62%; top:  8%; width:  6px; height: 10px; background: #fff;                               transform: rotate( 12deg); }
.mobile-tasting-flight-tile__confetti--3 { left: 78%; top: 34%; width:  9px; height: 13px; background: var(--color-olive, #6F7A2D);       transform: rotate( 25deg); }
.mobile-tasting-flight-tile__confetti--4 { left: 22%; top: 70%; width:  7px; height: 11px; background: var(--color-terracotta, #C96A3A); transform: rotate(-10deg); }
.mobile-tasting-flight-tile__confetti--5 { left: 50%; top: 58%; width:  6px; height: 10px; background: var(--color-wine, #5A1520);       transform: rotate( 30deg); }
.mobile-tasting-flight-tile__confetti--6 { left: 70%; top: 78%; width:  8px; height: 12px; background: #fff;                               transform: rotate(-22deg); }
.mobile-tasting-flight-tile__confetti--7 { left: 12%; top: 44%; width:  5px; height:  9px; background: var(--color-olive, #6F7A2D);       transform: rotate(  8deg); }
.mobile-tasting-flight-tile__confetti--8 { left: 88%; top: 16%; width:  6px; height: 10px; background: var(--color-wine, #5A1520);       transform: rotate( 18deg); }

/* ── Right content ──────────────────────────────────────────── */
.mobile-tasting-flight-tile__body {
  flex: 1;
  min-width: 0;
  padding: 12px 16px 12px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.mobile-tasting-flight-tile__kicker {
  font-family: var(--font-script, "Pacifico", "Caveat", cursive);
  font-size: 16px;
  line-height: 1;
  color: var(--color-terracotta, #C96A3A);
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 4px;
}

.mobile-tasting-flight-tile__producer {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-muted, #8B7465);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-tasting-flight-tile__name {
  margin: 1px 0 0;
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--color-ink, #1E1715);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-tasting-flight-tile__meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-brown, #5C3828);
}

/* small colored dot indicating wine type */
.mobile-tasting-flight-tile__type-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--color-wine, #5A1520);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.mobile-tasting-flight-tile__type-dot[data-wine-type="white"] { background: #E8C758; box-shadow: inset 0 0 0 1px rgba(111, 122, 45, 0.25); }
.mobile-tasting-flight-tile__type-dot[data-wine-type="rose"]  { background: #F0A1A1; box-shadow: inset 0 0 0 1px rgba(201, 106, 58, 0.25); }
.mobile-tasting-flight-tile__type-dot[data-wine-type="red"]   { background: var(--color-wine, #5A1520); }

.mobile-tasting-flight-tile__sep {
  flex-shrink: 0;
  width: 3px;
  height: 3px;
  border-radius: 99px;
  background: var(--color-muted, #8B7465);
}

.mobile-tasting-flight-tile__year {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 600;
  color: var(--color-wine, #5A1520);
}

/* ── Status pill (replaces "X/N har röstat" inline) ─────────── */
.mobile-tasting-flight-tile__status {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted, #8B7465);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mobile-tasting-flight-tile__status[data-state="all-voted"] {
  color: var(--color-leaf, #3F5F2A);
}

.mobile-tasting-flight-tile__status[data-state="current"] {
  color: var(--color-terracotta, #C96A3A);
  font-weight: 700;
}

/* trailing chevron / action area */
.mobile-tasting-flight-tile__trail {
  display: flex;
  align-items: center;
  padding-right: 14px;
  color: var(--color-muted, #8B7465);
}

.mobile-tasting-flight-tile__trail-btn {
  border: 0;
  background: var(--color-cream, #FFF4DF);
  color: var(--color-wine, #5A1520);
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(90, 21, 32, 0.15);
  cursor: pointer;
}

/* ── Smaller breakpoint: stack the panel narrower if needed ── */
@media (max-width: 360px) {
  .mobile-tasting-flight-tile__panel { flex: 0 0 84px; width: 84px; }
  .mobile-tasting-flight-tile__num   { font-size: 64px; }
  .mobile-tasting-flight-tile__body  { padding-left: 14px; padding-right: 12px; }
}