/* ==========================================================================
   Home 02 — "I Don't Just Consult. I Run Businesses."
   Markup: resources/views/components/businesses/*.blade.php
   Data: config/site.php (businesses) · config/businesses_section.php (copy)

   Cards: horizontal rows on phones → 2 columns (640) → 4 in a row (1200),
   where subgrid lines up photo, name, rating, summary, tags and link.
   Motion: transform/opacity only; reduced motion is handled in base.css.
   ========================================================================== */

.biz {
  --biz-pad: calc(var(--hdr-inset) + var(--hdr-pad)); /* same content edge as the header and hero */

  background: var(--warm-50);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(48px, 5.5vw, 88px) clamp(40px, 4.5vw, 72px); /* owner 2026-09-29: no wasted space */
}

.biz__wrap {
  max-width: var(--hdr-max);
  margin-inline: auto;
  padding-inline: var(--biz-pad);
}

/* ---- Head ---------------------------------------------------------------- */

.biz__head {
  display: grid;
  gap: 20px 32px;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}

@media (min-width: 1024px) {
  .biz__head {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.7fr);
    align-items: stretch;
  }
}

/* Condensed caps via the font's width axis: loud, but one step under the hero H1. */
.biz__title {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-size: clamp(1.875rem, 0.9rem + 4.3vw, 4.25rem);
  font-weight: 700;
  font-stretch: 75%;
  line-height: 0.96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.biz__title-line { display: block; }
.biz__title-line--accent { color: var(--blue-600); }

.biz__lede {
  max-width: 40rem;
  margin-top: 18px;
  color: var(--slate-700);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- Aside: handwritten note + Rishikesh sketch ------------------------------ */

.biz__aside { display: none; }

.biz-note {
  position: relative;
  width: max-content;
  padding-bottom: 46px;
  color: var(--slate-700);
  font-family: var(--font-hand);
  font-size: 1.125rem;
  line-height: 1.3;
  transform: rotate(-6deg);
}

.biz-note span { display: block; }

.biz-note__arrow {
  position: absolute;
  left: 18%;
  bottom: -2px;
  width: 52px;
  height: 46px;
  color: var(--ink-900);
}

/* Tablets: the note only, under the intro. */
@media (min-width: 640px) {
  .biz__aside { display: block; justify-self: end; margin-right: 6%; }
  .biz-sketch { display: none; }
}

/* Desktop: sketch fills the right column, note on its left edge, arrow down to the cards. */
@media (min-width: 1024px) {
  .biz__aside {
    position: relative;
    justify-self: stretch;
    min-height: 260px;
    margin: 0;
  }

  .biz-sketch {
    position: absolute;
    inset: -8px 0 0 22%;
    display: block;
  }

  .biz-sketch__art {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    color: var(--slate-500);
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  }

  .biz-note {
    position: absolute;
    left: 0;
    top: 26%;
    font-size: 1.375rem;
  }

  .biz-note__arrow { width: 60px; height: 54px; }
}

.biz-sketch__place {
  position: absolute;
  top: 0;
  right: 2%;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--slate-600);
  font-family: var(--font-hand);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.biz-sketch__place .icon { flex-shrink: 0; margin-top: 1px; }
.biz-sketch__place span span { display: block; }

/* Arrow draws itself when the aside scrolls in (only if it started off-screen). */
.biz__aside.reveal .biz-note__arrow path { stroke-dasharray: 100; stroke-dashoffset: 100; }
.biz__aside.reveal.is-in .biz-note__arrow path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 700ms var(--ease-out) 400ms;
}

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

.biz__grid {
  display: grid;
  gap: 14px;
}

@media (min-width: 640px) {
  .biz__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (min-width: 1200px) {
  .biz__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(7, auto);
    column-gap: 20px;
    row-gap: 0;
  }
  .biz-card {
    grid-row: span 7;
    display: grid;
    grid-template-rows: subgrid;
  }
}

.biz__asof {
  margin-top: 12px;
  color: var(--slate-600);
  font-size: 0.8125rem;
  text-align: right;
}

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

.biz-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 16px 32px -26px rgb(15 23 42 / 0.35);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

/* Hover shadow on a pseudo-element so only its opacity animates. */
.biz-card__body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 30px 54px -30px rgb(15 23 42 / 0.42);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}

@media (min-width: 1200px) {
  .biz-card__body {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
  }
}

@media (hover: hover) {
  .biz-card__body:hover { transform: translateY(-5px); border-color: var(--blue-600); }
  .biz-card__body:hover::before { opacity: 1; }
  .biz-card__body:hover .biz-card__media img { transform: scale(1.04); }
  .biz-card__body:hover .biz-card__link .icon { transform: translateX(4px); }
}

