/* Hero B — "ใบงานเต็มรูปแบบ": the first screen is a work order; the stamp tells the real open/closed state. */

.hb {
  min-height: 100svh;
  padding: 0.75rem 0.75rem calc(var(--bar-h) + 0.75rem);
  background: var(--ink);
  display: flex;
}

.hb__sheet {
  --line: rgba(242, 238, 232, 0.07);
  position: relative;
  flex: 1;
  min-width: 0;                  /* never let a long headline widen the sheet past the screen */
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1.25rem;
  border: 1px solid var(--rule);
  background-color: var(--steel);
  /* 8mm form grid */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* crop marks at the sheet's corners */
.hb__corner { position: absolute; width: 14px; height: 14px; border: 0 solid var(--paper); }
.hb__corner--tl { top: -5px; left: -5px; border-top-width: 2px; border-left-width: 2px; }
.hb__corner--tr { top: -5px; right: -5px; border-top-width: 2px; border-right-width: 2px; }
.hb__corner--bl { bottom: -5px; left: -5px; border-bottom-width: 2px; border-left-width: 2px; }
.hb__corner--br { bottom: -5px; right: -5px; border-bottom-width: 2px; border-right-width: 2px; }

.hb__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--paper);
}
.hb__shop { font-family: var(--font-head); font-variation-settings: "wdth" 75; font-weight: 800; font-size: 1.125rem; line-height: 1.2; }
.hb__meta { display: flex; gap: 0.875rem; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.hb__photo { position: relative; margin: 0.875rem 0 0; border: 1px solid var(--rule); }
/* the attached photo takes whatever height the form leaves free, never less than a strip */
.hb__photo { flex: 1 1 0; min-height: 9rem; }
/* clip box: lets the photo drift on scroll without the stamp (which hangs outside the frame) being cut */
.hb__photo-clip { position: absolute; inset: 0; overflow: hidden; }
/* warm work-light grade so any daylight demo photo sits in the docket */
.hb__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 62%; display: block; filter: sepia(0.5) saturate(0.95) contrast(1.12) brightness(0.8); }

/* rubber stamp: ink edge roughened with a noise mask */
.hb__stamp {
  position: absolute;
  right: -0.25rem;
  bottom: -1.25rem;
  display: grid;
  justify-items: center;
  padding: 0.5rem 0.875rem 0.5rem;
  border: 3px solid currentColor;
  outline: 1px solid currentColor;
  outline-offset: 3px;
  color: var(--accent);
  background: rgba(14, 14, 14, 0.9);
  transform: rotate(-7deg);
  font-family: var(--font-head);
  font-variation-settings: "wdth" 75;
  line-height: 1.15;
  text-align: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='1'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hb__stamp[data-state="closed"], .hb__stamp[data-state="later"] { color: var(--paper); }
.hb__stamp-title { font-weight: 900; font-size: 1.375rem; }
.hb__stamp-sub { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; }

.hb__titlebox { padding-top: 2.25rem; min-width: 0; }   /* clears the stamp hanging below the photo */
.hb__title {
  --fit-h: 0.27;                 /* phone: headline may take up to this share of the screen height */
  margin: 0 0 0.75rem;
  padding-top: 0.3em;            /* room for stacked Thai marks (e.g. ซ่อมท่อน้ำทิ้ง); scales with the fitted size */
  font-family: var(--font-head);
  font-weight: 900;
  font-variation-settings: "wdth" 75;
  font-size: 3rem;               /* replaced by fitText */
  line-height: 1.1;
  text-wrap: balance;
}
/* the shop typed its own line breaks in the Sheet: keep them, never re-wrap */
.hb__title.has-breaks { white-space: pre; }

.hb__rows { margin: 0; border-top: 1px solid var(--rule); }
.hb__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--rule);
}
.hb__row dt { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); letter-spacing: 0.02em; }
.hb__row dd { margin: 0; font-variant-numeric: tabular-nums; }
.hb__row--price dd { font-family: var(--font-head); font-variation-settings: "wdth" 75; font-weight: 700; font-size: 1.125rem; }
.hb__num { font-size: 2.25rem; font-weight: 800; color: var(--accent); line-height: 1; }
.hb__proof { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.hb__proof > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.hb__proof span span { color: var(--muted); }

@media (min-width: 900px) {
  .hb { padding: 1.5rem 1.5rem 1.5rem; }
  .hb__sheet {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    column-gap: 3rem;
    padding: 1.5rem 2rem 2rem;
  }
  /* header row is tall enough to hold the call + chat buttons inside the frame */
  .hb__head { grid-column: 1 / -1; align-items: center; min-height: 3.25rem; padding-right: 23rem; }
  .actionbar { position: absolute; inset: calc(3rem + 1px) calc(3.5rem + 1px) auto auto; } /* scrolls away with the header */
  .hb__shop { font-size: 1.375rem; }
  .hb__meta { font-size: 0.875rem; }
  /* the headline runs across both columns and over the photo's edge, as large as the free space allows */
  .hb__titlebox { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: flex-end; padding-top: 1.25rem; position: relative; z-index: 1; min-height: 0; }
  .hb__title { --fit-mode: fill; margin-bottom: 1rem; }
  .hb__rows { grid-column: 1; grid-row: 3; }
  .hb__photo { grid-column: 2; grid-row: 2 / 4; margin-top: 1.5rem; min-height: 0; }
  /* the headline crosses the photo here, so the photo drops further to keep the letters >= 3:1 */
  .hb__photo img { filter: sepia(0.5) saturate(0.95) contrast(1.05) brightness(0.55); }
  .hb__stamp { right: auto; left: -2.5rem; bottom: 2.5rem; }
  .hb__stamp-title { font-size: 1.75rem; }
  .hb__row { grid-template-columns: 7rem 1fr; }
  .hb__num { font-size: 2.75rem; }
}

/* one authored moment: the form prints row by row, then the stamp comes down */
@media (prefers-reduced-motion: no-preference) {
  .hb__head { animation: hb-rule 0.7s var(--ease-out) both; }
  /* reveal only: clip + transform never re-wrap the headline or move the rows below it */
  .hb__title { animation: hb-rise 0.9s var(--ease-out) 0.15s both; }
  .hb__row { animation: hb-print 0.5s var(--ease-out) both; }
  .hb__row:nth-child(1) { animation-delay: 0.45s; }
  .hb__row:nth-child(2) { animation-delay: 0.55s; }
  .hb__row:nth-child(3) { animation-delay: 0.65s; }
  .hb__row:nth-child(4) { animation-delay: 0.75s; }
  .hb__stamp { animation: hb-stamp 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1.15s both; }

  @keyframes hb-rule { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  /* end state reaches past the box so marks that overhang the line box are never cut */
  @keyframes hb-rise { from { clip-path: inset(0 0 100% 0); transform: translateY(0.25em); } to { clip-path: inset(-0.5em -0.5em -0.5em -0.5em); transform: none; } }
  @keyframes hb-print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes hb-stamp {
    0%   { transform: rotate(-16deg) scale(1.9); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: rotate(-7deg) scale(1); opacity: 1; }
  }
}