/*
 * Calibration of the home page (and of the landing pages built on the home template): the same sections, content,
 * colours, fonts and images as before, set on one grid. Loaded after remedieri-lansare.css (src/app/[lang]/layout.tsx).
 *
 * Scope: every rule starts at the home hero (.banner-homepage, only on the home template) and reaches the sections
 * after it with `~` (they are its siblings in <body>), so no other page changes; the shared rules (titles, buttons,
 * arrows) name the home sections, so the footer, the modals and the chat popup keep their own.
 *
 * The system, taken from what the page already used most:
 *  - content width: the Bootstrap .container (1320 / 1140 / 960 / 720 px), every block's edge on its inner edge;
 *    phone gutter 20 px (most sections already had it);
 *  - vertical rhythm: 80 px between two blocks on desktop (the value most sections used), 64 px on tablets,
 *    48 px on phones; a coloured band has the same space inside;
 *  - a section's header (eyebrow, title, description) sits 48 px (phone 32 px) above its content;
 *  - type: section title Syne 36 / 30 / 26 px with line-height 1.2; the two long uppercase headings (offers, assistance)
 *    one step lower, 28 / 26 / 22 px; eyebrow Syne-Bold 20 / 18 px; text Raleway 16 px, line-height 1.5;
 *  - controls: buttons and search fields 48 px high, buttons on cards 44 px, slider arrows 44 px on phones.
 */
:root { --cal-s: 80px; --cal-h: 48px; --cal-title: 36px; --cal-lead: 28px; }
@media (max-width: 1199px) { :root { --cal-s: 64px; --cal-title: 30px; --cal-lead: 26px; } }
@media (max-width: 768px) { :root { --cal-s: 48px; --cal-h: 32px; --cal-title: 26px; --cal-lead: 22px; } }

