/* efyges.gr — /deals/ subpage styles.
   Inherits ALL tokens from ../style.css (:root). Adds only deal/category-specific
   components. No token redefinition — single source of truth stays in style.css. */

/* ─── Subpage hero (compact, navy, photo-backed) ─────────────────────── */
.subhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--navy);
  color: var(--paper);
  padding-block: clamp(116px, 18vh, 200px) clamp(48px, 8vh, 88px);
}
.subhero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.subhero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(26, 31, 58, 0.40) 0%, rgba(26, 31, 58, 0.55) 45%, rgba(26, 31, 58, 0.82) 100%),
    radial-gradient(120% 90% at 82% 4%, rgba(14, 155, 245, 0.14), transparent 58%);
}
/* No real photo → brand gradient (--ink → --accent). Suppress the photo
   readability overlay so the brand gradient shows; title stays on dark ink. */
.subhero__bg--gradient {
  background:
    radial-gradient(130% 100% at 88% 120%, rgba(240, 72, 0, 0.45), transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy) 55%, var(--accent) 165%);
}
.subhero__bg--gradient::after { background: none; }
/* Unsplash attribution — small, discreet, bottom-right */
.subhero__credit {
  position: absolute;
  right: clamp(12px, 3vw, 28px);
  bottom: clamp(10px, 2vh, 18px);
  z-index: 2;
  margin: 0;
  font-family: var(--body);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: var(--canvas-78);
  background: rgba(26, 31, 58, 0.55);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.subhero > .container {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Eyebrow on 2 lines: back-link (line 1) stacked above the route eyebrow (line 2).
   `display:flex` makes the back-link a block-level box so the eyebrow drops below. */
.subhero__back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--canvas-78);
  text-decoration: none;
  margin-bottom: 0.6rem;
  transition: color 180ms var(--ease);
}
.subhero__back:hover { color: var(--accent); }
.subhero .eyebrow--on-dark { display: inline-flex; }
.subhero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin-top: 0.25rem;
}
.subhero__title em { font-style: italic; color: var(--accent); }
/* City on line 1 (keeps the big italic accent), "— N νύχτες" on line 2 below */
.subhero__city, .subhero__nights { display: block; }
.subhero__nights {
  white-space: nowrap;
  font-size: 0.6em;            /* smaller than the city headline */
  font-weight: 600;
  color: var(--canvas-78);
  letter-spacing: -0.01em;
  margin-top: 0.15em;
}
.subhero__sub {
  font-family: var(--body);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--canvas-78);
  max-width: 52ch;
  margin-top: 1.25rem;
}
/* Hero meta always on 2 lines: date range, then "N νύχτες · 2 άτομα" */
.subhero__meta-line { display: block; }

/* ─── Deals listing section ──────────────────────────────────────────── */
.deals-list { background: var(--canvas); color: var(--ink); }
.deals-list .category-bento { margin-top: 0; }

/* Empty-state (category pages with no deals yet) */
.deals-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding: clamp(40px, 7vw, 80px);
  border: 1.5px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.deals-empty__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.deals-empty__body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-65);
  max-width: 70ch; /* one-line empty-state body */
}

/* ─── Deal page layout ───────────────────────────────────────────────── */
.deal { background: var(--canvas); color: var(--ink); }
/* Gap above the intro: tight on mobile, more breathing room @desktop (width-based,
   so mobile stays tight regardless of viewport height). */
.section.deal { padding-top: 24px; }
@media (min-width: 768px) { .section.deal { padding-top: 56px; } }
/* Intro lead: full container width (no orphan left column / right gap) + small
   gap to the panel. Higher specificity beats the generic .deal__lead 60ch cap. */
.section.deal .deal__intro { max-width: none; margin-bottom: clamp(14px, 2vh, 22px); }

/* ─── Unified TRIP card: photo zone | navy content, ONE frame ─────────────
   ROOT-CAUSE FIX for the empty-gap: the CARD HEIGHT is defined by the navy
   CONTENT (natural flow). The photo zone fills that height via
   object-fit:cover + height:100%. A text box is NEVER stretched, given a
   min-height, or height:100% — so an internal gap can't form by construction. */
