@charset "utf-8";

/* ==========================================================================
   Availability module - REUSABLE, CLIENT AGNOSTIC
   --------------------------------------------------------------------------
   This stylesheet ships alongside functions/, src/assets/js/availability.js
   and the two data files to every client site that uses the availability
   panel. It therefore contains ONLY module rules:

     .office-grid, .office-card and its parts,
     .status[data-status="..."],
     .availability-summary*, .availability-updated,
     the module print rules.

   It deliberately contains no global reset, no :root colour or background,
   no body rule, no universal selector and no generic h1/h2/p or .eyebrow
   rules. Those belong to the host site's own stylesheet, which loads first.

   Every value reads a host site token with a sane standalone fallback, so the
   module still looks deliberate on a site that defines no tokens at all.

   Status is never signalled by colour alone: each state also has its own
   border treatment, corner treatment and leading glyph shape.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.office-grid {
  display: grid;
  gap: var(--space-5, 1.5rem);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .office-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .office-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.office-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--paper-2, #ffffff);
  border: 1px solid var(--line, #ded8cc);
  border-radius: var(--radius-lg, 8px);
  transition: border-color 240ms cubic-bezier(0.2, 0.6, 0.2, 1),
    box-shadow 240ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.office-card:hover {
  border-color: var(--line-strong, #c9c1b1);
  box-shadow: var(--shadow-md, 0 12px 30px -18px rgba(25, 23, 19, 0.45));
}

.office-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--shell-2, #e3dbcc);
}

.office-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.office-card:hover .office-card-media img {
  transform: scale(1.035);
}

.office-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: var(--space-5, 1.5rem);
}

.office-card-name {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--fs-lg, 1.375rem);
  font-weight: 400;
  line-height: 1.2;
}

.office-card-meta {
  margin: 0;
  color: var(--muted, #6f6a61);
  font-size: var(--fs-sm, 0.875rem);
}

.office-card-price {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--fs-md, 1.125rem);
  line-height: 1.3;
}

.office-card-note {
  margin: 0;
  color: var(--muted, #6f6a61);
  font-size: var(--fs-sm, 0.875rem);
  max-width: 40ch;
}

.office-card .btn,
.office-card-body > a:last-child {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Status badge
   Shape, border and colour all carry the state, so the meaning survives
   greyscale printing and colour blindness.
   -------------------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.125rem;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: var(--radius, 4px);
  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.status::before {
  content: "";
  display: block;
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  background: currentColor;
}

/* Available - solid two pixel border, solid square glyph */
.status[data-status="available"] {
  color: var(--ok, #2f5d43);
  background: var(--ok-tint, #e9f0ea);
  border-width: 2px;
  border-style: solid;
}

/* Under offer - dashed border, triangle glyph */
.status[data-status="under-offer"] {
  color: var(--warn, #8a6316);
  background: var(--warn-tint, #f7efdc);
  border-width: 1px;
  border-style: dashed;
}

.status[data-status="under-offer"]::before {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* Let - flat, square cornered, bar glyph */
.status[data-status="let"] {
  color: var(--let, #5a5f5c);
  background: var(--let-tint, #eceeeb);
  border-width: 1px;
  border-style: solid;
  border-radius: 0;
}

.status[data-status="let"]::before {
  height: 0.2rem;
}

/* Unknown - the shipped neutral state, hollow ring glyph */
.status[data-status="unknown"] {
  color: var(--ink-soft, #3d3931);
  background: var(--unknown-tint, #f2efe8);
  border-width: 1px;
  border-style: solid;
  border-color: var(--line-strong, #c9c1b1);
}

.status[data-status="unknown"]::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

/* --------------------------------------------------------------------------
   Summary
   -------------------------------------------------------------------------- */

.availability-summary,
.availability-summary-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
}

.availability-summary-line {
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: var(--fs-lg, 1.375rem);
  line-height: 1.25;
}

.availability-summary-line strong {
  font-weight: 400;
}

.availability-updated {
  margin: 0;
  color: var(--muted, #6f6a61);
  font-size: var(--fs-sm, 0.875rem);
}

.availability-summary span {
  color: var(--muted, #6f6a61);
}

@media (min-width: 40em) {
  .availability-summary-block {
    align-items: center;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .office-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .office-card {
    break-inside: avoid;
    background: #fff;
    border: 1pt solid #000;
    box-shadow: none;
  }

  .office-card-media {
    display: none;
  }

  .status {
    border-width: 2px;
    background: #fff;
    color: #000;
  }
}