/*
 * home-base.css: pieces every home section shares (home page only): section-head text, the
 * feature-block frame, the kicker icon and pictures that fill their box.
 * Load order on the home page: fonts.css, base.css, top.css, bottom.css, home-base.css,
 * home-top.css, home-feat-a.css, home-feat-b.css, home-bottom.css.
 * The section files load after this one, so a section rule with the same weight wins.
 * Sections do not edit this file. They override inside their own root class.
 *
 *   1. Tokens
 *   2. Section-head text: .hb-kicker .hb-title .hb-sub (+ .hb-start)
 *   3. Feature-block frame: .hb-fblock (+ .hb-g40 .hb-wide) .hb-fhead .hb-krow .hb-kicon
 *   4. Pictures: .hb-pic .hb-fill
 *   5. Tablet  (810 to 1199.98)
 *   6. Mobile  (809.98 and below)
 *
 * Values are computed values of the original home page at 1440, 1024 and 390.
 * The faces are registered as weight 400, so every text rule keeps font-weight 400.
 */

/* 1. Tokens ------------------------------------------------------------------------ */
:root {
  --hb-kicker-color: rgb(133, 133, 133); /* feature, fee and testimonial kickers */
  --hb-sub-color: rgb(143, 143, 143);    /* feature subtitles (the partners subtitle is 120) */
}

/* 2. Section-head text ----------------------------------------------------------------
 * kicker  h3  Bold 22px / 1.5em      (tablet 20px, mobile 16px)  gray 133
 * title   h2  Bold 36px / 1.4em      (tablet 28px, mobile 22px)  #333
 * sub     h4  SemiBold 19px / 1.4em  (tablet 15px, mobile 14px)  gray 143
 * Title and sub are centered (feature blocks, partners, stats). .hb-start sets start alignment
 * and wrapping for the fee and testimonial heads. The kicker sits in .hb-krow at its own width
 * and does not wrap (white-space pre), as in the original.
 */
.hb-kicker,
.hb-title,
.hb-sub {
  margin: 0; padding: 0; font-style: normal; font-weight: 400; letter-spacing: normal;
  text-transform: none; text-decoration: none;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.hb-kicker {
  font-family: var(--font-bold); font-size: 22px; line-height: 1.5em;
  color: var(--hb-kicker-color); text-align: center; white-space: pre; flex: none;
}
.hb-title {
  font-family: var(--font-bold); font-size: 36px; line-height: 1.4em;
  color: var(--c-text); text-align: center;
}
.hb-sub {
  font-family: var(--font-semibold); font-size: 19px; line-height: 1.4em;
  color: var(--hb-sub-color); text-align: center;
}
.hb-start { text-align: start; white-space: pre-wrap; }

/* 3. Feature-block frame -----------------------------------------------------------------
 * .hb-fblock  one feature block: column, centered, clips overflow. 1000px wide on desktop,
 *             padding 60px 0, gap 32px. .hb-g40 = gap 40px (naver, insight, promo).
 *             .hb-wide = full inner width on desktop (ops, guest: 1240px).
 * .hb-fhead   the head box: column, gap 10px, items at the start, clips overflow, full width.
 *             Its clipping matters: an appear box shifted below the clip edge never reaches
 *             half visible and so never starts (the original booking subtitle stays hidden).
 * .hb-krow    the kicker row: icon + kicker, centered, gap 12px, clips overflow, full width.
 * .hb-kicon   the kicker icon box: 32px (mobile 24px).
 */
.hb-fblock {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 32px;
  width: 1000px; height: min-content; padding: 60px 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.hb-fblock.hb-g40 { gap: 40px; }
.hb-fblock.hb-wide { width: 100%; }
.hb-fhead {
  display: flex; flex-direction: column; flex-wrap: nowrap;
  align-items: flex-start; justify-content: center; gap: 10px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.hb-fhead > .hb-title,
.hb-fhead > .hb-sub { flex: none; width: 100%; position: relative; }
.hb-krow {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: min-content; padding: 0; margin: 0;
  flex: none; position: relative; overflow: hidden;
}
.hb-kicon { display: block; flex: none; width: 32px; height: 32px; }
/* The icon drawing fills its box in the text color (each section sets the color). */
.hb-kicon > svg {
  display: block; width: 100%; height: 100%; fill: currentColor;
  -webkit-user-select: none; user-select: none;
}

/* 4. Pictures ----------------------------------------------------------------------------
 * .hb-pic   the <picture> wrapper. It only picks the file: first the AVIF (or WebP) file the
 *           original image host sends to the same browser, else the PNG or JPG of the <img>.
 *           It draws no box of its own and hands the box corners on to the image.
 * .hb-fill  an image that fills its positioned box and follows its corners (cover, centered).
 */
.hb-pic { display: contents; border-radius: inherit; }
.hb-fill {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: block; width: 100%; height: 100%;
  border-radius: inherit; object-fit: cover; object-position: center;
}

/* 5. Tablet ------------------------------------------------------------------------------ */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .hb-kicker { font-size: 20px; }
  .hb-title { font-size: 28px; }
  .hb-sub { font-size: 15px; }
  .hb-fblock { width: 100%; }
}

/* 6. Mobile ------------------------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .hb-kicker { font-size: 16px; }
  .hb-title { font-size: 22px; }
  .hb-sub { font-size: 14px; }
  .hb-fblock,
  .hb-fblock.hb-g40 { width: 100%; padding: 40px 0; gap: 24px; }
  .hb-kicon { width: 24px; height: 24px; }
}