.trip-card {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: photo on top, content below */
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy);              /* navy card */
  color: var(--paper);
  margin-bottom: clamp(28px, 4.5vh, 48px);
}
@media (min-width: 768px) {
  .trip-card { grid-template-columns: 40% 1fr; }   /* desktop: photo | content */
}
/* Photo zone — card height is defined by the navy content ONLY. The photo cell
   contributes ZERO intrinsic height: the IMG is absolutely positioned, so a
   portrait/landscape/any-ratio source can never push the card taller. The cell
   is stretched to the body's height by the grid; the absolute img cover-fills
   it (crop), never distorts. */
.trip-card__photo { position: relative; overflow: hidden; background: var(--surface-2); }
.trip-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  /* mobile stacked: no body beside it → give the banner a stable 16/9 height */
  .trip-card__photo { aspect-ratio: 16 / 9; }
}
.trip-card__photo-cap {
  position: absolute; left: 12px; bottom: 12px;
  font-family: var(--body); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(26, 31, 58, 0.6);
  padding: 0.25rem 0.6rem; border-radius: 999px; backdrop-filter: blur(4px);
}
/* Content zone — natural flow defines the card height (NO stretch/min-height). */
.trip-card__body {
  padding: clamp(20px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.trip-card__hotel { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--paper); }
.trip-card__rating { color: var(--accent); font-weight: 700; white-space: nowrap; }
.trip-card__eyebrow {
  font-family: var(--body); font-weight: 600; font-size: 0.75rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin-top: 0.5rem;
}
.trip-card__price {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.25rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--paper);
}
/* T2 (2026-06-11, Leo's pick): unit inline αλλά υποχωρεί — μικρότερο,
   ελαφρύτερο, πιο muted, λίγο extra spacing από το ποσό. */
.trip-card__unit { font-size: 0.82rem; font-weight: 500; color: rgba(250, 250, 250, 0.55);
  margin-left: 0.45rem; letter-spacing: 0.01em; }
.trip-card__break {
  font-family: var(--body); font-size: 0.875rem; line-height: 1.65;
  color: var(--canvas-78);
  padding: 0.85rem 0; margin: 0.35rem 0;
  border-top: 1px solid var(--canvas-14); border-bottom: 1px solid var(--canvas-14);
}
.trip-card__break strong { color: var(--paper); font-weight: 700; }
.trip-card__break-basis { color: var(--canvas-55); }
.trip-card__flag {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 0.04rem 0.42rem; border-radius: 999px; white-space: nowrap;
  vertical-align: middle; margin-left: 0.2rem; letter-spacing: 0.01em;
}
.trip-card__flag--direct { color: var(--accent); background: var(--canvas-14); }
.trip-card__flag--stops  { color: var(--canvas-55); background: var(--canvas-14); }
.trip-card .btn { width: 100%; margin-top: 0.5rem; }
.trip-card__ctas { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.trip-card__ctas .btn { flex: 1 1 0; width: auto; margin-top: 0; text-align: center;
  padding-inline: 0.6rem; min-width: 0; }
.trip-card__ctas--three .btn { padding-inline: 0.4rem; font-size: 0.84rem; line-height: 1.25;
  white-space: normal; }   /* allow long labels to wrap inside their flex-third — base .btn is nowrap, which overflowed "Ξενοδοχεία της πόλης" in the 768-960px row zone */
@media (max-width: 767px) {
  .trip-card__ctas { flex-direction: column; }            /* 3 long-label btns stack on mobile — no overflow */
  .trip-card__ctas .btn { width: 100%; }
  .trip-card__ctas--three .btn { padding-inline: 0.6rem; font-size: 0.9375rem; }  /* stacked → readable */
}
.trip-card__cta-note { font-size: 0.75rem; color: var(--canvas-55); text-align: center; }
.trip-card__stay-note { font-size: 0.8125rem; color: var(--canvas-78); margin-top: 0.35rem; }
.trip-card__disclaimer { font-size: 0.72rem; line-height: 1.5; color: var(--canvas-55); }

.deal__block { margin-bottom: clamp(32px, 5vh, 56px); }
.deal__block:last-child { margin-bottom: 0; }
.deal__h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.25rem;
}
.deal__lead {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-65);
  max-width: 60ch;
}
/* Attractions intro: the 60ch cap orphaned "πλατφόρμες." on a 2nd line @desktop.
   Drop the cap (full-width attractions block fits it on one line) + balance any
   residual wrap. Mobile wraps naturally to container width. */
