/* ==========================================================================
   Clae Pest Control — portal.css (owned by task 04)

   Screen-specific rules for home, visits, billing and wallet only. The
   shared component vocabulary lives in base.css; nothing here is part of
   the class contract other tasks build against — these classes are only
   ever used inside views this task owns.
   ========================================================================== */

/* -----------------------------------------------------------------------
   Home — next visit card
   ----------------------------------------------------------------------- */

.next-visit__date {
  font: 500 clamp(24px, 3vw, 32px) / 1.15 var(--clae-font-sans);
  margin: 10px 0 2px;
}
.next-visit__window { color: var(--clae-periwinkle); margin: 0 0 14px; font-size: 17px; }
.next-visit__tech { margin: 0 0 4px; }
.next-visit__reassure { color: rgb(var(--clae-paper-rgb) / 0.62); margin: 0; }

/* -----------------------------------------------------------------------
   Home — the 12-month calendar strip
   ----------------------------------------------------------------------- */

.calendar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--clae-gap-sm);
}
.calendar__month {
  border: 1px solid var(--clae-sand);
  border-radius: var(--clae-radius-sm);
  padding: 14px 8px;
  text-align: center;
  color: var(--clae-stone);
}
.calendar__month-name {
  display: block;
  font: 400 11px / 1 var(--clae-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.calendar__month-price { display: block; font-weight: 500; min-height: 1.2em; }
.calendar__month.is-billed {
  background: var(--clae-sand);
  color: var(--clae-ink);
  border-color: var(--clae-ink);
}

@media (max-width: 760px) {
  .calendar { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .calendar { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------------------
   Visits — the shared _visit disclosure, used on home/visits/visit#show
   ----------------------------------------------------------------------- */

.visit__summary-row {
  display: flex;
  align-items: center;
  gap: var(--clae-gap-sm);
  flex-wrap: wrap;
}
.visit__tech { margin-left: auto; }
.visit__materials { padding-left: 18px; list-style: disc; }
.visit__materials li { margin-top: 4px; }

/* Findings, rendered by shared/_finding inside a visit body. */
.finding {
  border: 1px solid var(--clae-sand);
  border-radius: var(--clae-radius-sm);
  padding: 14px 16px;
}
.finding + .finding { margin-top: var(--clae-gap-sm); }
.finding__photo {
  aspect-ratio: 4 / 3;
  max-width: 320px;
  border-radius: var(--clae-radius-sm);
  overflow: hidden;
  background: var(--clae-sand);
}
.finding__photo img { width: 100%; height: 100%; object-fit: cover; }

/* -----------------------------------------------------------------------
   Billing
   ----------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

.invoice-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--clae-gap-md);
  flex-wrap: wrap;
}

/* -----------------------------------------------------------------------
   Wallet
   ----------------------------------------------------------------------- */

.wallet-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--clae-gap-md);
}

.autopay-block + .autopay-block { margin-top: var(--clae-gap-md); }

/* -----------------------------------------------------------------------
   The bare, no-nav pay page (a signed link — see the signed_invoice route)
   ----------------------------------------------------------------------- */

.pay-page {
  max-width: 480px;
  margin-inline: auto;
  text-align: center;
}