/* =========================================================================
   timoula — share pages on the Daylight foundation
   /product/:id (product card, store prices, open-in-app) and its 404,
   /invite/:code (invite code, store buttons) and its 404.

   Built on public/css/site.css (tokens, nav, footer, .btn, .store-btn,
   .logo-chip, .eyebrow, focus rings). The pages carry the shared nav and
   footer; this file only styles the card in between.

   Cache: referenced as /css/share.css?v=SITE_ASSET_VERSION
   (SHARE_CSS_HREF in src/server/siteAssets.ts). Bump that version when this
   file changes.
   ========================================================================= */

.share-page { display: flex; flex-direction: column; }
.share-page > .footer { margin-top: auto; }

.share-main {
  flex: 1 0 auto;
  padding-block: clamp(16px, 4vw, 56px) clamp(56px, 8vw, 112px);
}
.share-main:focus { outline: none; }

/* ---- Card ------------------------------------------------------------ */
.share-card {
  position: relative;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-line), var(--shadow-card);
}

.share-eyebrow { margin-bottom: var(--s-3); }
.share-title {
  font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.share-lead {
  margin-top: var(--s-3);
  color: var(--c-fg-muted);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- Product: media column (product on a sunrise) -------------------- */
.share-card--product {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  max-width: 1040px;
  overflow: hidden;
}
.share-media {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--c-dawn-top) 0%, var(--c-dawn-mid) 48%, var(--c-dawn-low) 100%);
  box-shadow: inset -1px 0 0 var(--c-line-faint);
}
/* the sun on the horizon, centred on the bottom edge */
.share-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: max(160%, 560px);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, 48%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c-sun-horizon), var(--c-sun-warm) 18%, var(--c-sun-peach) 40%, var(--c-sun-haze) 62%, transparent 82%);
  pointer-events: none;
}
.share-thumb {
  display: grid;
  place-items: center;
  width: min(100%, 340px);
  aspect-ratio: 1;
  padding: clamp(16px, 2.5vw, 28px);
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: var(--shadow-float);
}
.share-thumb img { width: 100%; height: 100%; object-fit: contain; }
.share-thumb--empty { color: var(--c-fg-quiet); }
.share-thumb--empty svg { width: 30%; height: auto; stroke-width: 1.4; }

/* ---- Product: info column --------------------------------------------- */
.share-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 4vw, 52px);
}

/* The lowest price, with its chain's logo. The only store price the site
   shows: the rest are in the app. */
.pricebox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-5);
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, var(--c-tint), var(--c-tint-2));
  box-shadow: inset 0 0 0 1px rgb(var(--c-brand-rgb) / 0.3), 0 12px 28px -18px rgb(var(--c-brand-rgb) / 0.6);
  text-align: left;
}
.pricebox__main { display: grid; gap: 2px; min-width: 0; }
.pricebox__label {
  color: var(--c-brand-text);           /* 4.9:1 on the tint */
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}
.pricebox__value {
  color: var(--c-brand-text);
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--tr-heading);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricebox__store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.pricebox__store-name { min-width: 0; overflow-wrap: anywhere; }

/* Logo tiles: one landscape size so wordmarks stay legible beside square marks */
.share-chip { width: 54px; height: 36px; padding: 4px 5px; }
.share-chip--initials {
  color: var(--c-fg-muted);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}

/* With several chains: how much dearer the dearest one is, and how many
   more chains the app compares. */
