/* =========================================================
   Sai Mai — Ostrava: Masáže a wellness
   Loosely based on Ostrava-Masaze.dc.html — same design system
   as the homepage (colour, type, 8px rhythm, 1280px column),
   but recomposed rather than copied.

   Requires css/base.css and css/branch.css.
   ========================================================= */

/* =========================================================
   Hero
   Copy sits bottom-left instead of centred, and the section
   ends in a numbered rail that doubles as page navigation —
   so the hero states the offer and indexes it in one block.
   ========================================================= */
.mhero {
  position: relative;
  min-height: 704px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s13) var(--edge) 0;
  background: var(--brown-deep);
  overflow: hidden;
}
.mhero__bg {
  position: absolute;
  inset: 0;
  background-image: var(--hero-img), var(--stripe);
  background-size: cover, auto;
  background-position: 50% 45%, 0 0;
  background-repeat: no-repeat, repeat;
}
/* Unlike the homepage hero, the copy here sits over the lower half of
   the frame, so it needs a bottom-weighted scrim to stay legible. */
.mhero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 5, .35) 0%, rgba(20, 12, 5, .2) 35%, rgba(20, 12, 5, .82) 100%);
}

.mhero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  max-width: 800px;
  padding-bottom: var(--s8);
}
.mhero__inner > * { opacity: 0; animation: heroRise .9s var(--ease) forwards; }
.mhero__title   { animation-delay: .22s; }
.mhero__lede    { animation-delay: .36s; }

.mhero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 64px;
  line-height: var(--lh7);
  color: var(--cream-warm);
}
/* The count is the one place this page uses the display numeral face. */
.mhero__title em {
  font-family: var(--font-num);
  font-style: normal;
  color: var(--gold);
}
.mhero__lede {
  max-width: 512px;
  font-size: 16px;
  line-height: var(--lh2);
  color: #F6F3EE;
}

/* ---------- Index rail ---------- */
.railway {
  position: relative;
  display: flex;
  border-top: 1px solid rgba(246, 236, 225, .22);
}
.railway__item {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  /* Even padding on both sides so the label sits clear of the divider
     lines instead of hugging the left one. */
  padding: var(--s3);
  border-right: 1px solid rgba(246, 236, 225, .16);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  line-height: var(--lh2);
  letter-spacing: 1.68px;
  color: rgba(246, 236, 225, .82);
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}
.railway__item:last-child { border-right: 0; }
.railway__item:hover { background: rgba(197, 160, 89, .14); color: var(--gold); }
/* Čísla 01/02/03 jsou pryč — pořadí kotev nic neříká. Místo nich šipka
   dolů, protože to je jediné, co položka slibuje: sjede to níž. */
.railway__item { justify-content: space-between; align-items: center; }
.railway__item::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease-out);
}
.railway__item:hover::after { transform: translateY(3px) rotate(45deg); }

/* =========================================================
   Duo — two full-bleed gateways
   The design had two white cards side by side; edge-to-edge
   photographic panels give the page a stronger opening beat
   and echo the dark bands used elsewhere in the brand.
   ========================================================= */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.duo__panel {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  padding: var(--s6);
  overflow: hidden;
  color: inherit;
  isolation: isolate;
}
.duo__panel:hover { color: inherit; }
.duo__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  transition: transform .8s var(--ease);
}
.duo__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(42, 29, 19, .25) 0%, rgba(42, 29, 19, .88) 100%);
  transition: background .4s ease;
}
.duo__panel:hover .duo__bg { transform: scale(1.05); }
.duo__panel:hover::after { background: linear-gradient(180deg, rgba(42, 29, 19, .3) 0%, rgba(42, 29, 19, .92) 100%); }