.deal__block:has(.act-cards) .deal__lead {
  max-width: none;
  text-wrap: balance;
  margin-bottom: clamp(10px, 1.4vh, 16px);
}
/* Mobile: shrink the attractions intro so it sits in ~1.5 lines (was 3).
   Desktop stays one line (unaffected — this only applies ≤767px). */
@media (max-width: 767px) {
  .deal__block:has(.act-cards) .deal__lead {
    font-size: 0.8125rem;
    line-height: 1.3;
  }
}

/* Price card (sticky aside) */
.price-card {
  background: var(--navy);
  color: var(--paper);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 32px);
  box-shadow: 0 18px 48px -28px rgba(26, 31, 58, 0.55);
}
.price-card__eyebrow {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.price-card__amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.price-card__unit { font-size: 1rem; font-weight: 600; color: var(--canvas-78); }
.price-card__note { font-size: 0.8125rem; color: var(--canvas-55); margin-top: 0.4rem; }
.price-card__break {
  list-style: none;
  margin: 1.5rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--canvas-14);
  border-bottom: 1px solid var(--canvas-14);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.price-card__break li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--body);
  font-size: 0.9375rem;
  color: var(--canvas-78);
}
.price-card__break li span:last-child { color: var(--paper); font-weight: 600; }
.price-card .btn { width: 100%; margin-top: 0.25rem; }
.price-card__cta-note { font-size: 0.75rem; color: var(--canvas-55); text-align: center; margin-top: 0.75rem; }

/* Hotel block */
.hotel-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
}
@media (min-width: 560px) {
  .hotel-card { grid-template-columns: 200px 1fr; }
}
/* Photo fills the card width at a stable 4/3 — proportional, never a letterboxed strip */
.hotel-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.hotel-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hotel-card__body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.hotel-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.hotel-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-family: var(--body);
  font-size: 0.875rem;
  color: var(--ink-65);
}
.hotel-card__rating { color: var(--accent-deep); font-weight: 700; }
.hotel-card__price { font-weight: 700; color: var(--ink); }
.hotel-card__foot { margin-top: auto; padding-top: 0.75rem; }
.hotel-card .btn--secondary { color: var(--ink); border-color: var(--ink-28); }
.hotel-card .btn--secondary:hover { color: var(--accent); border-color: var(--accent); }
/* Disabled "Κράτηση — σύντομα": intentional soft-filled state (not a hollow ghost) */
.hotel-card .btn--secondary:disabled,
.hotel-card .btn--secondary[disabled] {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-65);
  font-weight: 600;
  cursor: default;
  opacity: 1;
}
.hotel-card .btn--secondary:disabled:hover,
.hotel-card .btn--secondary[disabled]:hover {
  color: var(--ink-65);
  border-color: var(--border);
  transform: none;
}

/* Activities + ancillaries grids */
.act-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .act-grid { grid-template-columns: repeat(2, 1fr); } }
.act {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.act:hover { border-color: var(--accent); transform: translateY(-2px); }
.act__name { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); }
.act__cta { font-family: var(--body); font-weight: 600; font-size: 0.875rem; color: var(--blue); margin-top: auto; }

.ancillaries {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
}
.ancillaries li {
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-65);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
}

/* Trust + disclosure */
.trust {
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}
.trust__title { font-family: var(--display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); margin-bottom: 0.4rem; }
.trust__body { font-family: var(--body); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-65); }
.deal-disclosure {
  font-family: var(--body);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 1.5rem;
}

