/* Zakhey home blocks. Everything is scoped under .zhb so the theme's rules and ours stay apart;
   the theme's own rules for h2, h3, p, ul and a are reset inside it. Measurements are the
   designer's (main page redesign, «2 blocks under categories», 1508 px wide). Sizes follow the
   block's own width (container queries), not the window's, so the block works in any position. */

@font-face { font-family: "Zakhey Serif Text"; src: url("fonts/zakhey-serif-text-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Zakhey Serif Text"; src: url("fonts/zakhey-serif-text-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Zakhey Serif Title"; src: url("fonts/zakhey-serif-title-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

.zhb {
  --zhb-ink: #3f2405;
  --zhb-muted: #816a50;
  --zhb-card: #f5f0e7;
  --zhb-card-line: #e1d7c7;
  --zhb-chip: #ffffff;
  --zhb-chip-line: #d5c5ac;
  --zhb-text: "Zakhey Serif Text", "PT Serif", Georgia, "Times New Roman", serif;
  --zhb-chip-font: "Zakhey Serif Title", "Zakhey Serif Text", Georgia, "Times New Roman", serif;
  container: zhb / inline-size;
  /* The theme spaces modules from above (#62 has margin-top 30px, the mobile catalogue button
     10px, none below), so this block does the same: no gap after the button, no doubled gap before #62. */
  margin: 30px 0 0;
  color: var(--zhb-ink);
  font-family: var(--zhb-text);
}
.zhb *, .zhb *::before, .zhb *::after { box-sizing: border-box; }
.zhb h2, .zhb h3, .zhb p, .zhb ul, .zhb li { margin: 0; padding: 0; border: 0; background: none; text-transform: none; letter-spacing: normal; }
.zhb ul { list-style: none; }
.zhb a { color: inherit; text-decoration: none; }
.zhb a:focus-visible { outline: 2px solid var(--zhb-muted); outline-offset: 2px; }

.zhb-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.zhb-card {
  container: zhb-card / inline-size;
  min-width: 0;
  background: var(--zhb-card);
  border: 1px solid var(--zhb-card-line);
  border-radius: 8px;
}
/* Text top left, chips bottom left, photo on the right across both. */
.zhb-card__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "body media" "chips media";
  column-gap: 20px;
  height: 100%;
  padding: 32px 23px 32px 24px;
}
.zhb-card__body { grid-area: body; min-width: 0; }
.zhb .zhb-card__heading {
  font-family: var(--zhb-text);
  font-weight: 400;
  font-size: 32px;
  line-height: 38px;
  color: var(--zhb-ink);
}
.zhb-card__main { margin-top: 55px; }
.zhb .zhb-card__kicker {
  font-family: var(--zhb-text);
  font-size: 20px;
  line-height: 22px;
  color: var(--zhb-muted);
}
.zhb .zhb-card__title {
  font-family: var(--zhb-text);
  font-weight: 700;
  font-size: 32px;
  line-height: 36px;
  color: var(--zhb-ink);
}
.zhb .zhb-card__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.zhb .zhb-card__text {
  margin-top: 19px;
  font-family: var(--zhb-text);
  font-size: 20px;
  line-height: 23px;
  color: var(--zhb-ink);
}
.zhb .zhb-card__price { font-weight: 700; white-space: nowrap; }

.zhb .zhb-card__chips {
  grid-area: chips;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 380px;
  padding-top: 24px;
}
.zhb .zhb-chip {
  display: inline-block;
  padding: 0 9px;
  font-family: var(--zhb-chip-font);
  font-size: 14.4px;
  line-height: 21px;
  color: var(--zhb-ink);
  background: var(--zhb-chip);
  border: 1px solid var(--zhb-chip-line);
  border-radius: 8px;
  transition: border-color .15s ease, background-color .15s ease;
}
.zhb .zhb-chip:hover { border-color: var(--zhb-muted); background: #fbf8f2; }

.zhb-card__media {
  grid-area: media;
  align-self: start;
  display: block;
  width: 249px;
  aspect-ratio: 249 / 318;
  overflow: hidden;
  border-radius: 8px;
}
.zhb-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* A slow zoom inside the fixed frame while the pointer is on the photo; not on touch screens,
   not for visitors who ask for less motion. isolation keeps the rounded corners clipping it in Safari. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zhb-card__media { isolation: isolate; }
  .zhb-card__media img { transition: transform .45s cubic-bezier(.2, .6, .3, 1); }
  .zhb-card__media:hover img { transform: scale(1.05); }
}

/* Too narrow for two cards side by side: one under the other. */
@container zhb (max-width: 999px) {
  .zhb-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
/* A card of 640-719 px (two cards on a 1366-1500 px page): the heading one step smaller, so the
   designer's one-line headings stay on one line. */
@container zhb-card (max-width: 719px) {
  .zhb .zhb-card__heading { font-size: 28px; line-height: 38px; }
}
/* A card of 480-639 px (two cards on a 1000-1300 px page): smaller photo and type. */
@container zhb-card (max-width: 639px) {
  .zhb-card__inner { padding: 24px 20px; column-gap: 16px; }
  .zhb .zhb-card__heading { font-size: 26px; line-height: 32px; }
  .zhb-card__main { margin-top: 32px; }
  .zhb .zhb-card__kicker { font-size: 17px; line-height: 22px; }
  .zhb .zhb-card__title { font-size: 26px; line-height: 31px; }
  .zhb .zhb-card__text { font-size: 17px; line-height: 22px; margin-top: 12px; }
  .zhb-card__media { width: min(200px, 36cqi); }
}
/* A phone: the chips take the card's full width under the text and photo. */
@container zhb-card (max-width: 479px) {
  .zhb-card__inner { grid-template-rows: auto auto; grid-template-areas: "body media" "chips chips"; padding: 16px; column-gap: 14px; }
  .zhb .zhb-card__heading { font-size: 22px; line-height: 27px; }
  .zhb-card__main { margin-top: 16px; }
  .zhb .zhb-card__kicker { font-size: 15px; line-height: 19px; }
  .zhb .zhb-card__title { font-size: 22px; line-height: 27px; }
  .zhb .zhb-card__text { font-size: 15px; line-height: 20px; margin-top: 8px; }
  .zhb .zhb-card__chips { max-width: none; gap: 6px; padding-top: 14px; }
  .zhb .zhb-chip { font-size: 13px; line-height: 20px; padding: 0 7px; }
  .zhb-card__media { width: 38cqi; }
}
/* Browsers without container queries get the desktop layout, stacked on small screens. */
@supports not (container-type: inline-size) {
  @media (max-width: 991px) {
    .zhb-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .zhb-card__media { width: 36%; }
  }
}