.duo__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 464px;
}
.duo__title {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 40px;
  line-height: var(--lh5);
  color: var(--cream-warm);
}
.duo__desc { font-size: 16px; line-height: var(--lh2); color: rgba(246, 243, 238, .85); }
.duo__cta {
  margin-top: var(--s1);
  font-weight: 600;
  font-size: 16px;
  line-height: var(--lh2);
  color: var(--gold);
  transition: color .25s ease;
}
.duo__panel:hover .duo__cta { color: var(--gold-light); }
/* Signature arrow, inline after the label (see --arrow in base.css). */
.duo__cta::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 11px;
  margin-left: var(--s1);
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.duo__panel:hover .duo__cta::after { transform: translateX(4px); }

/* =========================================================
   Podle vaší potřeby

   Fotka je celá karta a text leží v ní pod hnědým závojem — stejná
   komponenta jako karty "Pro koho" na dárkových poukazech, jen širší.
   Předtím to byly čtyři úzké sloupce s fotkou nahoře a textem pod ní:
   při čtyřech sloupcích zbylo na fotku i na řádek textu tak málo místa,
   že karta byla hlavně seznam štítků s obrázkem navrch.

   Rovný rastr 2×2. Karty tu dřív stály na stupňovité základně — každá
   druhá spadlá o půl kroku — a k tomu si každá držela vlastní výšku
   podle délky textu. U čtyř úzkých sloupců to čtlo jako rytmus; u dvou
   širokých fotokaret z toho byly čtyři nezarovnané obdélníky. Teď mají
   všechny stejnou výšku i stejnou základnu.
   ========================================================= */
.needs { display: flex; flex-direction: column; gap: var(--s6); }
.needs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  /* stretch, ne start: karty v řádku dosáhnou na stejnou výšku podle té
     nejvyšší, takže spodní hrany sedí v jedné lince. */
  align-items: stretch;
}
/* ---------------------------------------------------------
   Karta „co potřebuji"

   Text leží ve fotce, ne pod ní. Rozdělená karta — pás snímku nahoře,
   plná hnědá plocha dole — byla čitelná, ale laciná: fotka i text si
   držely odstup a z karty se stal formulář se dvěma přihrádkami.

   Snímek přelévá jeden plochý hnědý závoj přes celou plochu. Není to
   spád, a to je celý rozdíl proti tomu, co tu bylo předtím: spád musel
   být dole skoro neprůhledný, aby text unesl, takže ze spodních dvou
   třetin snímku dělal tmavou texturu — a jeho horní hrana přes fotku
   vždycky vedla viditelný pruh. Plochý závoj zabírá stejně na celé
   ploše, takže fotka zůstane fotkou a nikde nemá šev.

   Krytí .72 je nastavené na nejsvětlejší ze čtyř snímků. Text --cream-hi
   na něm drží kontrast kolem 7:1, tedy s rezervou nad AA i pro popisek.
   Když se bude měnit fotka, musí se ověřit proti té nejsvětlejší.
   --------------------------------------------------------- */
.need {
  position: relative;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  /* Obsah drží u dolní hrany, takže tlačítka ve dvou kartách vedle sebe
     sedí v jedné lince i při různě dlouhém popisu. */
  justify-content: flex-end;
  border-radius: var(--radius);
  overflow: hidden;
  /* Hnědá, ne krém: kdyby se fotka nenačetla, světlý text na ní
     zůstane čitelný. */
  background: var(--brown-deep);
  box-shadow: var(--shadow-2);
  /* Lift + shadow come from base.css ("Card lift"). */
}
.need:hover { box-shadow: var(--shadow-3), inset 0 0 0 1px rgba(197, 160, 89, .55); }

.need__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* Snímek nese ::before, závoj ::after. Rozdělené proto, že se přibližuje
   jen snímek — kdyby seděly na jednom prvku, škáloval by se s ním
   i závoj a při hoveru by se odkryly rohy karty. */
.need__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  filter: saturate(.94);
  transition: transform .8s var(--ease-out), filter .45s var(--ease-out);
}
.need__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Táž hněď jako .giftee__veil na poukazech a .ocard::after na firmách. */
  background: rgba(58, 34, 21, .72);
}
.need:hover .need__photo::before { transform: scale(1.05); filter: saturate(1.04); }

