/* ==========================================================================
   Homepage additions (inc/home-sections.php, October 2026): hero enquiry card,
   verified trust row, safari-style tabs, fly-in strip, how it works.
   Approved colours only (see main.css header).
   ========================================================================== */

/* ---------- Trust row (also used on trip pages, see trip.css) ---------- */
.kb-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.kb-trust li > a, .kb-trust li > span:only-child, .kb-trust li { display: inline-flex; align-items: center; gap: 8px; }
.kb-trust a { color: inherit; text-decoration: none; }
.kb-trust a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.kb-trust .kb-icon { width: 16px; height: 16px; flex: none; color: var(--gold); }
/* main.css makes every direct child of .kb-main a white rounded panel: the strip is one. */
.kb-main > .kb-trust-strip { padding: 14px clamp(14px, 3vw, 28px); }
.kb-trust--strip { justify-content: center; }
.kb-trust--strip li { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--cream); color: var(--forest); font: 600 .84rem/1.3 var(--f-ui); }
.kb-trust--strip .kb-icon { color: var(--forest); }
.kb-trust--strip li:first-child { background: var(--gold); border-color: var(--gold); }

/* ---------- Hero enquiry card (wide screens only; phones keep the hero buttons) ---------- */
.kb-hero__side { display: none; }
@media (min-width: 1200px) {
	.kb-hero--has-side .kb-hero__inner { max-width: calc(100% - 470px) !important; }
	.kb-hero__side { display: block; position: absolute; z-index: 3; right: clamp(24px, 3.5vw, 56px); top: calc(var(--bar-h) + 64px); width: 400px; }
}
.kb-hero-form { padding: 22px 22px 16px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .97); color: var(--forest); box-shadow: var(--shadow-lg); scroll-margin-top: calc(var(--header-h) + 20px); }
.kb-hero-form__title { margin: 0 0 4px; font: 800 1.35rem/1.2 var(--f-head); letter-spacing: -.02em; }
.kb-hero-form__lead { margin: 0 0 14px; font-size: .85rem; line-height: 1.45; color: var(--muted); }
.kb-hero-form .kb-form { gap: 10px; }
.kb-hero-form .kb-field { margin: 0; }
.kb-hero-form .kb-field label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.kb-hero-form input, .kb-hero-form select, .kb-hero-form textarea { min-height: 40px; padding: 8px 12px; font-size: .9rem; }
.kb-hero-form textarea { min-height: 0; }
.kb-hero-form .kb-field-row { gap: 10px; }
.kb-hero-form .kb-form__note { margin: 8px 0 0; font-size: .74rem; text-align: center; color: var(--muted); }

/* ---------- Safari-style tabs ---------- */
.kb-styles__tabs { display: flex; gap: 8px; margin: 0 0 26px; padding: 4px 2px 8px; overflow-x: auto; scrollbar-width: thin; justify-content: flex-start; }
@media (min-width: 1100px) { .kb-styles__tabs { flex-wrap: wrap; justify-content: center; overflow: visible; } }
.kb-styles__tabs button { flex: none; display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 9px 18px; border: 1px solid var(--line-light); border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--white); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.kb-styles__tabs button:hover { border-color: var(--gold); }
.kb-styles__tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: var(--forest); }
.kb-styles__tabs button:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.kb-styles__tab-name { font: 700 .88rem/1.1 var(--f-ui); }
.kb-styles__tab-price { font: 600 .68rem/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.kb-styles__panel + .kb-styles__panel { margin-top: 48px; }
.kb-styles__panel-title { margin: 0 0 18px; color: var(--white); font-size: 1.3rem; }
.kb-styles.is-tabbed .kb-styles__panel + .kb-styles__panel { margin-top: 0; }
.kb-styles.is-tabbed .kb-styles__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1100px) { .kb-styles__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Fly-in strip ---------- */
/* .kb-panel is a two-column grid on wide screens (main.css); these panels are single-column. */
.kb-panel.kb-flyin__panel, .kb-panel.kb-steps { display: block; }
.kb-flyin__panel { padding: clamp(24px, 4vw, 48px); }
.kb-flyin__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 26px; }
.kb-flyin__head .kb-section-title { margin: 0 0 10px; }
.kb-flyin__lead { max-width: 58ch; margin: 0; color: var(--muted); }
.kb-flyin__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 290px); gap: 18px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.kb-flyin__track > * { scroll-snap-align: start; }
.kb-flyin__track:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: var(--r-md); }

/* ---------- How it works ---------- */
.kb-steps { padding: clamp(28px, 4vw, 56px); }
.kb-steps .kb-section-title, .kb-flyin .kb-section-title { color: var(--forest); }
.kb-steps .kb-head-center p { color: var(--muted); }
.kb-steps__list { list-style: none; margin: 8px 0 26px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.kb-step { padding: 26px 22px; border-radius: var(--r-lg); background: var(--cream); text-align: center; }
.kb-step__icon { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; border-radius: 50%; background: var(--white); color: var(--forest); box-shadow: var(--shadow); }
.kb-step__icon .kb-icon { width: 26px; height: 26px; }
.kb-step__num { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--forest); font: 800 .74rem/1 var(--f-ui); }
.kb-step__title { margin: 0 0 8px; font-size: 1.05rem; }
.kb-step__text { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--muted); }