.share-spread {
  margin-top: var(--s-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}
.share-more {
  margin-top: 2px;
  color: var(--c-fg-muted);
  font-size: var(--fs-small);
}

/* Open in the app + store buttons */
.share-card .actions { margin-top: var(--s-6); }
.share-cta {
  width: 100%;
  min-height: 54px;
  padding-block: 10px;
  font-size: 1rem;
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;
  text-align: center;
}
.stores-cta { margin-top: var(--s-5); }
.stores-cta__label {
  margin-bottom: var(--s-3);
  color: var(--c-fg-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
/* the pair shares a row at equal widths while both fit, else stacks;
   labels never wrap */
.share-card .store-btn {
  flex: 1 1 0;
  min-width: max-content;
  justify-content: center;
  padding: 0 var(--s-4);
}
.share-info .store-row { max-width: 420px; }

/* ---- Not-found cards -------------------------------------------------- */
.share-card--status {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 600px;
  padding: clamp(36px, 6vw, 64px) clamp(20px, 5vw, 56px);
  text-align: center;
}
.share-card--status h1 {
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}
.share-card--status .share-lead { max-width: 32rem; }
.share-card--status .actions { width: 100%; max-width: 360px; }
.share-card--status .stores-cta { width: 100%; max-width: 420px; margin-top: var(--s-6); }
.share-card--status .store-row,
.share-card--invite .store-row { justify-content: center; }
.share-status-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-5);
  border-radius: 50%;
  background: var(--c-band);
  color: var(--c-fg-muted);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.share-status-badge svg { width: 32px; height: 32px; stroke-width: 1.8; }

/* ---- Invite: daybreak card ------------------------------------------- */
.share-card--invite {
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  max-width: 620px;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 56px) clamp(56px, 8vw, 88px);
  overflow: hidden;
  text-align: center;
  background: linear-gradient(180deg, var(--c-dawn-top) 0%, var(--c-dawn-mid) 50%, var(--c-dawn-low) 100%);
  box-shadow: inset 0 0 0 1px rgb(var(--c-brand-rgb) / 0.14), var(--shadow-card);
}
.share-card--invite::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: max(150%, 640px);
  aspect-ratio: 3 / 1;
  transform: translate(-50%, 40%);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c-sun-horizon), var(--c-sun-warm) 18%, var(--c-sun-peach) 40%, var(--c-sun-haze) 62%, transparent 82%);
  pointer-events: none;
}
.share-appicon {
  width: 88px;
  height: 88px;
  margin-bottom: var(--s-6);
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px var(--c-chip-ring), 0 2px 4px rgb(var(--c-ink-rgb) / 0.06), 0 22px 44px -14px rgb(var(--c-brand-rgb) / 0.5), 0 0 70px -12px var(--c-sun-glow);
}
.share-card--invite .share-title { max-width: 16em; }

.invite-code { width: 100%; max-width: 440px; margin-top: var(--s-6); }
.invite-code__label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--c-fg-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
}
.code-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 6px;
  border-radius: 20px;
  background: var(--c-surface);
  box-shadow: 0 0 0 1px var(--c-line-strong), var(--shadow-soft);
}
.code-input {
  flex: 1 1 auto;
  width: 100%;                          /* never the input's intrinsic 20ch */
  min-width: 0;
  min-height: 52px;
  padding: 0 4px 0 calc(4px + 0.14em);  /* balances the trailing letter-spacing */
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--c-fg);
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  -webkit-user-select: all;
  user-select: all;
}
.code-input:focus-visible { outline: 2px solid var(--c-brand-text); outline-offset: 0; }
.copy-btn {
  flex: none;
  min-width: 7.5rem;
  min-height: 52px;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 14px;
  background: var(--c-cta);
  color: var(--c-on-cta);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-cta);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.copy-btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .copy-btn:hover { background: var(--c-cta-hover); }
}
.share-card--invite .stores-cta { width: 100%; max-width: 440px; margin-top: var(--s-5); }
.install-hint {
  max-width: 26rem;
  margin: var(--s-4) auto 0;
  color: var(--c-fg-muted);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.install-hint--visible { color: var(--c-fg); font-weight: var(--fw-semibold); }

/* ---- Tablets and phones ----------------------------------------------- */
@media (max-width: 879px) {
  .share-card--product { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .share-media { padding: 28px 24px 32px; box-shadow: inset 0 -1px 0 var(--c-line-faint); }
  .share-media::before { width: max(140%, 520px); transform: translate(-50%, 56%); }
  .share-thumb { width: min(62vw, 248px); }
  .share-info { align-items: center; text-align: center; }
  .share-info > .pricebox,
  .share-info > .actions,
  .share-info > .stores-cta { align-self: stretch; }
  .share-info .store-row { max-width: none; justify-content: center; }
}

@media (max-width: 640px) {
  .share-card { border-radius: var(--r-lg); }
  .share-info { padding: 24px 16px 28px; }
  .share-chip { width: 46px; height: 32px; padding: 3px 4px; }
}

@media (max-width: 480px) {
  .pricebox { padding: 14px 14px 14px 16px; }
  .code-row { flex-direction: column; }
  .copy-btn { width: 100%; }
}

/* "Δες όλες τις τιμές στην εφαρμογή" stays one line down to 340px, incl.
   360px Android in Inter (15px there; phones set --fs-small to 16px, hence
   the literal size). Below that, white-space: normal lets it wrap. */
@media (max-width: 379px) {
  .share-cta { padding-inline: var(--s-4); font-size: 0.9375rem; }
}

@media (max-width: 359px) {
  .share-info { padding-inline: 12px; }
}

/* ---- Motion and print ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .copy-btn { transition: none; }
}
@media print {
  .share-media::before, .share-card--invite::before { display: none; }
  .share-card, .share-card--invite { box-shadow: none; background: none; }
  .share-card .actions, .stores-cta { display: none; }
}