.need__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s6) var(--s5) var(--s5);
}

.need__title {
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 26px;
  line-height: var(--lh3);
  color: var(--cream-hi);
}
.need__desc { font-size: 15px; line-height: var(--lh2); color: rgba(246, 236, 225, .86); }

/* ---------------------------------------------------------
   Odkazy na konkrétní masáže

   Byly to drobné pilulky: 11px, tenký průsvitný obrys, výplň z bílé na
   10 %. Ve výsledku to nečetl nikdo jako tlačítko — spíš jako štítky
   s klíčovými slovy, které nikam nevedou.

   Teď mluví smlouvou tlačítek z base.css: verzálky 12px v tučném řezu,
   výška 44 px, celý obrys a firemní šipka (--arrow), která se pod
   kurzorem posune o 6 px stejně jako u každého jiného tlačítka na webu.
   Šipka je vidět pořád, ne až na hoveru — na dotykovém displeji žádný
   hover není a to je jediné, co z odkazu dělá odkaz na první pohled.
   --------------------------------------------------------- */
.need__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s1);
}
.need__tags a {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh1);
  letter-spacing: 1.4px;
  color: rgba(255, 255, 255, .92);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
  transition: background .3s var(--ease-out), color .3s var(--ease-out),
              box-shadow .3s var(--ease-out);
}
.need__tags a::after {
  content: "";
  flex: none;
  width: 22px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.need__tags a:hover,
.need__tags a:focus-visible {
  background: var(--cream-hi);
  color: var(--brown-deep);
  box-shadow: inset 0 0 0 1px var(--cream-hi);
}
.need__tags a:hover::after,
.need__tags a:focus-visible::after { transform: translateX(6px); }
/* Stejné doseknutí do stránky jako u .btn:active. */
.need__tags a:active { transform: translateY(1px); }

/* =========================================================
   Ceník
   The homepage card, laid on its side and stacked. Same parts
   in the same order (photo, name, gold rule, description,
   dashed price rows, booking link) — only the axis changes,
   which lets every tier and the full description show at once.
   ========================================================= */
.cenik { display: flex; flex-direction: column; gap: var(--s6); }
.cenik__list { display: flex; flex-direction: column; gap: var(--gutter); }

/* Masáž, kterou salon v Terminu nenabízí (initTermino v main.js). */
.mrow[hidden] { display: none; }

.mrow {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 240px;
  align-items: center;
  gap: var(--s5);
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-card);
  transition: transform .35s ease, box-shadow .35s ease;
}
.mrow:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--line-card), var(--shadow-2);
}
/* The wellness row closes the list and is not a massage — the gold
   spine marks it as a different kind of item. */
.mrow--wellness { box-shadow: inset 0 0 0 1px var(--line-card), inset 4px 0 0 var(--gold); }
.mrow--wellness:hover { box-shadow: inset 0 0 0 1px var(--line-card), inset 4px 0 0 var(--gold), var(--shadow-2); }

/* Zlatý rám se pod kurzorem nakreslí zleva doprava, místo aby naskočil.
   Je to tentýž pohyb, jakým se odkrývá .split__frame v branch.css: rám
   se neškáluje (to by z linky udělalo šmouhu), jen ho odkryje clip-path,
   takže tah zůstane v plné síle po celou cestu.

   Rám musí být vlastní vrstva. Kdyby zůstal ve box-shadow řádku, šlo by
   ho odkrýt jen s celým prvkem — a s ním by se odkrýval i obsah karty.
   Pod ním přitom zůstává klidová vlasovka --line-card, takže během cesty
   je vidět přesně to, oč jde: vlevo už zlatá, vpravo ještě šedá. */
.mrow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--gold);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path .5s var(--ease-out);
}
.mrow:hover::after,
.mrow:focus-within::after { clip-path: inset(0 0 0 0); }