/* ─── Experiences: non-linked tour-name chips + fixed CTAs (v2) ───────── */
/* Attraction cards: name + 1-2 line description + per-activity tickets CTA.
   2-col desktop / 1-col mobile, balanced grid. */
.act-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2-col on mobile AND desktop */
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}
@media (min-width: 768px) { .act-cards { gap: 0.5rem; } }   /* desktop compact: tighter grid */
/* odd number of cards: the lone last card centers at one-column width (no empty cell beside it) */
.act-cards > .act-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 0.45rem) / 2);
}
@media (min-width: 768px) {
  .act-cards > .act-card:last-child:nth-child(odd) { width: calc((100% - 0.5rem) / 2); }
}
.act-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.85rem 0.8rem;
  border: 1px solid transparent;          /* navy cell — transparent border in ALL states, no orange accent */
  border-radius: 10px;
  background: var(--navy);                 /* single navy block: photo banner + all text inside */
  overflow: hidden;
}
.act-card--img { padding-top: 0; }
.act-card__img {
  display: block;
  width: calc(100% + 1.7rem);
  max-width: none;          /* override global img{max-width:100%} — full-bleed banner, no right gap */
  margin: 0 -0.85rem 0.4rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: var(--border);
}
/* .act-card:hover removed 2026-06-09 (de-glitch pass): static photo, no lift/shadow/orange-border in any state (hover/active/focus/tap). */
.act-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: #fff;
}
.act-card__desc {
  font-family: var(--body);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #fff;
}
.act-card__meta {
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffd166;
  margin: 0.1rem 0 0.15rem;
}
.act-card__cta {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--blue);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.25rem;
  transition: color 160ms var(--ease);
}
.act-card__cta:hover { color: var(--accent); }
/* Mobile: 2-col grid at ~170px/col → tighten padding + fonts so it stays
   readable with no overflow/hscroll. */
@media (max-width: 767px) {
  .act-card { padding: 0.55rem 0.6rem 0.6rem; gap: 0.18rem; border-radius: 8px; }
  .act-card__name { font-size: 0.85rem; line-height: 1.18; }
  .act-card__desc { font-size: 0.74rem; line-height: 1.35; }
  .act-card__cta { font-size: 0.74rem; padding-top: 0.2rem; }
  .act-card__img { width: calc(100% + 1.2rem); margin: 0 -0.6rem 0.4rem; }
}
@media (min-width: 768px) {
  /* desktop compact: tighter cell padding (placed AFTER base so it wins; */
  /* individual sides keep the photo flush via .act-card--img padding-top:0) */
  .act-card { padding-left: 0.5rem; padding-right: 0.5rem; padding-bottom: 0.5rem; }
}
.experiences__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.experiences__ctas .btn { flex: 1 1 0; min-width: 200px; text-align: center; padding-block: 0.75rem; }

/* ─── Travel toolkit (replaces "Καλό να έχεις") ──────────────────────── */
.toolkit__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* mobile: 2-col, compact */
  gap: 10px;
}
@media (min-width: 768px) { .toolkit__grid { grid-template-columns: repeat(3, 1fr); gap: 9px; } }
/* Toolkit intro: full-width subtext (the generic .deal__lead 60ch cap left an
   empty region right of the text — heading + grid are full-width). */
.deal__block:has(.toolkit__grid) .deal__lead { max-width: none; margin-bottom: 0.85rem; }
.tool-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.55rem;
  padding: 0.6rem 0.7rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.tool-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);   /* 2026-06-11 sweep: ελαφρώς πιο αισθητό lift */
  box-shadow: 0 14px 32px -22px rgba(26, 31, 58, 0.45);
}
/* icon sits LEFT of the text column, top-aligned with the title */
.tool-card__icon {
  font-size: 1.15rem;
  line-height: 1;
  flex: none;
  width: 1.4rem;
  text-align: center;
  align-self: flex-start;
  margin-top: 0.1rem;
}
.tool-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}
.tool-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* small muted "via <brand>" byline under the service title */
.tool-card__brand {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin-top: -0.1rem;
}
.tool-card__desc {
  font-family: var(--body);
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--ink-65);
}
/* 2026-06-11 v2 (Leo's pick — V-soft): «Κλείσε →» TONAL κουμπί — απαλό
   tint (~10% CTA blue) + μπλε bold κείμενο· card hover → γεμίζει full CTA
   blue/λευκό. (Το filled ×7 βγήκε χονδροειδές· το outline ×7 = πλαίσιο-
   μέσα-σε-πλαίσιο σε grid που ήδη ζει από borders.) */
