/* Page-specific only - the design system lives in css/all/cgk-site-style.css */

/* The hero is a dark plate in BOTH themes. .page-head paints --brand-deep,
   which turns light blue in dark mode and left white text on baby blue.
   A literal, not a token, so it cannot invert. */
.tenants-head { background: #173B4C; }

/* ---- Guides band, right under the hero ---- */
.guides-band { background: var(--brand-wash); border-bottom: 1px solid var(--line); }

.guides-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.75rem 3rem;
  align-items: end;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.guides-band .label { color: var(--brand); }
.guides-band h2 { font-size: clamp(1.625rem, 3.2vw, 2.25rem); margin-top: 0.875rem; max-width: 24ch; }

.guide-topics {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.5rem 2.5rem;
}

.guide-topics li { position: relative; padding-left: 1.125rem; color: var(--ink-soft); }
.guide-topics li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.8em;
  width: 0.5rem; height: 1px;
  background: var(--brand);
}

.guides-band .btn { white-space: nowrap; }

@media (max-width: 780px) {
  .guides-inner { grid-template-columns: 1fr; }
  .guide-topics { grid-template-columns: 1fr; }
  .guides-band .btn { display: block; text-align: center; font-size: 0.8125rem; padding-block: 1.125rem; }
}

/* ---- Concierge section ---- */
.office-line { font-size: 1.0625rem; }
.directory:not([hidden]) + .office-line { margin-top: 1.5rem; }
/* Padding makes the number a thumb-sized target; the equal negative
   margin keeps it from pushing the wrapped line apart. */
.office-line a { display: inline-block; padding-block: 0.625rem; margin-block: -0.625rem; color: var(--brand); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Emergencies: a mention in the flow, not a banner */
.danger-note {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding: 1.125rem 1.375rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
}

.danger-note svg { width: 22px; height: 22px; flex: none; color: var(--brand); margin-top: 2px; }
.danger-note b { display: block; color: var(--ink); font-weight: 600; }
.danger-note p { margin-top: 0.25rem; color: var(--ink-soft); font-size: 0.9375rem; }

/* ---- Day to day: one line per card ---- */
.tenants-tasks .task p { font-size: 1rem; }

/* Phones: icon beside the title, so six cards fit in about one screen */
@media (max-width: 620px) {
  .tenants-tasks { gap: 0.75rem; }
  .tenants-tasks .task { display: grid; grid-template-columns: 22px 1fr; column-gap: 1rem; padding: 1.25rem; }
  .tenants-tasks .task svg { grid-row: span 2; margin-top: 0.1875rem; }
  .tenants-tasks .task h3 { margin: 0 0 0.25rem; }
}

/* ---- House rules ---- */
.rules { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.rules li { padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); max-width: 52ch; }
.rules b { color: var(--ink); font-weight: 600; }
.rules a { color: var(--brand); }