/*
 * BolognaBites - My Bologna Trip interface styles.
 * P-002-T-006 under D-038. Loaded only on /trip-check/, /my-trip/ and articles with a save strip.
 *
 * Built on the La Rossa tokens (DESIGN-002) and nothing else: one accent, one 2px radius, warm
 * neutrals, no gradients, essentially no motion. Every rule carries body.larossa .entry-content
 * in its selector, because larossa.css scopes its generic rules the same way and a lighter
 * selector silently loses (cap-0009-werkwijze section 2).
 *
 * Design v3, 14-09-2026: two building blocks and one spacing scale.
 *   - card: photo on top, name, one line, price, action pair.
 *   - row:  optional thumbnail, name, one line, action pair.
 *
 * Design v4, 26-09-2026, on Jelle's review ("consequenter en duidelijker"):
 *   - the page opens with the site's photo band (DESIGN-006 section 8); the H1 lives there;
 *   - a card ALWAYS has a photo; an entity without one is a row, never an empty frame;
 *   - one card size, no lead card; the first recommendation is marked "Best fit" in text;
 *   - every card and row: main action first (partner button, else the guide), then Save/Remove;
 *   - red means action: buttons, the site's heading rule and errors. No coloured card edges.
 * No text over a photo anywhere (DESIGN-002, Figure), no eyebrows, no step numbers.
 * Spacing: 4, 8, 12, 16, 20, 32, 48.
 *
 * Design v6, 12-10-2026 (DESIGN-011, DESIGN-009): one flat plane, no line. A card, row, form,
 * prompt and strip is a --lr-tone plane on the page; nothing carries a border or a shadow. The two
 * exceptions are the ones DESIGN-009 allows for controls: the 1px --lr-muted border of an input
 * field, and the border of a choice mark (a radio or check), so the edge of a control stays
 * visible (WCAG 1.4.11, 3:1). The second button is a quiet --lr-tone-deep plane, not an outline.
 */

/* --- Page ----------------------------------------------------------------------------------- */

body.larossa .entry-content .bb-trip-page {
  max-width: 72rem;
  margin: 0 auto;
}

body.larossa .entry-content .bb-trip {
  max-width: 52rem;
  margin: 0 auto var(--lr-lg);
  font-family: var(--lr-body);
  color: var(--lr-ink);
}

/* Section headings are plain H2s and take the site's own size, face and 48 x 2px accent rule
   (larossa.css, REL-177). Only the outer spacing is set here. */
body.larossa .entry-content .bb-trip h2 {
  max-width: none;
  margin: 0;
}

body.larossa .entry-content .bb-trip h3,
body.larossa .entry-content .bb-trip h4 {
  max-width: none;
  margin: 0;
  font-family: var(--lr-display);
  font-weight: 600;
  line-height: 1.2;
}

body.larossa .entry-content .bb-trip p { margin: 0; }

body.larossa .entry-content .bb-trip__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body.larossa .entry-content .bb-trip__lead {
  max-width: 32rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--lr-muted);
}

body.larossa .entry-content .bb-trip__notice {
  max-width: 46rem;
  margin-top: 12px;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  color: var(--lr-muted);
}

/* --- Form ------------------------------------------------------------------------------------
   Design v4: the photo band above carries the H1, the one line and the photograph, so the form
   stands alone in the site's text column. */

body.larossa .entry-content .bb-trip__intro {
  max-width: 46rem;
  margin: var(--lr-lg) auto 0;
}

/* On the form the photo credit follows the column it belongs to. */
body.larossa .entry-content .bb-trip-page--form .bb-trip__credits {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

/* The results open the same distance under the band as the form does. */
body.larossa .entry-content .bb-trip__head { margin-top: var(--lr-lg); }

body.larossa .entry-content .bb-trip__card-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

body.larossa .entry-content .bb-trip__form {
  display: grid;
  gap: 24px;
  padding: clamp(20px, 3vw, 32px);
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

body.larossa .entry-content .bb-trip__legend {
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--lr-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--lr-ink);
}

/* minmax(0, 1fr) and min-width 0: a date input has an intrinsic minimum width, and at 375px the
   second one ran past the form's edge. */
body.larossa .entry-content .bb-trip__dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

body.larossa .entry-content .bb-trip__field { min-width: 0; }

body.larossa .entry-content .bb-trip input[type="date"] { min-width: 0; }

/* At 375px the calendar icon covered the last digit of the date, also with less padding (measured
   twice). On a phone the two dates stack, each at full width. */
@media (max-width: 479px) {
  body.larossa .entry-content .bb-trip__dates { grid-template-columns: minmax(0, 1fr); }
}

body.larossa .entry-content .bb-trip__field label,
body.larossa .entry-content .bb-trip__travelers label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  color: var(--lr-muted);
}