.mrow__media {
  height: 216px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.mrow__img {
  width: 100%;
  height: 100%;
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  transition: transform .7s var(--ease);
}
.mrow:hover .mrow__img { transform: scale(1.06); }

.mrow__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.mrow__name {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 24px;
  line-height: var(--lh3);
  color: var(--ink);
}
.mrow__desc { max-width: 512px; font-size: 15px; line-height: var(--lh2); color: var(--body); }

.mrow__side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s3);
}
.mrow__side .prices { flex: none; }
/* Text link, not a boxed button — the row already carries enough weight.
   Arrow is the same masked glyph the .btn--arrow CTAs use, so the nudge
   on hover matches the rest of the site. */
.mrow__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 600;
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--brown-deep);
  text-transform: uppercase;
  transition: color .25s ease;
}
.mrow__cta::after {
  content: "";
  flex: none;
  width: 28px;
  height: 12px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.mrow:hover .mrow__cta { color: var(--gold); }
.mrow:hover .mrow__cta::after,
.mrow__cta:hover::after { transform: translateX(6px); }

/* Rezervace a pod ní tišší „Darovat jako poukaz“ — vede na objednávku
   poukazu s předvyplněnou masáží (initGiftLinks a initVoucherPreview
   v main.js). Rezervace zůstává hlavní akcí, dárek je druhá volba. */
.mrow__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
}
.mrow__gift {
  font-size: 14px;
  font-weight: 500;
  line-height: var(--lh2);
  color: var(--muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .25s ease;
}
.mrow__gift:hover { color: var(--gold); }

/* =========================================================
   Office syndrom — dark full-bleed band
   The homepage already uses cream split sections, so this one
   inverts to dark and leads with the price as a display figure.
   ========================================================= */

/* Single hairline above only — the dashed box around the price read as
   a dotted coupon rather than a display figure. */
.bigprice {
  display: flex;
  align-items: baseline;
  gap: var(--s1);
  padding-top: var(--s3);
  border-top: 1px solid rgba(197, 160, 89, .35);
  align-self: stretch;
  max-width: 360px;
}
/* Only the numerals get the serif face; the currency stays in the UI
   face, a size step down, so the figure carries the line. (This split
   started as a workaround — Cormorant Garamond had no precomposed č and
   faked the caron — but it reads better than "1 290 Kč" all in serif,
   so it stayed after the numerals moved to Lora.) */
.bigprice__amount {
  font-family: var(--font-num);
  font-size: 52px;
  line-height: var(--lh7);
  letter-spacing: -1px;
  color: var(--gold);
}
.bigprice__cur {
  margin-right: var(--s1);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 20px;
  line-height: var(--lh3);
  color: var(--gold);
}
/* Držel tu krémovou barvu z doby, kdy cena ležela na tmavé kartě —
   na krémovém pozadí stránky byl údaj o délce prakticky neviditelný
   (kontrast 1.1:1). Teď je v barvě běžného textu, tedy tmavší než
   zlatá číslice: čte se jako doplněk, ne jako druhá cena. */
.bigprice__unit {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--body);
}

/* =========================================================
   Privátní sauna
   Deliberately the same composition as the split sections on the
   homepage — text column left, photo bleeding off the right edge, on
   the plain page background. It previously floated a cream card with a
   drop shadow over a full-bleed photo, which was the only section on
   the site built that way and read as a different template.
   Column ratio matches .split--imgRight exactly (550 / 950).
   ========================================================= */


/* FAQ (.faq / .qa) now lives in branch.css — three pages use it. */
/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .mhero { min-height: 640px; }
  .mhero__title { font-size: 48px; line-height: var(--lh6); }

  /* Dva sloupce už jsou základ — tady se jen zkrátí karta a nadpis. */
  .need { min-height: 400px; }
  .need__title { font-size: 24px; }

  .mrow { grid-template-columns: 240px minmax(0, 1fr) 208px; gap: var(--s4); }
  .mrow__media { height: 184px; }

}

