/* ============================================================
   Jackfruit Global — css/home.css
   Layout only, for /home-tutors.

   Every control is an existing component — .card .field .input
   .select .check .badge .btn — so nothing here restyles one.
   This file arranges them and adds the three things the
   component set does not have: the filter row, the result card,
   and the day pills.

   Tokens are read with fallbacks, so a renamed variable
   degrades to a sensible fixed value rather than to black on
   black.
   ============================================================ */

.ht { max-width: 68rem; margin: 0 auto; }

.ht__preview {
  padding: var(--sp-3, 1rem);
  margin-bottom: var(--sp-4, 1.5rem);
  border-left: 3px solid var(--accent, #8C5F12);
}

.ht__head { margin-bottom: var(--sp-4, 1.5rem); }
.ht__head .t-lead { max-width: 42rem; }

/* ---------- Filters ---------- */
.ht__filters {
  padding: var(--sp-4, 1.5rem);
  margin-bottom: var(--sp-3, 1rem);
}

.ht__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3, 1rem);
  align-items: flex-start;
}

.ht__row > .field { flex: 1 1 12rem; min-width: 0; margin-bottom: 0; }

/* Subject is the field people actually type in, so it gets the
   room. City and Area come next because location is the filter
   that decides whether a tutor is usable at all. */
.ht__f-subject { flex: 2 1 14rem !important; }
.ht__f-city    { flex: 0 1 11rem !important; }
.ht__f-area    { flex: 1 1 12rem !important; }
.ht__f-level   { flex: 0 1 11rem !important; }
.ht__f-gender  { flex: 0 1 7.5rem !important; }
.ht__f-sort    { flex: 0 1 12rem !important; }

.ht__avail {
  margin-top: var(--sp-3, 1rem);
  border-top: 1px solid var(--border, #E5E1D6);
  padding-top: var(--sp-2, .5rem);
}

.ht__avail-sum {
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
  padding: .3rem 0;
  list-style-position: inside;
}

.ht__avail-body { margin-top: var(--sp-3, 1rem); align-items: flex-end; }

.ht__fs { border: 0; padding: 0; margin: 0; flex: 1 1 22rem; min-width: 0; }

.ht__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3, 1rem);
  flex-wrap: wrap;
  margin-top: var(--sp-4, 1.5rem);
  padding-top: var(--sp-3, 1rem);
  border-top: 1px solid var(--border, #E5E1D6);
}

.ht__go { min-width: 12rem; }

/* ---------- Pills ---------- */
.ht__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .3rem 0 .4rem;
}

.ht__pill { position: relative; }

.ht__pill input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.ht__pill span {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid var(--border, #E5E1D6);
  border-radius: 999px;
  background: var(--surface, #fff);
  font-size: .88rem;
  line-height: 1.2;
}

.ht__pill input:checked + span {
  background: var(--forest, #174A3A);
  border-color: var(--forest, #174A3A);
  color: #fff;
}

/* The ring has to come off the hidden input, or a keyboard user
   tabbing the pills sees nothing move. */
.ht__pill input:focus-visible + span {
  outline: 2px solid var(--accent, #8C5F12);
  outline-offset: 2px;
}

/* ---------- Area chips ---------- */
.ht__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: var(--sp-4, 1.5rem);
}

.ht__chips a { text-decoration: none; }
.ht__chips a:hover { border-color: var(--accent, #8C5F12); }

.ht__count { margin: 0 0 var(--sp-3, 1rem); }

/* ---------- Results ---------- */
.ht__list {
  list-style: none;
  margin: 0 0 var(--sp-4, 1.5rem);
  padding: 0;
  display: grid;
  gap: var(--sp-3, 1rem);
}

.ht__card { padding: var(--sp-4, 1.5rem); }

.ht__card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3, 1rem);
  flex-wrap: wrap;
}

.ht__name { margin: 0 0 .15rem; font-size: 1.15rem; }

.ht__headline {
  margin: 0;
  color: var(--text-muted, #5A6260);
  font-size: .92rem;
}

.ht__badges { display: flex; gap: .35rem; flex-wrap: wrap; }

.ht__subjects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: var(--sp-3, 1rem) 0 0;
}

/* ---------- The facts ---------- */
.ht__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .5rem var(--sp-4, 1.5rem);
  margin: var(--sp-3, 1rem) 0 0;
}

.ht__meta > div { min-width: 0; }

.ht__meta dt {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted, #5A6260);
}

.ht__meta dd { margin: 0; font-size: .92rem; }

.ht__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 1rem);
  flex-wrap: wrap;
  margin-top: var(--sp-4, 1.5rem);
  padding-top: var(--sp-3, 1rem);
  border-top: 1px solid var(--border, #E5E1D6);
}

.ht__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3, 1rem);
  margin-bottom: var(--sp-5, 2rem);
}