/* larossa.css styles text, number and email inputs but not date inputs. */
body.larossa .entry-content .bb-trip input[type="date"],
body.larossa .entry-content .bb-trip input[type="number"],
body.larossa .entry-content .bb-trip .bb-trip__share-field {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 0.6em 0.8em;
  font-family: var(--lr-display);
  font-size: 1rem;
  color: var(--lr-ink);
  background-color: var(--lr-surface);
  border: 1px solid var(--lr-muted);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip input:focus-visible {
  border-color: var(--lr-accent);
  outline: 2px solid var(--lr-accent);
  outline-offset: 1px;
}

body.larossa .entry-content .bb-trip__nights {
  min-height: 1.3em;
  margin-top: 6px;
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  color: var(--lr-muted);
}

body.larossa .entry-content .bb-trip__nights:empty { display: none; }

/* Segmented choice: equal parts on one line. A plane on the form; the chosen one takes the accent
   tint and a filled mark. */
body.larossa .entry-content .bb-trip__segments {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 8px;
}

/* Four choices do not fit one line on a phone: measured at 375px, "Couple" broke as "Coupl e". */
@media (max-width: 479px) {
  body.larossa .entry-content .bb-trip__segments--4 {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.larossa .entry-content .bb-trip__segment,
body.larossa .entry-content .bb-trip__chip {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

/* The native control covers its label for keyboards and screen readers; only its paint changes. */
body.larossa .entry-content .bb-trip__segment input,
body.larossa .entry-content .bb-trip__chip input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.larossa .entry-content .bb-trip__segment span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 6px;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: var(--lr-ink);
  background: var(--lr-bg);
  border-radius: var(--lr-radius);
  transition: background-color 120ms ease;
}

/* The choice mark: a small ring, the one border a control keeps (DESIGN-009, DESIGN-011). */
body.larossa .entry-content .bb-trip__segment span::before {
  content: "";
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 1px solid var(--lr-muted);
  border-radius: 50%;
  background: var(--lr-surface);
}

body.larossa .entry-content .bb-trip__segment:hover span { background: var(--lr-tone-deep); }

body.larossa .entry-content .bb-trip__segment input:checked + span {
  color: var(--lr-ink);
  background: var(--lr-accent-tint);
}

body.larossa .entry-content .bb-trip__segment input:checked + span::before {
  background: var(--lr-accent);
  border-color: var(--lr-accent);
  box-shadow: inset 0 0 0 3px var(--lr-accent-tint);
}

body.larossa .entry-content .bb-trip__segment input:focus-visible + span,
body.larossa .entry-content .bb-trip__chip input:focus-visible + .bb-trip__chip-box {
  outline: 2px solid var(--lr-ink);
  outline-offset: 2px;
}

body.larossa .entry-content .bb-trip__travelers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

body.larossa .entry-content .bb-trip__travelers label { margin: 0; font-size: 0.9375rem; color: var(--lr-ink); }

body.larossa .entry-content .bb-trip__travelers[hidden] { display: none; }

body.larossa .entry-content .bb-trip__stepper {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 11rem;
}

body.larossa .entry-content .bb-trip__stepper input { text-align: center; }

body.larossa .entry-content .bb-trip__step-button {
  flex: 0 0 48px;
  min-height: 48px;
  font-family: var(--lr-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--lr-ink);
  background: var(--lr-tone-deep);
  border: 0;
  border-radius: var(--lr-radius);
  cursor: pointer;
}

/* Interest chips: the name and a check. Design v5 dropped the 48px thumbnail. */
body.larossa .entry-content .bb-trip__chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 600px) {
  body.larossa .entry-content .bb-trip__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.larossa .entry-content .bb-trip__chip-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 12px;
  background: var(--lr-bg);
  border-radius: var(--lr-radius);
  transition: background-color 120ms ease;
}

body.larossa .entry-content .bb-trip__chip-label {
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__chip-mark {
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background: var(--lr-surface);
  border: 1px solid var(--lr-muted);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__chip:hover .bb-trip__chip-box { background: var(--lr-tone-deep); }

body.larossa .entry-content .bb-trip__chip input:checked + .bb-trip__chip-box { background: var(--lr-accent-tint); }

body.larossa .entry-content .bb-trip__chip input:checked + .bb-trip__chip-box .bb-trip__chip-mark {
  background: var(--lr-accent);
  border-color: var(--lr-accent);
}

body.larossa .entry-content .bb-trip__chip input:checked + .bb-trip__chip-box .bb-trip__chip-mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.larossa .entry-content .bb-trip__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

body.larossa .entry-content .bb-trip__button--wide {
  width: 100%;
  min-height: 52px;
  font-size: 1.0625rem;
}

@media (min-width: 600px) {
  body.larossa .entry-content .bb-trip__button--wide { width: auto; padding-left: 2.4em; padding-right: 2.4em; }
}

body.larossa .entry-content .bb-trip__trust {
  margin-top: -12px;
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  color: var(--lr-muted);
}

body.larossa .entry-content .bb-trip__error {
  margin-top: 6px;
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lr-accent-deep);
}

body.larossa .entry-content .bb-trip__error:empty { display: none; }

/* --- Buttons --------------------------------------------------------------------------------
   Primary: the site's own .wp-element-button. Secondary: a quiet --lr-tone-deep plane with ink
   text, no outline (DESIGN-011). Text: an underlined accent link. Every one is at least 44px tall. */

body.larossa .entry-content .bb-trip .wp-element-button { cursor: pointer; }

/* A link that looks like the primary button. larossa.css colours every content link with
   body.larossa .entry-content a:not(.wp-block-button__link) at (0,3,2), which beats
   .wp-element-button at (0,2,1): the first prototype painted accent text on an accent button.
   This selector weighs (0,4,2). */
body.larossa .entry-content .bb-trip a.wp-element-button,
body.larossa .entry-content .bb-trip a.wp-element-button:visited {
  color: #FFFFFF;
  text-decoration: none;
}

body.larossa .entry-content .bb-trip a.wp-element-button:hover,
body.larossa .entry-content .bb-trip a.wp-element-button:focus-visible {
  color: #FFFFFF;
  background-color: var(--lr-accent-deep);
  text-decoration: none;
}

body.larossa .entry-content .bb-trip__offer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

body.larossa .entry-content .bb-trip__button--secondary,
body.larossa .entry-content a.bb-trip__button--secondary,
body.larossa .entry-content a.bb-trip__button--secondary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 1.2em;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lr-ink);
  text-decoration: none;
  background: var(--lr-tone-deep);
  border: 0;
  border-radius: var(--lr-radius);
  cursor: pointer;
}

/* --lr-hairline is the next step darker than --lr-tone-deep; used here as a fill, not a line. */
body.larossa .entry-content .bb-trip__button--secondary:hover { background: var(--lr-hairline); }

/* Save is a heart and Remove a cross (DESIGN-012): 44px, one plane, no text button beside the main
   action. On a card the heart sits on the photo, on a small plane so it reads on any picture. */
body.larossa .entry-content .bb-trip__heart {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: var(--lr-ink);
  background: var(--lr-tone-deep);
  border: 0;
  border-radius: var(--lr-radius);
  cursor: pointer;
}

body.larossa .entry-content .bb-trip__heart svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.larossa .entry-content .bb-trip__remove svg { width: 18px; height: 18px; }

body.larossa .entry-content .bb-trip__heart:hover { background: var(--lr-hairline); }

body.larossa .entry-content .bb-trip__heart[aria-pressed="true"] { background: var(--lr-accent-tint); }

body.larossa .entry-content .bb-trip__heart[aria-pressed="true"] svg { fill: var(--lr-accent); stroke: var(--lr-accent); }

body.larossa .entry-content .bb-trip__heart:focus-visible {
  outline: 2px solid var(--lr-ink);
  outline-offset: 2px;
}

body.larossa .entry-content .bb-trip__card-media .bb-trip__heart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: var(--lr-bg);
}