.biz-card__body:focus-within { border-color: var(--blue-600); }

.biz-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
  background: var(--slate-100);
}

.biz-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-out);
}

.biz-card__pill {
  position: absolute;
  left: 14px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgb(253 253 254 / 0.95);
  box-shadow: 0 2px 8px -2px rgb(15 23 42 / 0.30);
  color: var(--ink-900);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.biz-card__name,
.biz-card__place,
.biz-card__rating,
.biz-card__summary,
.biz-card__tags,
.biz-card__link { margin-inline: 20px; }

.biz-card__name {
  margin-top: 18px;
  margin-bottom: 0;
  color: var(--ink-900);
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.biz-card__place {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--slate-600);
  font-size: 0.9375rem;
}

.biz-card__place .icon { flex-shrink: 0; color: var(--slate-400); }

/* Its own link (to the Google listing), above the card-wide link. */
.biz-card__rating {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  min-height: 32px;
  margin-top: 8px;
  border-radius: var(--r-sm);
  color: var(--slate-700);
  font-size: 0.9375rem;
  text-decoration: none;
}

.biz-card__rating strong {
  margin-left: 2px;
  color: var(--ink-900);
  font-size: 1.0625rem;
  font-weight: 700;
}

.biz-card__rating:hover span:not(.sr-only):last-of-type { text-decoration: underline; text-underline-offset: 3px; }

.biz-card__g { display: grid; }
.biz-card__g svg { width: 18px; height: 18px; }

.biz-card__star {
  color: var(--amber-500);
  fill: currentColor;
}

.biz-card__summary {
  margin-top: 10px;
  color: var(--slate-700);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.biz-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  margin-top: 14px;
}

.biz-card__tags li {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--blue-600) 16%, var(--paper));
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue-600) 6%, var(--paper));
  color: var(--slate-700);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.biz-card__link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 44px;
  margin-top: auto;
  padding: 14px 0 16px;
  color: var(--blue-700);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

@media (min-width: 1200px) {
  .biz-card__link { align-self: end; }
}

/* The whole card is the website link's hit area; the ring goes round the card. */
.biz-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-xl);
}

.biz-card__link:focus-visible { outline: none; }
.biz-card__link:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.biz-card__link .icon { transition: transform var(--t-base) var(--ease-out); }

/* Phones: a row per business — photo left, facts right; the one-line summary
   repeats the pill + place, so it steps aside here. */
@media (max-width: 639.98px) {
  .biz-card__body {
    display: grid;
    grid-template-columns: minmax(120px, 38%) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "media name"
      "media place"
      "media rating"
      "media tags"
      "media link";
    column-gap: 14px;
  }

  .biz-card__media {
    grid-area: media;
    aspect-ratio: auto;
    min-height: 100%;
    border-radius: calc(var(--r-xl) - 1px) 0 0 calc(var(--r-xl) - 1px);
  }

  .biz-card__media picture,
  .biz-card__media img { position: absolute; inset: 0; }

  .biz-card__pill { left: 8px; bottom: 8px; padding: 4px 9px; font-size: 0.75rem; }

  .biz-card__name,
  .biz-card__place,
  .biz-card__rating,
  .biz-card__tags,
  .biz-card__link { margin-inline: 0 14px; }

  .biz-card__name { grid-area: name; margin-top: 14px; font-size: 1.1875rem; }
  .biz-card__place { grid-area: place; font-size: 0.875rem; }
  .biz-card__rating { grid-area: rating; margin-top: 4px; font-size: 0.875rem; }
  .biz-card__summary { display: none; }
  .biz-card__tags { grid-area: tags; margin-top: 8px; gap: 5px; }
  .biz-card__tags li { padding: 3px 8px; font-size: 0.75rem; }
  .biz-card__link { grid-area: link; padding: 6px 0 10px; font-size: 0.9375rem; }
}

/* ---- Proof strip ------------------------------------------------------------- */

.biz-proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  margin-top: clamp(18px, 2.2vw, 28px);
  padding: 20px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--paper) 65%, var(--slate-100));
}

.biz-proof__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.biz-proof__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--color-primary-soft);
  color: var(--blue-600);
}

.biz-proof__title {
  display: block;
  color: var(--ink-900);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.biz-proof__text {
  display: block;
  margin-top: 2px;
  color: var(--slate-600);
  font-size: 0.9375rem;
  line-height: 1.35;
}

@media (min-width: 640px) {
  .biz-proof__item { flex-direction: row; align-items: center; gap: 14px; }
}

@media (min-width: 1200px) {
  .biz-proof {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 22px 28px;
  }
  .biz-proof__item + .biz-proof__item {
    padding-left: 24px;
    margin-left: 24px;
    border-left: 1px solid var(--color-border);
  }
}