.ht__empty { padding: var(--sp-5, 2rem); text-align: center; }
.ht__empty .t-lead { max-width: 34rem; margin: 0 auto var(--sp-4, 1.5rem); }

/* ---------- Request ---------- */
.ht__request {
  padding: var(--sp-4, 1.5rem);
  margin-top: var(--sp-5, 2rem);
  scroll-margin-top: 5rem;
  border-color: var(--accent, #8C5F12);
}

.ht__request .ht__row { margin-bottom: var(--sp-3, 1rem); }

.ht__asking {
  padding: .5rem .8rem;
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-sunken, #F5F2EA);
  margin: 0 0 var(--sp-3, 1rem);
}

.ht__actions { margin-top: var(--sp-4, 1.5rem); }

/* The honeypot. Moved off screen rather than display:none —
   some bots skip anything display:none, and this one is meant to
   be found by them and by nobody else. */
.ht__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Mobile ---------- */
@media (max-width: 44rem) {
  .ht__f-subject,
  .ht__f-city,
  .ht__f-area,
  .ht__f-level,
  .ht__f-gender,
  .ht__f-sort { flex: 1 1 100% !important; }

  .ht__row > .field { margin-bottom: var(--sp-3, 1rem); }

  .ht__foot { align-items: stretch; }
  .ht__go { width: 100%; }

  .ht__card-foot { align-items: flex-start; }
  .ht__ask { width: 100%; }

  .ht__meta { grid-template-columns: 1fr; }
}

/* ============================================================
   The homepage block — partials/homeblock.php

   It reuses .ht__filters and the .ht__f-* widths above, so the
   filter row on the homepage and the one on /home-tutors are
   the same control. Everything below is scoped to .ht-home, so
   tuning the homepage cannot move the results page — which is
   already shipped, screenshotted and tested.

   ------------------------------------------------------------
   IT IS THE HERO'S CARD, DELIBERATELY

   The hero search is a WHITE card: 14px radius, a hairline
   border, and a soft forest-tinted shadow. This block was a
   sunken beige one, which on the ivory ground barely read as a
   card at all — it looked like a form that had been left on the
   page rather than a second way in.

   These numbers are lifted from .hero__search in index.php,
   not approximated: same radius, same padding, same shadow.
   Two searches on one page should look like two of the same
   thing, because that is what they are.
   ============================================================ */

.ht-home__sub {
  margin: var(--sp-1, .25rem) 0 var(--sp-3, 1rem);
  max-width: 60ch;
}

/* The hero's card, to the pixel. */
.ht-home__form {
  background: #fff;
  border: 1px solid var(--border, #E5E1D6);
  border-radius: 14px;
  padding: var(--sp-2, .5rem);
  box-shadow: 0 10px 30px rgba(23, 74, 58, .07);
  margin-bottom: 0;
}

/* ------------------------------------------------------------
   ONE ROW, AND THE BUTTON ON THE END OF IT

   The five fields had fixed-ish widths and no grow, so at any
   width they did not exactly fill they left a gap, the button
   could not fit beside them, and it dropped to a line of its
   own — reading as a separate step rather than the end of the
   row. The hero does not do that: Search sits at the end of
   its row and the fields share what is left.

   So every field grows now, and the button is the only thing
   that does not. align-items:flex-end lines the controls up by
   their bottoms, which is what matters when the labels above
   them are different lengths.
   ------------------------------------------------------------ */
.ht-home .ht__row {
  gap: var(--sp-2, .5rem);
  align-items: flex-end;
}

/* Retuned after the column narrowed to .hero__in's 62rem. The
   card is 130px tighter than it was, and at the old weights
   "Anywhere in the city" lost its last two words. Area and
   Subject carry the growth; Tutor is a three-option select and
   needs almost none. */
.ht-home .ht__f-subject { flex: 2.1 1 10.5rem !important; }
.ht-home .ht__f-city    { flex: 1.2 1 7rem   !important; }
.ht-home .ht__f-area    { flex: 1.2 1 7.5rem !important; }
.ht-home .ht__f-level   { flex: 1 1 6.75rem  !important; }
.ht-home .ht__f-gender  { flex: .8 1 6.25rem !important; }

.ht-home__go {
  flex: 0 0 auto !important;
  align-self: flex-end;
}

/* 48px, not 44. The hero's Search is 48 and these two sit eight
   hundred pixels apart on the same page — a four-pixel
   difference between them is the kind of thing nobody names and
   everybody feels. */
.ht-home__go .btn {
  min-height: 48px;
  padding-inline: var(--sp-2, .5rem);
  white-space: nowrap;
}

/* The label row above the controls, matching the hero's. */
.ht-home .field__label { margin-bottom: .25rem; }

/* A little air inside the card. The hero's has three tabs above
   its row giving it height; this one is a single row, and at the
   hero's own padding it read as a strip rather than a card. */
.ht-home__form { padding: var(--sp-3, 1rem); }

@media (max-width: 44rem) {
  .ht-home .ht__f-subject,
  .ht-home .ht__f-city,
  .ht-home .ht__f-area,
  .ht-home .ht__f-level,
  .ht-home .ht__f-gender { flex: 1 1 100% !important; }

  .ht-home__go { flex: 1 1 100% !important; }
  .ht-home__go .btn { width: 100%; }
}


/* ============================================================
   THE HOMEPAGE BLOCK, AT HERO SCALE

   The founder's call, 4 Sep 2026: "Find the right tutor in your
   area." is to be set like "Real Classes. Verified Instructors."
   — same size, same style, same colour — with the two bands
   blending into each other rather than meeting at a rule.

   So every number below is copied out of .hero__h1 and
   .hero__sub in index.php rather than approximated. If the hero
   is ever retuned, these want retuning with it; that is the cost
   of two things being deliberately identical.

   The consequence worth naming: the homepage now has two
   headings at page scale. That reads as two equal propositions —
   learn online, or have someone come to you — which is a claim
   about the business, not just about type. It is the right claim
   if home tutoring is a pillar rather than an extra.
   ============================================================ */

/* Same clamp, leading, tracking, measure and colour as .hero__h1. */
.ht-home h2 {
  font-size: clamp(2.1rem, 5.6vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
  color: var(--ink, #202725);
}

/* And the subhead follows, or an h1-sized heading sits on top of
   a caption. Same size and colour as .hero__sub. */
.ht-home__sub {
  font-size: var(--fs-2, 1.0625rem);
  color: var(--grey-700, #3A443F);
  margin: var(--sp-2, .5rem) 0 var(--sp-3, 1rem);
  max-width: 54ch;
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   THE SEAM

   The hero is a full-width wash that stops dead at a 1px rule;
   below it the page ground starts. Two bands, one hard edge.

   This carries the hero's own base colour down through the block
   and fades it out, so the wash ends where the eye stops looking
   rather than where a border is drawn.

   Full-bleed from inside a .container, without touching the
   hero's own markup: the pseudo-element is pulled out to the
   viewport edges with `inset: 0 calc(50% - 50vw)`. 50vw includes
   the scrollbar on some browsers, which is how this trick
   normally causes a horizontal scrollbar — measured at 390, 768
   and 1280 before shipping, and it does not here.
   ------------------------------------------------------------ */
.ht-home { position: relative; }

.ht-home::before {
  content: "";
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: linear-gradient(
      to bottom,
      var(--surface-sunken, #F5F2EA) 0%,
      rgba(245, 242, 234, .6) 42%,
      rgba(245, 242, 234, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

/* The inner column, and it is .hero__in's number.

   The hero indents its content to 62rem inside the container.
   Without this the two headings are the same size, the same
   colour, and visibly not lined up — which reads worse than not
   matching at all. The z-index keeps it above the gradient. */
.ht-home__in {
  position: relative;
  z-index: 1;
  max-width: 62rem;
}

/* The rule under the hero is the edge itself. It goes ONLY when
   this block is the next thing on the page — :has() means a
   browser that does not support it keeps today's look rather
   than losing a border it still needs, and the homepage with
   home tutoring switched off keeps it too. */
.hero:has(+ .ht-home) { border-bottom-color: transparent; }

/* The band's own spacing. The section is full width now — the
   .container inside it handles the gutters — so this is purely
   how much air sits above and below. */
.ht-home { padding: var(--sp-5, 2rem) 0; }