/* ---------- shared: section headers, titles, buttons ---------- */
.banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .header-title,
.banner-homepage ~ .wrapper-solutions .header-title { font-size: var(--cal-title); line-height: 1.2; }
.banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .header-title-blue { line-height: 1.2; margin-bottom: 8px; }
@media (max-width: 768px) { .banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .header-title-blue { font-size: 18px; } }
.banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .header-info .header-title { margin-bottom: 12px; }
.banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .header-info .header-description { margin-bottom: var(--cal-h); line-height: 1.5; }
@media (min-width: 769px) {
  /* the descriptions under the section titles: one measure (they were 440 or 660 px wide, 2 to 3 lines) */
  .banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .header-info .header-description[class*='offset-md'] { flex: none; float: none; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 768px) {
  /* at 768 px the md offsets (offset-md-3 / -4) still pushed the titles and descriptions right, past the edge */
  .banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .header-info > [class*='offset-md'] { flex: none; float: none; width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

.banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .button-primary,
.banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .button-secondary,
.banner-homepage .button-primary {
  min-height: 48px; padding-top: 12px !important; padding-bottom: 12px !important; line-height: 22px;
  border-width: 1px; border-style: solid;
}
.banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .btn-item-details { min-height: 44px; padding-top: 10px; padding-bottom: 10px; line-height: 22px; }

/* ---------- hero + search card ---------- */
.banner-homepage .box-form-reservation .select2-container--default .select2-selection--single,
.banner-homepage .box-form-reservation input.form-control { height: 48px !important; }
.banner-homepage .box-form-reservation .box-submit-button .button-primary { height: 48px; }
@media (max-width: 768px) {
  .banner-homepage .banner-text { margin-top: 32px; }
  .banner-homepage .banner-content { padding-bottom: 300px; }
  .banner-homepage .box-form-reservation { padding: 16px 20px 20px; }
  .banner-homepage .box-form-reservation .wrapper-reservation-form { margin-left: 0; margin-right: 0; }
  .banner-homepage .box-form-reservation .padding-input-form { padding: 8px 0 0; }
  .banner-homepage .box-form-reservation .box-submit-button { padding-top: 8px; }
  .banner-homepage .box-form-reservation .select2-container--default .select2-selection--single { padding-top: 13px !important; padding-bottom: 13px !important; }
}

@media (min-width: 992px) and (max-width: 1199px) {
  /* the button on its own line (remedieri-lansare.css, row 8): not glued to the fields above it */
  .banner-homepage .wrapper-reservation-form:has(.datetime-group) > .col-md-20:not(:has(.datetime-group)) { margin-top: 16px; }
}

/* ---------- offers ("stars of the day") ---------- */
.banner-homepage ~ .container-cars-offers { padding-top: var(--cal-s); padding-bottom: var(--cal-s); }
/* a long uppercase heading: one step under the section title (as the assistance block's) */
.banner-homepage ~ .container-cars-offers .title-offer-widget { font-size: var(--cal-lead); line-height: 1.25; }
.banner-homepage ~ .container-cars-offers .title-offers-right { line-height: 1.5; padding-top: 0; }
.banner-homepage ~ .container-cars-offers .subtitle-offers { font-size: 20px; line-height: 1.2; }
.banner-homepage ~ .container-cars-offers .header-slider { padding: 32px 0 24px; }
/* the car's name and price no longer run under the "details" button */
.banner-homepage ~ .container-cars-offers .item-details-gradient { gap: 8px 12px; flex-wrap: wrap; align-content: flex-end; }
.banner-homepage ~ .container-cars-offers .item-offer-left { flex: 1 1 140px; min-width: 0; line-height: 1.25; text-align: left; }
@media (min-width: 769px) {
  /* a longer name (or language) puts the button under it instead of squeezing the text or cutting the price */
  .banner-homepage ~ .container-cars-offers .item-details-gradient { height: auto; min-height: 104px; }
}
.banner-homepage ~ .container-cars-offers .btn-item-details { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 768px) {
  .banner-homepage ~ .container-cars-offers { padding-top: var(--cal-s) !important; padding-bottom: var(--cal-s); }
  .banner-homepage ~ .container-cars-offers .titles-offers-container { padding-left: 20px; padding-right: 20px; }
  /* at 768 px the description kept its desktop offset and ran past the right edge */
  .banner-homepage ~ .container-cars-offers .wrapper-title { flex-wrap: wrap; margin-left: 0; margin-right: 0; }
  .banner-homepage ~ .container-cars-offers .wrapper-title > [class*='col-'] { flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
  .banner-homepage ~ .container-cars-offers .title-offer-widget { margin-bottom: 16px; }
  .banner-homepage ~ .container-cars-offers .subtitle-offers { font-size: 18px; }
  .banner-homepage ~ .container-cars-offers .header-slider { padding: 24px 0; gap: 16px; }
  .banner-homepage ~ .container-cars-offers .btn-item-details { font-size: 14px; padding-left: 12px; padding-right: 12px; }
}

/* ---------- assistance + map of Romania ---------- */
.banner-homepage ~ .wrapper-assistance .assistance-container { padding-top: var(--cal-s); padding-bottom: var(--cal-s); }
.banner-homepage ~ .wrapper-assistance .title-box-assistance { font-size: var(--cal-lead); line-height: 1.3; }
.banner-homepage ~ .wrapper-assistance .description-assistance { line-height: 1.5; }
@media (min-width: 769px) {
  /* the three promises: a title that wraps no longer pushes its text lower than the others' */
  .banner-homepage ~ .wrapper-assistance .title-item-assistance { min-height: calc(2.4em + 28px); display: flex; align-items: center; justify-content: center; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  /* 960 px: the text card got 400 px and its three promises overflowed their columns; text and map now half each */
  .banner-homepage ~ .wrapper-assistance .wrapper-assistance-row > .col-md-5 { width: 50%; }
  .banner-homepage ~ .wrapper-assistance .wrapper-assistance-row > .col-md-6 { width: 50%; margin-left: 0; }
  .banner-homepage ~ .wrapper-assistance .assistance-list-items > .assistance-item { padding-left: 6px; padding-right: 6px; }
  .banner-homepage ~ .wrapper-assistance .title-item-assistance { font-size: 15px; }
}
@media (max-width: 768px) {
  .banner-homepage ~ .wrapper-assistance { margin-bottom: 0; }
  .banner-homepage ~ .wrapper-assistance .assistance-container { padding: var(--cal-s) 20px; }
  .banner-homepage ~ .wrapper-assistance .wrapper-assistance-row > [class*='col-'] { flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0; }
  .banner-homepage ~ .wrapper-assistance .box-map { padding-bottom: 24px; }
}

/* ---------- about us ---------- */
.banner-homepage ~ .about-us-homepage .wrapper-about-us { padding-top: var(--cal-s); padding-bottom: var(--cal-s); }
.banner-homepage ~ .about-us-homepage .subtitle-about-us { font-size: var(--cal-title); line-height: 1.2; margin-top: 0; margin-bottom: 24px; }
.banner-homepage ~ .about-us-homepage .about-us-description { line-height: 1.5; }
.banner-homepage ~ .about-us-homepage .about-us-toggle-btn { margin-top: 24px; }
@media (max-width: 768px) {
  .banner-homepage ~ .about-us-homepage { padding-left: 20px; padding-right: 20px; }
  .banner-homepage ~ .about-us-homepage .wrapper-about-us { margin-left: 0; margin-right: 0; padding-bottom: var(--cal-s); }
  .banner-homepage ~ .about-us-homepage .content-about { padding-left: 0; padding-right: 0; overflow-wrap: break-word; }
}

/* ---------- benefits ---------- */
.banner-homepage ~ .wrapper-benefits { padding-bottom: var(--cal-s); }
.banner-homepage ~ .wrapper-benefits .first-benefits-title { line-height: 1.2; }
.banner-homepage ~ .wrapper-benefits .first-benefits-content { line-height: 1.5; }
.banner-homepage ~ .wrapper-benefits .benefits-title { line-height: 1.25; }
@media (min-width: 992px) and (max-width: 1199px) {
  /* 25 + 41.7 + 41.7 % did not fit one row: the second card fell alone on a row; the 1200 px proportions apply */
  .banner-homepage ~ .wrapper-benefits .col-md-3 { width: 28%; }
  .banner-homepage ~ .wrapper-benefits .col-md-5 { width: 36%; }
  .banner-homepage ~ .wrapper-benefits .first-benefits-title { font-size: 28px; }
}
@media (max-width: 768px) {
  .banner-homepage ~ .wrapper-benefits { padding-top: var(--cal-s); padding-bottom: var(--cal-s); margin-bottom: 0; }
  .banner-homepage ~ .wrapper-benefits .first-benefits-title { font-size: 28px; }
  .banner-homepage ~ .wrapper-benefits .benefits-title { font-size: 20px; }
}

/* ---------- solutions ---------- */
.banner-homepage ~ .wrapper-solutions { padding-top: var(--cal-s); }
.banner-homepage ~ .wrapper-solutions .header-info .header-description { margin-bottom: var(--cal-h); }
.banner-homepage ~ .wrapper-solutions .btn-link { min-height: 44px; }
@media (min-width: 769px) {
  /* the two tiles: the same height (the longer title no longer makes one taller) */
  .banner-homepage ~ .wrapper-solutions > .row > [class*='col-'] { display: flex; }
  .banner-homepage ~ .wrapper-solutions .wrapper-solutions-left { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; background-position: center; }
}
@media (max-width: 768px) {
  .banner-homepage ~ .wrapper-solutions { padding: var(--cal-s) 20px; }
  .banner-homepage ~ .wrapper-solutions .header-description { margin-bottom: var(--cal-h); }
  .banner-homepage ~ .wrapper-solutions .wrapper-solution { margin-bottom: 24px; }
  .banner-homepage ~ .wrapper-solutions .wrapper-solution:last-of-type { margin-bottom: 0; }
  .banner-homepage ~ .wrapper-solutions .wrapper-solution-img { aspect-ratio: 16 / 9; object-fit: cover; }
  .banner-homepage ~ .wrapper-solutions .solutions-title { font-size: 20px; }
}

/* ---------- models / cars (tabs + slider) ---------- */
:is(.banner-homepage ~ .wrapper-models_cars, .banner-homepage ~ * .wrapper-models_cars) { padding-top: var(--cal-s); }
:is(.banner-homepage ~ .wrapper-models_cars, .banner-homepage ~ * .wrapper-models_cars) .nav-tabs { margin-top: var(--cal-h); margin-bottom: var(--cal-h); }
:is(.banner-homepage ~ .wrapper-models_cars, .banner-homepage ~ * .wrapper-models_cars) .slider-nav { margin-top: var(--cal-h); }
:is(.banner-homepage ~ .wrapper-models_cars, .banner-homepage ~ * .wrapper-models_cars) .tab-content { padding-bottom: var(--cal-s); }
@media (min-width: 769px) {
  /* landing pages have no solutions band: the benefits already end with the rhythm's space */
  .banner-homepage ~ .wrapper-benefits + .wrapper-widgets-bg > .wrapper-models_cars:first-child { padding-top: 0; }
}
@media (max-width: 768px) {
  :is(.banner-homepage ~ .wrapper-models_cars, .banner-homepage ~ * .wrapper-models_cars) .nav-tabs { margin-top: 24px; }
}

/* ---------- cities ---------- */
/* the models' slider already ends with the rhythm's space: no second one on top */
.banner-homepage ~ * .wrapper-cities { padding-top: 0; margin-bottom: 0; }
.banner-homepage ~ * .wrapper-cities .slider-nav { margin-top: var(--cal-h); }
@media (max-width: 768px) {
  .banner-homepage ~ * .wrapper-cities .header-title { font-size: var(--cal-title); margin-bottom: 12px; }
  .banner-homepage ~ * .wrapper-cities .header-description { margin-bottom: var(--cal-h); }
}

/* ---------- story widgets (page text + about us) ---------- */
.banner-homepage ~ * .wrapper-home-story-widgets { padding-top: var(--cal-s); margin-bottom: 0; }
.banner-homepage ~ * .wrapper-home-story-widgets .home-story-widget { margin-bottom: 0; }
.banner-homepage ~ * .wrapper-home-story-widgets .home-story-widget ~ .home-story-widget { margin-top: var(--cal-s); }
.banner-homepage ~ * .wrapper-home-story-widgets .home-story-widget-text { line-height: 1.5; }
@media (max-width: 768px) {
  .banner-homepage ~ * .wrapper-home-story-widgets .home-story-widget-title { font-size: var(--cal-title); line-height: 1.2; }
  .banner-homepage ~ * .wrapper-home-story-widgets .container { padding-left: 20px; padding-right: 20px; }
}

/* ---------- latest posts ---------- */
.banner-homepage ~ * .wrapper-blog { padding-top: var(--cal-s); padding-bottom: 0; }
.banner-homepage ~ * .wrapper-blog .blog-btn-more-wrapper { margin-top: var(--cal-h); }
.banner-homepage ~ * .wrapper-blog .item-carousel { padding-bottom: 0 !important; }
/* the cards' blue tops: one height in a row (up to four lines of title), the text and the link under them aligned */
.banner-homepage ~ * .wrapper-blog .wrapper-blog-top { flex: 0 0 auto; min-height: 182px; }
.banner-homepage ~ * .wrapper-blog .wrapper-blog-bottom { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }

/* ---------- FAQ ---------- */
.banner-homepage ~ * .wrapper-faq { padding-top: var(--cal-s); padding-bottom: var(--cal-s); }
.banner-homepage ~ * .wrapper-faq .panel-default { margin-bottom: 16px; }
.banner-homepage ~ * .wrapper-faq .panel-title { line-height: 1.3; }
.banner-homepage ~ * .wrapper-faq .btn { margin-top: calc(var(--cal-h) - 16px) !important; }

/* ---------- "reservation now" banner ---------- */
.banner-homepage ~ .wrapper-reservation-now.container { padding-left: 15px; padding-right: 15px; }
.banner-homepage ~ .wrapper-reservation-now > .col-md-10 { flex: 0 0 100%; width: 100%; max-width: 100%; margin-left: 0; padding: 0; }
.banner-homepage ~ .wrapper-reservation-now .wrapper-reservation-now-banner { margin-bottom: var(--cal-s); }
.banner-homepage ~ .wrapper-reservation-now .reservation-now-title { font-size: var(--cal-title); line-height: 1.3; }
.banner-homepage ~ .wrapper-reservation-now .reservation-now-description { line-height: 1.5; margin-top: 24px; margin-bottom: 24px; }
@media (max-width: 768px) {
  .banner-homepage ~ .wrapper-reservation-now.container { padding-left: 20px; padding-right: 20px; }
  .banner-homepage ~ .wrapper-reservation-now .wrapper-reservation-now-banner { padding: 40px 24px; }
  .banner-homepage ~ .wrapper-reservation-now .wrapper-reservation-now-banner .button-secondary { margin-bottom: 48px; }
}

/* ---------- phones: slider arrows are tap targets ---------- */
@media (max-width: 768px) {
  .banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .slider-nav .slick-arrow,
  .banner-homepage ~ :is(.container-cars-offers, .wrapper-assistance, .about-us-homepage, .wrapper-benefits, .wrapper-solutions, .wrapper-models_cars, .wrapper-widgets-bg, .wrapper-reservation-now) .slider-nav button { min-height: 44px; min-width: 64px; }
}