@media (max-width: 960px) {
  .railway { flex-wrap: wrap; }
  .railway__item { flex: 1 1 50%; border-bottom: 1px solid rgba(246, 236, 225, .16); }
  .railway__item:nth-child(even) { border-right: 0; }

  .mhero__title { font-size: 40px; line-height: var(--lh5); }

  /* Pod sebou jako dvě karty s odsazením a zaoblením, ne dva pásy od
     kraje ke kraji — stejný rytmus jako ostatní fotky na stránce. */
  .duo { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s4) var(--edge) 0; }
  .duo__panel { border-radius: var(--radius); }
  .duo__panel { min-height: 400px; padding: var(--s5); }

  /* Photo on top, copy below, prices last — the row becomes a card. */
  .mrow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s3);
  }
  .mrow__media { height: 240px; }
  .mrow__side { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--s4); }
  .mrow__side .prices { flex: 1 1 auto; max-width: 320px; }

  /* Stack, and let the photo run full width like the homepage splits. */
}

@media (max-width: 640px) {
  .mhero { min-height: 0; padding-top: var(--s8); }
  .mhero__inner { padding-bottom: var(--s6); }
  .mhero__title { font-size: 32px; line-height: var(--lh4); }

  .railway__item {
    flex: 1 1 100%;
    border-right: 0;
    padding: var(--s2) var(--s3);
    font-size: 12px;
  }
  .railway__item:first-child { padding-left: var(--s3); }

  .duo__panel { min-height: 320px; padding: var(--s4); }
  .duo__title { font-size: 32px; line-height: var(--lh4); }

  .needs__grid { grid-template-columns: minmax(0, 1fr); }
  .need { min-height: 360px; }
  .need__body { padding: var(--s5) var(--s4) var(--s4); }
  .need__title { font-size: 22px; }

  .mrow__media { height: 192px; }
  .mrow__name { font-size: 20px; line-height: var(--lh3); }
  .mrow__side { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .mrow__cta { justify-content: center; }

  .bigprice__amount { font-size: 40px; line-height: var(--lh6); }
  .bigprice__cur { font-size: 17px; }

  /* Mobil — fotky se ořezávají odshora (proč, viz branch.css): úzký
     výřez by jinak bral střed snímku a hlavy by z něj vypadly.

     .need__photo nese snímek na pseudoprvku, ne na sobě — proto ::before. */
  .mhero__bg,
  .duo__bg,
  .need__photo::before,
  .mrow__img { background-position: center top, 0 0; }
}

/* =========================================================
   Reduced motion (global rules live in base.css)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .mhero__inner > * { opacity: 1; }
}

/* =========================================================
   Mobil — kompaktní karta ceníku (ladění 10/2026)

   Třináct karet s fotkou přes celou šířku dělalo z ceníku na telefonu
   přes 8 000 px rolování — člověk ztratil přehled dřív, než došel
   k masáži, kterou hledal. Teď: malá fotka vedle názvu, pod nimi
   popis, ceny a rezervace. .mrow__body se rozpustí (display:contents),
   aby název a popis mohly stát v mřížce každý jinde.
   ========================================================= */
@media (max-width: 640px) {
  .mrow {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: var(--s2) var(--s2);
    padding: var(--s2);
  }
  .mrow__body { display: contents; }
  .mrow__media { grid-column: 1; grid-row: 1; width: 88px; height: 88px; }
  .mrow__name { grid-column: 2; grid-row: 1; font-size: 20px; line-height: var(--lh3); }
  .mrow .rule { display: none; }
  .mrow__desc { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }
  .mrow__side { grid-column: 1 / -1; grid-row: 3; gap: 0; }
  .mrow__cta { min-height: 48px; }
  .mrow__actions { align-items: stretch; gap: 0; }
  .mrow__gift { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  /* Najetí kartou nahoru je na dotyku jen škubnutí při scrollu. */
  .mrow:hover { transform: none; box-shadow: inset 0 0 0 1px var(--line-card); }
}