/*
 * Home page (web-spec 4.3, 4.4, 4.9; W01 1440, W02 390, W08 dark): the cobalt converter card and the bank list sheet.
 * Markup: src/pages/home/view.ts. Colours only as token variables from base.css.
 *   1024 and wider: card 5 columns (486, sticky at 24), sheet 7 columns (690), side by side.
 *   768-1023: card and sheet stacked, full width, 24 apart.
 *   below 768: the card becomes the cobalt block under the cobalt header (W02) and the sheet covers its last 48 px.
 */

/* ======================================================================================================== */
/* Converter card: 486 x 308, padding 24, radius 32 (W01 x 120-606, y 96-404)                               */
/* ======================================================================================================== */

.cv {
  position: relative;
  padding: 24px;
  border-radius: var(--radius-card);
}

/* H1 «Curs valutar azi» 22/800, line 28, 8 above the converter. */
.cv__title {
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* «Dai» / «Primești» 15/500 on-hero-label, 2 above the row of the pill and the amount. */
.cv__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cv__label {
  color: var(--on-hero-label);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.cv__row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 62px;
}

/* Amount 52/800, -0.035em, line 62, right aligned; 34/800 when 52 does not fit (app-spec 2). */
.cv__amount {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 62px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--on-hero);
  caret-color: var(--on-hero);
  font-family: var(--font);
  font-size: 52px;
  line-height: 62px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  appearance: none;
  transition: color var(--transition);
}

.cv__amount::selection {
  background: var(--on-hero);
  color: var(--surface-hero);
}

/* Computed from old data, nothing to show, or the other field is being typed (E04). */
.cv__amount--dim {
  color: var(--on-hero-computed);
}

.cv__amount--small {
  font-size: 34px;
}

/* The server's estimate until the script measures the field (view.ts amountFit). */
@media (max-width: 767px) {
  .cv__amount--fit-phone {
    font-size: 34px;
  }
}

@media (min-width: 1024px) {
  .cv__amount--fit-desktop {
    font-size: 34px;
  }
}

/* Swap row 32: the hero-divider line at 16 and the white 48 button over it, 8 above the row. */
.cv__swaprow {
  position: relative;
  z-index: 1;
  height: 32px;
}

.cv__divider {
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--hero-divider);
}

.cv__swap {
  position: absolute;
  top: -8px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  border-radius: 50%;
  background: var(--swap-surface);
  color: var(--swap-icon);
  box-shadow: var(--shadow-swap);
  transition: transform var(--transition), background-color var(--transition);
}

.cv__swap:hover {
  background: var(--on-hero-note);
}

.cv__swap:active {
  transform: scale(0.94);
}

/* The arrows turn half a circle on each press (the browser entry sets --turn). */
.cv__swapicon {
  transform: rotate(var(--turn, 0deg));
  transition: transform 220ms ease-out;
}

/* «la Energbank, cel mai bun curs» 14/500 on-hero-note, right aligned, one line. */
.cv__caption {
  min-height: 18px;
  margin-bottom: 4px;
  overflow: hidden;
  color: var(--on-hero-note);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Hidden twin of the amount and the caption, measured by the browser entry. Anchored right, so a long text grows to
   the left and never widens the page. */
.cv__measure {
  position: absolute;
  top: 0;
  right: 0;
  width: max-content;
  max-width: none;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
  font-family: var(--font);
  font-size: 52px;
  line-height: 62px;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.cv__measure--caption {
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Under the card, 16 below: «Cursurile sunt orientative. Verifică la bancă înainte de schimb.» 13/400. */
.home__footnote {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
}

/* ======================================================================================================== */
/* Bank list sheet (components.css .c-sheet: radius 32, 1 px border, padding 24 24 8)                       */
/* ======================================================================================================== */

/* The notes end the sheet: 24 below the last line (W01 y 890 -> 914). */
.home__notes--sheet {
  padding-bottom: 16px;
}

.home__notes--phone {
  display: none;
  grid-column: 1 / -1;
}

/* ======================================================================================================== */
/* 768-1023: stacked, full width                                                                            */
/* ======================================================================================================== */

@media (max-width: 1023px) {
  .home {
    row-gap: 24px;
  }
}

/* ======================================================================================================== */
/* Below 768 (W02): the cobalt block continues the cobalt header, the sheet covers its last 48 px           */
/* ======================================================================================================== */

@media (max-width: 767px) {
  .home {
    row-gap: 0;
  }

  .home__converter {
    margin-inline: calc(-1 * var(--page-margin));
  }

  /* H1 y 48-88, converter 226 (6 + 84 + 32 + 84 + 2 + 18), 16 to the sheet, 48 under it. */
  .cv {
    padding: 0 var(--page-margin) 64px;
    border-radius: 0;
  }

  .cv__title {
    display: flex;
    align-items: center;
    height: 40px;
    margin-bottom: 0;
  }

  .cv__body {
    padding-top: 6px;
  }

  .cv__caption {
    margin-bottom: 0;
  }

  .home__footnote,
  .home__notes--sheet {
    display: none;
  }

  /* The sheet (radius 32 on top, components.css) covers the last 48 px of the cobalt block. */
  .home__sheet {
    position: relative;
    z-index: 1;
    margin-top: -48px;
  }

  /* Dark theme: the sheet is lighter than the page, so its end shows; it gets the bottom corners of a card. */
  :root[data-theme='dark'] .home__sheet {
    border-radius: var(--radius-card);
  }

  .home__notes--phone {
    display: block;
  }

  .home__notes--phone .c-list__note + .c-list__note {
    margin-top: 8px;
  }
}

@media (max-width: 767px) and (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .home__sheet {
    border-radius: var(--radius-card);
  }
}