.tool-card__cta {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--blue);
  background: rgba(14, 155, 245, 0.10);
  align-self: flex-start;
  padding: 0.32rem 0.75rem;
  border-radius: 8px;
  margin-top: auto;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.tool-card:hover .tool-card__cta { background: var(--blue); color: #fff; }
.badge--premium {
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.tool-card--request {
  border-style: dashed;
  border-color: var(--ink-28);
  background: var(--surface-2);
}
@media (min-width: 768px) {
  .tool-card--request {
    /* 2026-06-11: @desktop FULL-WIDTH τελευταία σειρά — συνειδητό κλείσιμο.
       @mobile (2-col) ΟΧΙ full-width: γεμίζει το ορφανό slot δίπλα στην
       «Αποζημίωση πτήσης» (Leo 2026-06-11). */
    grid-column: 1 / -1;
  }
}

/* ── «Λείπει κάτι;» (2026-06-11 v2): το email = το CTA — ορατό, bold/accent,
   copy-able text + mailto. (Η inline FormSubmit φόρμα ΑΦΑΙΡΕΘΗΚΕ — activation
   εξάρτηση + νεκρό κουμπί για όσους δεν έχουν mail client ΛΥΘΗΚΕ με ορατό
   copy-able email.) ── */
.tk-req-mail { font-weight: 800; color: var(--accent-deep); text-decoration: underline;
  text-underline-offset: 2px; }
.tk-req-mail:hover { color: var(--accent); }
/* dark: accent-deep σε σκούρα κάρτα = ~3.2:1 → φωτεινό accent για AA */
html[data-theme="dark"] .tk-req-mail { color: var(--accent); }
html[data-theme="dark"] .tk-req-mail:hover { color: #FF8A55; }
.tool-card--request:hover { border-color: var(--accent); }
.tool-card--request .tool-card__cta { background: rgba(255, 107, 44, 0.12); color: var(--accent); }
.tool-card--request:hover .tool-card__cta { background: var(--accent); color: #fff; }

/* Mobile compact (≤767px): tighter cards so the 2-col grid packs cleanly */
@media (max-width: 767px) {
  .tool-card { padding: 0.6rem 0.65rem 0.7rem; gap: 0.5rem; }
  .tool-card__body { gap: 0.18rem; }
  .tool-card__icon { font-size: 1.2rem; width: 1.3rem; }
  .tool-card__name { font-size: 0.88rem; gap: 0.3rem; }
  .tool-card__desc { font-size: 0.74rem; line-height: 1.3; }
  .tool-card__cta { font-size: 0.72rem; padding: 0.28rem 0.6rem; }
  .badge--premium { font-size: 0.5rem; padding: 0.1rem 0.35rem; }
}

/* Footer — tighter on mobile (deal-pages only; desktop + homepage untouched).
   Overrides ../style.css base; deals.css loads after it so these win ≤767px. */
@media (max-width: 767px) {
  .footer { padding-block: 40px 24px; }
  .footer__inner { gap: 24px; }
  .footer__brand-logo { height: 54px; }
  .footer__motto { margin-top: 0.6rem; font-size: 1.25rem; }
  .footer__copy { margin-top: 0.6rem; line-height: 1.5; }
  .footer__h { margin-bottom: 0.6rem; }
  .footer__nav, .footer__social { gap: 0.4rem; }
  .footer__nav a, .footer__social a { padding: 0.15rem 0; }
  .footer__meta { margin-top: 0.6rem; }
  .footer__rule { margin-top: 28px; }
  .footer__bottom { padding-top: 16px; gap: 0.5rem 1.5rem; }
}

/* ─── etoimo.gr conversion strip (full-bleed navy, orange CTA) ────────── */
.etoimo-strip { background: var(--navy); color: var(--paper); }
.etoimo-strip__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(12px, 2vw, 20px);
  padding-block: clamp(28px, 4.5vh, 52px);
}
/* copy block: title + sub centered on one axis (body max-width was
   left-aligning within the wider copy block → crooked) */
.etoimo-strip__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.etoimo-strip__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.375rem, 3vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--paper);
}
.etoimo-strip__body {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--canvas-78);
  margin-top: 0.5rem;
  max-width: 46ch;
}
.nowrap { white-space: nowrap; }
/* compact, lighter CTA — auto-width, never wide/heavy */
.etoimo-strip__cta {
  background: var(--accent);
  color: #fff;
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.6rem 1.4rem;
  min-height: 40px;
  margin-top: 0.25rem;
}
@media (min-width: 768px) { .etoimo-strip__cta { max-width: 48%; } }
.etoimo-strip__cta:hover { filter: brightness(1.08); transform: translateY(-2px); }