body.larossa .entry-content .bb-trip__card-media .bb-trip__heart[aria-pressed="true"] { background: var(--lr-accent-tint); }

body.larossa .entry-content .bb-trip__text-button,
body.larossa .entry-content a.bb-trip__text-link,
body.larossa .entry-content a.bb-trip__text-link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lr-accent);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.larossa .entry-content .bb-trip__button--secondary:focus-visible,
body.larossa .entry-content .bb-trip__text-button:focus-visible,
body.larossa .entry-content .bb-trip__step-button:focus-visible {
  outline: 2px solid var(--lr-ink);
  outline-offset: 2px;
}

body.larossa .entry-content .bb-trip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
}

/* --- Results --------------------------------------------------------------------------------- */

body.larossa .entry-content .bb-trip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-bottom: 8px;
}

body.larossa .entry-content .bb-trip__summary {
  font-family: var(--lr-display);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__summary:focus { outline: none; }

/* The overview plane on top of the results and My Trip (DESIGN-012): the trip, the way back and
   three numbers. */
body.larossa .entry-content .bb-trip__overview {
  display: grid;
  gap: 18px;
  margin-top: var(--lr-lg);
  padding: 24px 28px;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__overview .bb-trip__head { margin-top: 0; padding-bottom: 0; }

body.larossa .entry-content .bb-trip__head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

body.larossa .entry-content .bb-trip__stats { display: flex; flex-wrap: wrap; gap: 12px 44px; }

body.larossa .entry-content .bb-trip__stat { display: flex; flex-direction: column; gap: 2px; }

body.larossa .entry-content .bb-trip__stat strong {
  font-family: var(--lr-display);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__stat span {
  font-family: var(--lr-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lr-muted);
}

/* Good to know: short planes, one per item, in plain text. */
body.larossa .entry-content .bb-trip__good-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }

body.larossa .entry-content .bb-trip__good {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 14px 20px;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__good-text {
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--lr-ink);
}

/* The one check line of the results, under the trip line (design v5). */
body.larossa .entry-content .bb-trip__head-text .bb-trip__section-note { margin-top: 4px; }

body.larossa .entry-content .bb-trip__section { margin-top: 48px; }

body.larossa .entry-content .bb-trip__section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 16px;
}

body.larossa .entry-content .bb-trip__section-note {
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  color: var(--lr-muted);
}

/* Names link to their guide: ink, accent on hover. Same specificity as the larossa link rule,
   and later in the cascade. */
body.larossa .entry-content .bb-trip__card-title a,
body.larossa .entry-content .bb-trip__card-title a:visited,
body.larossa .entry-content .bb-trip__row-title a,
body.larossa .entry-content .bb-trip__row-title a:visited {
  color: var(--lr-ink);
  text-decoration: none;
}

/* A name is a standalone link, so it needs a 44px target. Vertical padding on an inline box grows
   the hit area without moving a single line (measured at 375px: 19px before, design v4). */
body.larossa .entry-content .bb-trip__card-title a,
body.larossa .entry-content .bb-trip__row-title a {
  padding-block: 13px;
}

body.larossa .entry-content .bb-trip__card-title a:hover,
body.larossa .entry-content .bb-trip__row-title a:hover {
  color: var(--lr-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Building block 2: the row (DESIGN-012). A thumbnail when there is a photo, the text, and on the
   right one action column: the main button with the partner under it, and the heart or the cross. */
body.larossa .entry-content .bb-trip__rows {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.larossa .entry-content .bb-trip__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px 18px;
  align-items: center;
  box-sizing: border-box;
  min-height: 80px;
  margin: 0;
  padding: 12px 14px 12px 20px;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__row--photo {
  grid-template-columns: 116px minmax(0, 1fr) 240px;
  padding-left: 12px;
}

body.larossa .entry-content .bb-trip__row--bare { grid-template-columns: minmax(0, 1fr); }
body.larossa .entry-content .bb-trip__row--bare.bb-trip__row--photo { grid-template-columns: 116px minmax(0, 1fr); }

body.larossa .entry-content .bb-trip__row-img {
  display: block;
  width: 116px;
  height: 84px;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__row-title {
  font-family: var(--lr-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

body.larossa .entry-content .bb-trip__row-text {
  margin-top: 2px;
  font-family: var(--lr-display);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--lr-muted);
}

/* The action column: the main action (partner button or guide) fills the width, the heart or the
   cross is 44px beside it. */
body.larossa .entry-content .bb-trip__row-action {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

body.larossa .entry-content .bb-trip__row-action > :first-child { flex: 1 1 auto; min-width: 0; }

@media (max-width: 599px) {
  body.larossa .entry-content .bb-trip__row { grid-template-columns: minmax(0, 1fr); }
  body.larossa .entry-content .bb-trip__row--photo { grid-template-columns: 88px minmax(0, 1fr); }
  body.larossa .entry-content .bb-trip__row-img { width: 88px; height: 66px; }
  body.larossa .entry-content .bb-trip__row-action { grid-column: 1 / -1; }
  body.larossa .entry-content .bb-trip__overview { padding: 18px 16px; }
  body.larossa .entry-content .bb-trip__stats { gap: 12px 24px; }
}

body.larossa .entry-content .bb-trip__offer-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

body.larossa .entry-content .bb-trip__partner {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  text-align: center;
  color: var(--lr-muted);
}

/* Building block 1: the card. */
body.larossa .entry-content .bb-trip__recs {
  display: grid;
  gap: 20px;
}

body.larossa .entry-content .bb-trip__cards {
  display: grid;
  gap: 20px;
}

@media (min-width: 600px) {
  body.larossa .entry-content .bb-trip__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.larossa .entry-content .bb-trip__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__card-media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--lr-tone-deep);
}

body.larossa .entry-content .bb-trip__card-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px 20px;
}

/* larossa.css sets h4 as an uppercase, letter-spaced label; a place name is not a label. */
body.larossa .entry-content .bb-trip .bb-trip__card-title {
  font-size: 1.1875rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__card-flag {
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lr-ink);
}

/* One line on why, at most two lines tall. The rest is in the guide. */
body.larossa .entry-content .bb-trip__card-why {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--lr-muted);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.larossa .entry-content .bb-trip__facts {
  margin-top: 2px;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  line-height: 1.4;
}

body.larossa .entry-content .bb-trip__price { font-weight: 600; color: var(--lr-ink); }
body.larossa .entry-content .bb-trip__sep,
body.larossa .entry-content .bb-trip__duration { color: var(--lr-muted); }

body.larossa .entry-content .bb-trip__card-notice {
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lr-ink);
}

/* The actions sit at the bottom of every card, so buttons line up across a row of cards. */
body.larossa .entry-content .bb-trip__card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
}

body.larossa .entry-content .bb-trip__card-actions > :first-child { flex: 1 1 9rem; }
body.larossa .entry-content .bb-trip__card-actions > .bb-trip__button--secondary:last-child:not(:first-child) { flex: 0 0 auto; }

body.larossa .entry-content .bb-trip__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 48px;
  padding-top: 8px;
}

/* One commission line under the results and under My Trip: a plane, no rule. */
body.larossa .entry-content .bb-trip__commission {
  max-width: 46rem;
  margin-top: 32px;
  padding: 16px 20px;
  font-family: var(--lr-display);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--lr-ink);
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

/* Start over, in My Trip: a plane with the question and the button. */
body.larossa .entry-content .bb-trip__reset {
  max-width: 46rem;
  margin-top: 20px;
  padding: 20px;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__reset-text {
  margin-bottom: 12px;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__reset .bb-trip__actions { margin-top: 0; }

body.larossa .entry-content .bb-trip__credits {
  margin-top: 32px;
  font-family: var(--lr-display);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--lr-muted);
}

body.larossa .entry-content .bb-trip__credits a,
body.larossa .entry-content .bb-trip__credits a:visited { color: var(--lr-muted); }

/* --- My Bologna Trip ----------------------------------------------------------------------- */

body.larossa .entry-content .bb-trip__prompt {
  max-width: 46rem;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__empty { margin-top: 20px; }

body.larossa .entry-content .bb-trip__empty .bb-trip__lead { margin-bottom: 16px; }

body.larossa .entry-content .bb-trip__keep { max-width: 46rem; }

body.larossa .entry-content .bb-trip__keep-text {
  margin-bottom: 12px;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  color: var(--lr-muted);
}

/* --- Article save strip ------------------------------------------------------------------ */

body.larossa .entry-content .bb-trip--strip { max-width: none; margin: 20px 0 48px; }

body.larossa .entry-content .bb-trip__strip {
  padding: 16px 20px;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__strip-title {
  margin-bottom: 8px;
  font-family: var(--lr-display);
  font-size: 1.0625rem;
  font-weight: 600;
}

body.larossa .entry-content .bb-trip__strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.larossa .entry-content .bb-trip__strip-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0;
  padding: 8px 0;
}

@media (prefers-reduced-motion: reduce) {
  body.larossa .entry-content .bb-trip * { transition: none !important; }
}

/* --- DESIGN-013: the planner fills the width, and the commercial layer is its own thing -------------
   Partner offers sit in one dark band with white cards and a red button each. Guides stay quiet: the
   site's plain rows and secondary buttons, no red. A visitor sees at a glance which is which. */

body.larossa .entry-content .bb-trip { max-width: 74rem; }

@media (min-width: 960px) {
  body.larossa .entry-content .bb-trip__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body.larossa .entry-content .bb-trip__stats { gap: 12px 56px; }

/* The booking band. */
body.larossa .entry-content .bb-trip__book {
  display: grid;
  gap: 40px;
  margin-top: 56px;
  padding: 40px 40px 44px;
  color: #FFFFFF;
  background: #221611;
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__book-head { display: grid; gap: 8px; }

body.larossa .entry-content .bb-trip__book-title {
  margin: 0;
  padding: 0;
  font-family: var(--lr-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: #FFFFFF;
}

body.larossa .entry-content .bb-trip__book-title::after { display: none; }

body.larossa .entry-content .bb-trip__book-note { margin: 0; max-width: 44rem; color: #E9DDD6; }

body.larossa .entry-content .bb-trip__book-group { display: grid; gap: 16px; }

body.larossa .entry-content .bb-trip__book-group-title {
  margin: 0;
  padding: 0;
  font-family: var(--lr-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F3C9BE;
}

body.larossa .entry-content .bb-trip__offers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 16px;
}

body.larossa .entry-content .bb-trip__offer-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--lr-ink);
  background: #FFFFFF;
  border-radius: var(--lr-radius);
  overflow: hidden;
}

body.larossa .entry-content .bb-trip__offer-media { height: 150px; background: var(--lr-tone); }

body.larossa .entry-content .bb-trip__offer-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: 0;
}

body.larossa .entry-content .bb-trip__offer-media--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  color: var(--lr-accent);
  background: var(--lr-accent-tint);
}

body.larossa .entry-content .bb-trip__offer-media--icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.larossa .entry-content .bb-trip__offer-body { display: grid; gap: 6px; flex: 1 1 auto; padding: 16px 18px 12px; align-content: start; }

body.larossa .entry-content .bb-trip__offer-body p,
body.larossa .entry-content .bb-trip__offer-body h4 { margin: 0; }

body.larossa .entry-content .bb-trip__offer-kind {
  font-family: var(--lr-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lr-muted);
}

body.larossa .entry-content .bb-trip__offer-title {
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--lr-display);
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__offer-why { font-size: 0.875rem; color: var(--lr-accent-deep); font-weight: 600; }

body.larossa .entry-content .bb-trip__offer-meta { font-family: var(--lr-display); font-size: 0.9375rem; font-weight: 700; color: var(--lr-ink); }

body.larossa .entry-content .bb-trip__offer-terms,
body.larossa .entry-content .bb-trip__offer-verified { font-size: 0.8125rem; color: var(--lr-muted); }

body.larossa .entry-content .bb-trip__offer-verified::before { content: "\2713\00a0"; color: var(--lr-support); }

body.larossa .entry-content .bb-trip__offer-action { padding: 4px 18px 18px; }

body.larossa .entry-content .bb-trip__offer-action a.bb-trip__offer,
body.larossa .entry-content .bb-trip__offer-action a.bb-trip__offer:visited {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  color: #FFFFFF;
  text-decoration: none;
}

body.larossa .entry-content .bb-trip__offer-action a.bb-trip__offer:hover,
body.larossa .entry-content .bb-trip__offer-action a.bb-trip__offer:focus-visible {
  color: #FFFFFF;
  background-color: var(--lr-accent-deep);
}

body.larossa .entry-content .bb-trip__see-all { margin: 0; }

body.larossa .entry-content .bb-trip__see-all a,
body.larossa .entry-content .bb-trip__see-all a:visited { color: #FFFFFF; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* The guides: quiet. */
body.larossa .entry-content .bb-trip__guides-head { display: grid; gap: 6px; margin-top: 56px; }

body.larossa .entry-content .bb-trip__guides-title { margin: 0; }

body.larossa .entry-content .bb-trip__guides-note { margin: 0; color: var(--lr-muted); }

@media (max-width: 599px) {
  body.larossa .entry-content .bb-trip__book { padding: 28px 16px 32px; margin-left: -8px; margin-right: -8px; }
  body.larossa .entry-content .bb-trip__offers { grid-template-columns: minmax(0, 1fr); }
}

/* --- DESIGN-013 v4 (12-10-2026, Jelle): the booking band is a light plane, the overview is one slim
   line, and every group shows three offers with the rest behind one button. ---------------------- */

body.larossa .entry-content .bb-trip__overview--slim { gap: 0; padding: 14px 20px; margin-top: var(--lr-md, 24px); }

body.larossa .entry-content .bb-trip__overview--slim .bb-trip__head { align-items: center; }

body.larossa .entry-content .bb-trip__overview--slim .bb-trip__summary { font-size: 1rem; }

body.larossa .entry-content .bb-trip__book {
  gap: 36px;
  margin-top: 40px;
  padding: 36px 36px 40px;
  color: var(--lr-ink);
  background: var(--lr-tone);
}

body.larossa .entry-content .bb-trip__book-title { color: var(--lr-ink); }

body.larossa .entry-content .bb-trip__book-note { color: var(--lr-muted); }

body.larossa .entry-content .bb-trip__book-group-title { color: var(--lr-accent-deep); }

body.larossa .entry-content .bb-trip__see-all a,
body.larossa .entry-content .bb-trip__see-all a:visited { color: var(--lr-ink); }

body.larossa .entry-content .bb-trip__offers[hidden] { display: none; }

body.larossa .entry-content .bb-trip__offer-list { display: grid; gap: 16px; }

body.larossa .entry-content .bb-trip__more-wrap { margin: 0; }

body.larossa .entry-content .bb-trip__more {
  min-height: 44px;
  padding: 0;
  font-weight: 700;
  color: var(--lr-ink);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

body.larossa .entry-content .bb-trip__verified-note { margin-top: 8px; }

@media (max-width: 599px) {
  body.larossa .entry-content .bb-trip__book { padding: 24px 14px 28px; }
}

/* --- DESIGN-013 v5 (12-10-2026, Jelle): one list, red accent rules, photos behind every card, a
   proper plan bar under the results. ---------------------------------------------------------- */

/* The red accent rule the rest of the site puts under a heading, on the band and its groups. */
body.larossa .entry-content .bb-trip__book-title::after {
  display: block;
  content: "";
  width: 48px;
  height: 2px;
  margin-top: 12px;
  background: var(--lr-accent);
}

body.larossa .entry-content .bb-trip__book-group-title::after {
  display: block;
  content: "";
  width: 32px;
  height: 2px;
  margin-top: 8px;
  background: var(--lr-accent);
}

/* The photo carries the heart where an offer is exactly a place that can be saved. */
body.larossa .entry-content .bb-trip__offer-media { position: relative; }

body.larossa .entry-content .bb-trip__offer-media .bb-trip__heart {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: var(--lr-bg);
}

body.larossa .entry-content .bb-trip__offer-media .bb-trip__heart[aria-pressed="true"] { background: var(--lr-accent-tint); }

/* The guide that belongs with an offer: a quiet text link under the red button. */
body.larossa .entry-content .bb-trip__offer-action { display: grid; gap: 4px; justify-items: center; }

body.larossa .entry-content a.bb-trip__guide-link,
body.larossa .entry-content a.bb-trip__guide-link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lr-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.larossa .entry-content a.bb-trip__guide-link:hover { color: var(--lr-accent-deep); }

/* The plan bar: where the results end. */
body.larossa .entry-content .bb-trip__planbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}

body.larossa .entry-content .bb-trip__planbar-text { display: grid; gap: 4px; min-width: 0; }

body.larossa .entry-content .bb-trip__planbar-title {
  font-family: var(--lr-display);
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__planbar-title::after {
  display: block;
  content: "";
  width: 48px;
  height: 2px;
  margin-top: 10px;
  background: var(--lr-accent);
}

body.larossa .entry-content .bb-trip__planbar-summary { font-family: var(--lr-display); font-weight: 600; color: var(--lr-ink); }

body.larossa .entry-content .bb-trip__planbar-note { font-size: 0.875rem; color: var(--lr-muted); }

body.larossa .entry-content .bb-trip__planbar-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 599px) {
  body.larossa .entry-content .bb-trip__planbar { padding: 22px 18px; }
  body.larossa .entry-content .bb-trip__planbar-actions { width: 100%; }
  body.larossa .entry-content .bb-trip__planbar-actions > * { flex: 1 1 100%; justify-content: center; }
}

/* --- DESIGN-014 (12-10-2026, Jelle): the results are a journey, one step on the screen at a time. ---- */

body.larossa .entry-content .bb-trip__field-note { margin: 8px 0 0; font-size: 0.8125rem; color: var(--lr-muted); }

@media (max-width: 479px) {
  body.larossa .entry-content .bb-trip__segments--3 {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The way along the journey: numbered steps, every one a button. */
body.larossa .entry-content .bb-trip__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

body.larossa .entry-content .bb-trip__progress-item { margin: 0; }

body.larossa .entry-content .bb-trip__progress-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px 0 8px;
  font-family: var(--lr-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lr-ink);
  background: var(--lr-tone);
  border: 0;
  border-radius: var(--lr-radius);
  cursor: pointer;
}

body.larossa .entry-content .bb-trip__progress-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--lr-ink);
  background: var(--lr-tone-deep);
  border-radius: 50%;
}

body.larossa .entry-content .bb-trip__progress-step.is-done .bb-trip__progress-n { background: var(--lr-accent-tint); color: var(--lr-accent-deep); }

body.larossa .entry-content .bb-trip__progress-step.is-current { color: #FFFFFF; background: var(--lr-accent); }

body.larossa .entry-content .bb-trip__progress-step.is-current .bb-trip__progress-n { color: var(--lr-accent); background: #FFFFFF; }

body.larossa .entry-content .bb-trip__progress-step:focus-visible { outline: 2px solid var(--lr-ink); outline-offset: 2px; }

/* Back, the count, Next. At the top so nobody has to scroll to carry on, and again below the cards. */
body.larossa .entry-content .bb-trip__stepnav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

body.larossa .entry-content .bb-trip__stepnav--bottom { margin-top: 28px; }

body.larossa .entry-content .bb-trip__stepcount { text-align: center; font-family: var(--lr-display); font-size: 0.875rem; color: var(--lr-muted); }

body.larossa .entry-content .bb-trip__stepnav-gap { min-width: 1px; }

body.larossa .entry-content .bb-trip__next { min-height: 48px; padding-left: 1.6em; padding-right: 1.6em; }

body.larossa .entry-content .bb-trip__step { margin-top: 28px; }

body.larossa .entry-content .bb-trip__step-title {
  margin: 0;
  padding: 0;
  font-family: var(--lr-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  color: var(--lr-ink);
}

body.larossa .entry-content .bb-trip__step-title::after {
  display: block;
  content: "";
  width: 48px;
  height: 2px;
  margin-top: 12px;
  background: var(--lr-accent);
}

body.larossa .entry-content .bb-trip__step-title:focus { outline: none; }

body.larossa .entry-content .bb-trip__step-intro { margin: 14px 0 0; max-width: 44rem; color: var(--lr-muted); }

body.larossa .entry-content .bb-trip__step-group { display: grid; gap: 16px; margin-top: 24px; }

body.larossa .entry-content .bb-trip__step-group .bb-trip__book-group-title { margin: 0; }

/* The cards stand on the page itself, on a light plane. */
body.larossa .entry-content .bb-trip__step .bb-trip__offer-card { background: var(--lr-tone); }

body.larossa .entry-content .bb-trip__planlinks { margin: 20px 0 0; }

@media (max-width: 599px) {
  body.larossa .entry-content .bb-trip__progress-label { display: none; }
  body.larossa .entry-content .bb-trip__progress-step { padding: 0 8px; }
  body.larossa .entry-content .bb-trip__progress-step.is-current .bb-trip__progress-label { display: inline; }
  body.larossa .entry-content .bb-trip__stepnav { grid-template-columns: 1fr 1fr; }
  body.larossa .entry-content .bb-trip__stepcount { grid-column: 1 / -1; grid-row: 1; }
  body.larossa .entry-content .bb-trip__next { width: 100%; }
}

/* === DESIGN-015 (12-10-2026): rust en één richting. ==========================================
   Results: the photo band steps back, one bar stays in view (trip, steps, Next), each step is one
   light plane with white cards of equal build, and one clear way on at the end. Form: two columns
   on a wide screen, so it fits without a long scroll. */

/* The photo band above the planner is shorter once the results are shown; its lead line goes. */
body.bb-trip-has-results .entry-content .lr-hero-photo,
body.bb-trip-has-results .entry-content .kb-row-layout-idtrip_hero_check {
  min-height: 0 !important;
}
body.bb-trip-has-results .entry-content .lr-hero-photo > .kt-row-column-wrap,
body.bb-trip-has-results .entry-content .kb-row-layout-idtrip_hero_check > .kt-row-column-wrap {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
body.bb-trip-has-results .entry-content .lr-hero-photo p,
body.bb-trip-has-results .entry-content .kb-row-layout-idtrip_hero_check p { display: none; }
body.bb-trip-has-results .entry-content .lr-hero-photo h1,
body.bb-trip-has-results .entry-content .kb-row-layout-idtrip_hero_check h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* --- the bar ---------------------------------------------------------------------------------- */
body.larossa .entry-content .bb-trip__jbar {
  position: sticky;
  top: 60px;
  z-index: 30;
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 14px 0 14px;
  background: var(--lr-surface, #FFFFFF);
}
body.admin-bar.larossa .entry-content .bb-trip__jbar { top: 92px; }

body.larossa .entry-content .bb-trip__jbar-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
body.larossa .entry-content .bb-trip__jbar-top .bb-trip__summary { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--lr-muted); }
body.larossa .entry-content .bb-trip__jbar-top .bb-trip__text-button { min-height: 0; padding: 0; font-size: 0.9375rem; }

body.larossa .entry-content .bb-trip__jbar-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
}

body.larossa .entry-content .bb-trip__jbar .bb-trip__progress { margin: 0; gap: 6px; }
body.larossa .entry-content .bb-trip__jbar .bb-trip__progress-step { min-height: 40px; padding: 0 14px 0 6px; font-size: 0.875rem; }
body.larossa .entry-content .bb-trip__jbar .bb-trip__progress-n { width: 26px; height: 26px; font-size: 0.8125rem; }
body.larossa .entry-content .bb-trip__jbar-current { display: none; margin: 0; font-family: var(--lr-display); font-weight: 700; color: var(--lr-ink); }

body.larossa .entry-content .bb-trip__jbar-actions { display: flex; align-items: center; gap: 10px; }
body.larossa .entry-content .bb-trip__jbar-actions .bb-trip__button--secondary { min-height: 44px; }
body.larossa .entry-content .bb-trip__jbar .bb-trip__next { min-height: 44px; white-space: nowrap; }

/* --- a step ----------------------------------------------------------------------------------- */
body.larossa .entry-content .bb-trip__step {
  margin-top: 8px;
  padding: clamp(20px, 3vw, 36px);
  background: var(--lr-tone);
  border-radius: var(--lr-radius);
}
body.larossa .entry-content .bb-trip__step-head { display: grid; gap: 0; }
body.larossa .entry-content .bb-trip__step-intro { margin-top: 12px; }
body.larossa .entry-content .bb-trip__step .bb-trip__offer-card { background: #FFFFFF; }
body.larossa .entry-content .bb-trip__step-group { margin-top: 28px; }

/* Cards of one build: photo, what and by whom, why, rating and price on one line, small print,
   the button always at the bottom so buttons line up across a row. */
body.larossa .entry-content .bb-trip__offers { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 20px; }
@media (min-width: 1000px) {
  body.larossa .entry-content .bb-trip__offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body.larossa .entry-content .bb-trip__offer-media { height: auto; min-height: 0; aspect-ratio: 16 / 10; overflow: hidden; }
body.larossa .entry-content .bb-trip__offer-media .bb-trip__offer-img { position: absolute; inset: 0; width: 100%; height: 100%; }
body.larossa .entry-content .bb-trip__offer-media--icon { height: auto; aspect-ratio: 16 / 10; }
body.larossa .entry-content .bb-trip__offer-body { gap: 8px; padding: 16px 18px 6px; }
body.larossa .entry-content .bb-trip__offer-kind { letter-spacing: 0.04em; }
body.larossa .entry-content .bb-trip__offer-partner { color: var(--lr-ink); }
body.larossa .entry-content .bb-trip__offer-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.125rem;
  line-height: 1.3;
}
body.larossa .entry-content .bb-trip__offer-why {
  justify-self: start;
  padding: 3px 10px;
  font-size: 0.8125rem;
  color: var(--lr-accent-deep);
  background: var(--lr-accent-tint);
  border-radius: 999px;
}
body.larossa .entry-content .bb-trip__offer-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}
body.larossa .entry-content .bb-trip__offer-price { font-family: var(--lr-display); font-size: 0.9375rem; font-weight: 500; color: var(--lr-muted); }
body.larossa .entry-content .bb-trip__offer-price strong { font-size: 1.25rem; font-weight: 700; color: var(--lr-ink); }
body.larossa .entry-content .bb-trip__offer-action { margin-top: auto; padding: 10px 18px 16px; gap: 2px; }

/* --- the end of a step ------------------------------------------------------------------------ */
body.larossa .entry-content .bb-trip__stepend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 28px 0 0;
}
body.larossa .entry-content .bb-trip__next--end { min-height: 52px; padding-left: 2em; padding-right: 2em; font-size: 1.0625rem; }

/* The small print: plain text, no plane. */
body.larossa .entry-content .bb-trip__journey ~ .bb-trip__commission,
body.larossa .entry-content .bb-trip__journey + .bb-trip__commission {
  max-width: none;
  margin: 28px 0 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--lr-muted);
  text-align: center;
  background: none;
}
body.larossa .entry-content .bb-trip__journey .bb-trip__credits { margin-top: 18px; text-align: center; }

/* --- the form in two columns ------------------------------------------------------------------ */
@media (min-width: 900px) {
  body.larossa .entry-content .bb-trip__intro { max-width: 60rem; }
  body.larossa .entry-content .bb-trip__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
  body.larossa .entry-content .bb-trip__form > .bb-trip__submit,
  body.larossa .entry-content .bb-trip__form > .bb-trip__trust,
  body.larossa .entry-content .bb-trip__form > [data-group="interests"],
  body.larossa .entry-content .bb-trip__form > [data-group="age"] { grid-column: 1 / -1; }
  body.larossa .entry-content .bb-trip-page--form .bb-trip__credits { max-width: 60rem; }
}

/* --- phone ------------------------------------------------------------------------------------ */
@media (max-width: 899px) {
  body.larossa .entry-content .bb-trip__jbar .bb-trip__progress { display: none; }
  body.larossa .entry-content .bb-trip__jbar-current { display: block; }
  body.larossa .entry-content .bb-trip__jbar-main { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 599px) {
  body.larossa .entry-content .bb-trip__jbar { top: 56px; margin-left: -4px; margin-right: -4px; padding: 10px 4px; }
  body.admin-bar.larossa .entry-content .bb-trip__jbar { top: 56px; }
  body.larossa .entry-content .bb-trip__jbar-actions { gap: 6px; }
  body.larossa .entry-content .bb-trip__jbar-actions .bb-trip__button--secondary { flex: none; white-space: nowrap; padding-left: 0.75em; padding-right: 0.75em; font-size: 0.875rem; }
  body.larossa .entry-content .bb-trip__jbar .bb-trip__next { flex: none; width: auto; white-space: nowrap; }
  body.larossa .entry-content .bb-trip__jbar .bb-trip__next { min-width: 0; padding-left: 1em; padding-right: 1em; font-size: 0.875rem; }
  body.larossa .entry-content .bb-trip__step { margin-left: -12px; margin-right: -12px; padding: 18px 12px; }
  body.larossa .entry-content .bb-trip__next--end { width: 100%; }
}

/* The bar on a phone: one short line for the trip, the step on the left, Next on the right. */
body.larossa .entry-content .bb-trip__next-short { display: none; }
@media (max-width: 899px) {
  body.larossa .entry-content .bb-trip__jbar .bb-trip__next-long { display: none; }
  body.larossa .entry-content .bb-trip__jbar .bb-trip__next-short { display: inline; }
  body.larossa .entry-content .bb-trip__jbar-top .bb-trip__summary { font-size: 0.8125rem; }
  body.larossa .entry-content .bb-trip__jbar-current { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9375rem; }
  body.larossa .entry-content .bb-trip__jbar-actions { flex: none; }
}

/* --- DESIGN-015 §8: the plan is a list, not a second set of cards --------------------------- */
body.larossa .entry-content .bb-trip__planrows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.larossa .entry-content .bb-trip__planrow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 10px 12px 10px 10px;
  background: #FFFFFF;
  border-radius: var(--lr-radius);
}
body.larossa .entry-content .bb-trip__planrow-img {
  display: block;
  width: 96px;
  height: 64px;
  max-width: none;
  margin: 0;
  object-fit: cover;
  border-radius: var(--lr-radius);
}
body.larossa .entry-content .bb-trip__planrow-img--icon { display: flex; align-items: center; justify-content: center; color: var(--lr-accent); background: var(--lr-accent-tint); }
body.larossa .entry-content .bb-trip__planrow-img--icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
body.larossa .entry-content .bb-trip__planrow-body { display: grid; gap: 2px; min-width: 0; }
body.larossa .entry-content .bb-trip__planrow-body p { margin: 0; }
body.larossa .entry-content .bb-trip__planrow-title { font-family: var(--lr-display); font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--lr-ink); }
body.larossa .entry-content .bb-trip__planrow-meta { font-size: 0.875rem; color: var(--lr-muted); }
body.larossa .entry-content .bb-trip__planrow-price strong { color: var(--lr-ink); }
body.larossa .entry-content .bb-trip__planrow-actions { display: flex; align-items: center; gap: 8px; }
body.larossa .entry-content .bb-trip__planrow-book { min-width: 180px; min-height: 44px; padding-left: 1.2em; padding-right: 1.2em; white-space: nowrap; justify-content: center; }

/* Save or share: one row on the plan plane, no second plane. */
body.larossa .entry-content .bb-trip__share {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
  padding-top: 24px;
}
body.larossa .entry-content .bb-trip__share-title { margin: 0; padding: 0; font-family: var(--lr-display); font-size: 1.25rem; color: var(--lr-ink); }
body.larossa .entry-content .bb-trip__share-title::after { display: block; content: ""; width: 32px; height: 2px; margin-top: 8px; background: var(--lr-accent); }
body.larossa .entry-content .bb-trip__share-note { margin: 10px 0 0; font-size: 0.9375rem; color: var(--lr-muted); }
body.larossa .entry-content .bb-trip__share-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
body.larossa .entry-content .bb-trip__share .bb-trip__share-field { grid-column: 1 / -1; }

@media (max-width: 699px) {
  body.larossa .entry-content .bb-trip__planrow { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  body.larossa .entry-content .bb-trip__planrow-img { width: 72px; height: 56px; }
  body.larossa .entry-content .bb-trip__planrow-actions { grid-column: 1 / -1; }
  body.larossa .entry-content .bb-trip__planrow-book { flex: 1 1 auto; }
  body.larossa .entry-content .bb-trip__share { grid-template-columns: minmax(0, 1fr); }
  body.larossa .entry-content .bb-trip__share-actions { justify-content: flex-start; }
}

body.larossa .entry-content .bb-trip__mytrip-head { margin-top: var(--lr-lg); }
body.larossa .entry-content .bb-trip__mytrip-head .bb-trip__summary { margin: 0; font-weight: 600; color: var(--lr-muted); }
body.larossa .entry-content .bb-trip__mytrip-head + .bb-trip__step { margin-top: 14px; }
body.larossa .entry-content .bb-trip__step--plan .bb-trip__section { margin-top: 24px; }
body.larossa .entry-content .bb-trip__reset { margin-top: 24px; text-align: center; }

/* My Trip: the same shorter photo band as the results, so both product pages open alike. */
body.larossa .entry-content .kb-row-layout-idtrip_hero_mine > .kt-row-column-wrap { padding-top: 48px !important; padding-bottom: 48px !important; }
body.larossa .entry-content .kb-row-layout-idtrip_hero_mine,
body.larossa .entry-content .kb-row-layout-idtrip_hero_mine > .kt-row-column-wrap { min-height: 0 !important; }

/* --- 12-10-2026 (Jelle): room under the accent, drawings instead of stand-in photos, links under a group */
body.larossa .entry-content .bb-trip__step-title::after { margin-top: 14px; }
body.larossa .entry-content .bb-trip__step-intro { margin-top: 22px; }
body.larossa .entry-content .bb-trip__book-group-title::after { margin-top: 10px; }
body.larossa .entry-content .bb-trip__step-group .bb-trip__offers { margin-top: 6px; }
body.larossa .entry-content .bb-trip__offer-media--icon svg { width: 56px; height: 56px; stroke-width: 1.4; }
body.larossa .entry-content .bb-trip__step .bb-trip__see-all { margin: 4px 0 0; font-size: 0.9375rem; color: var(--lr-muted); }
body.larossa .entry-content .bb-trip__step .bb-trip__see-all a,
body.larossa .entry-content .bb-trip__step .bb-trip__see-all a:visited { font-weight: 600; color: var(--lr-ink); text-decoration: underline; text-underline-offset: 3px; }
body.larossa .entry-content .bb-trip__step .bb-trip__see-all a:hover { color: var(--lr-accent-deep); }
body.larossa .entry-content .bb-trip__next { min-width: 120px; justify-content: center; }
/* REL-345: tikdoelen van 44 px zonder de opmaak te veranderen (apparaat-QA 14-10-2026). */
body.larossa .entry-content .bb-trip__text-button,
body.larossa .entry-content a.bb-trip__guide-link { position: relative; }
body.larossa .entry-content .bb-trip__text-button::after,
body.larossa .entry-content a.bb-trip__guide-link::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%); }