/* ═══ 2026-06-11 (Leo): hero ιεραρχία + 2-σειρές breakdown + ενιαίο etoimo band ═══
   V1 styling locked: navy τίτλος 600 σε πορτοκαλί gradient, navy CTA άσπρο κείμενο.
   Το band είναι grid child του .trip-card (grid-column 1/-1) — κοινό frame/radius,
   0 gap. Το €/μέρα ΔΕΝ εμφανίζεται στη δημόσια σελίδα (dashboard/record μόνο). */
.trip-card__price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.trip-card__price-main{font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,5.6vw,3.1rem);line-height:1;letter-spacing:-.03em;color:var(--paper)}
.trip-card__unit{font-size:.82rem}   /* T2: ίδιο μέγεθος και @desktop block */
.trip-card__break-line{display:block}
.trip-card__break-line + .trip-card__break-line{margin-top:.34rem}
/* σφιχτότερα κάθετα gaps στο navy body */
.trip-card__body{gap:.3rem;padding:clamp(18px,2.3vw,26px)}
.trip-card__eyebrow{margin-top:.25rem}
.trip-card__break{padding:.55rem 0;margin:.25rem 0}
.trip-card .btn{margin-top:.3rem}
.trip-card__cta-note{margin-top:.15rem}
.trip-card__disclaimer{margin-top:.1rem}
/* ενιαίο etoimo band — κάτω ζώνη της κάρτας */
.trip-card__etoimo{grid-column:1/-1;background:linear-gradient(120deg,var(--accent),var(--accent-deep));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.5rem clamp(20px,2.3vw,26px)}
.trip-card__etoimo-title{font-family:var(--display);font-weight:600;
  font-size:clamp(.875rem,1.7vw,1rem);color:var(--navy);letter-spacing:.01em}
.trip-card__etoimo-body{font-family:var(--body);font-size:.9rem;
  color:rgba(255,255,255,.85);margin-top:.1rem}
.trip-card__etoimo-cta{background:var(--navy);color:#fff;font-weight:700;font-size:.8125rem;
  padding:.4rem 1rem;border-radius:8px;text-decoration:none;white-space:nowrap;flex-shrink:0}
.trip-card__etoimo-cta:hover{filter:brightness(1.15);transform:translateY(-1px)}
/* mobile (≤560px): stacked + ΚΕΝΤΡΑΡΙΣΜΕΝΟ content (Leo iteration 3) */
@media (max-width:560px){
  .trip-card__etoimo{flex-direction:column;align-items:center;gap:.45rem;text-align:center}
  .trip-card__etoimo-copy{text-align:center}
  .trip-card__etoimo-cta{align-self:center}
}

/* 2026-06-11: trust+disclosure merged σε ΕΝΑ block· etoimo.gr = σκέτο text link */
.trust__body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.trust__body a:hover{color:var(--accent)}
