/*
 * Yourbnb: its own homepage sections (kinds of stay, stays and experiences, featured
 * cities), the standard sections of Theme > Homepage drawn in Yourbnb's look, and the
 * few pieces the theme added elsewhere (the kind pill on cards, the results map, the
 * blog's author picture).
 *
 * Yourbnb's look, as its pages always had it: Poppins, bold titles aligned left, white
 * pages, rounded pictures and cards with a soft shadow, the main colour on buttons and
 * the second colour on labels. The standard sections carry their own scoped styles
 * (kindshare); the rules here sit under .yb-home so that they win without !important.
 */

/* ---------- The homepage frame ---------- */
.yb-home {
    display: flow-root;
    clear: both;
}
.yb-home > section,
.yb-home > div {
    clear: both;
}
.yb-home .section-header h2,
.yb-home .kz-kp__section-title,
.yb-home .kz-tm__title,
.yb-home .kz-faq__title,
.yb-home .kz-sc__title,
.yb-home .yb-kinds h2 {
    font-family: var(--yb-font);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--yb-ink);
}
.yb-home .kz-kp__section-subtitle,
.yb-home .kz-tm__subtitle,
.yb-home .kz-faq__subtitle,
.yb-home .kz-sc__subtitle,
.yb-home .kz-partners__subtitle {
    font-family: var(--yb-font);
    color: var(--yb-muted);
}

/* ---------- "About" (the custom section) ---------- */
.yb-about h2,
.yb-about h3 {
    font-weight: 500;
    color: var(--yb-ink);
}
.yb-about p {
    color: var(--yb-ink);
}

/* ---------- Kinds of stay ---------- */
.yb-kinds {
    padding: 28px 0 8px;
    border-bottom: 1px solid var(--yb-line);
}
.yb-kinds .section-header {
    margin-bottom: 18px;
}
.yb-kinds__list {
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: space-between;
}
.yb-kinds__list::-webkit-scrollbar {
    display: none;
}
.yb-kinds__list li {
    flex: 0 0 auto;
    margin: 0;
}
.yb-kinds__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 6px 2px 14px;
    border-bottom: 2px solid transparent;
    color: var(--yb-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}
.yb-kinds__item .yb-i {
    width: 28px;
    height: 28px;
    color: var(--yb-ink);
}
.yb-kinds__item:hover,
.yb-kinds__item:focus-visible {
    color: var(--yb-ink);
    border-bottom-color: var(--yb-ink);
    text-decoration: none;
}
@media (max-width: 767px) {
    .yb-kinds__list {
        justify-content: flex-start;
        gap: 26px;
    }
}

/* ---------- Stays and experiences ---------- */
.yb-offers__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}
.yb-offers__head h2 {
    margin-bottom: 4px;
}
.yb-offers__head p {
    margin: 0;
    color: var(--yb-muted);
}
.yb-offers__all {
    flex: 0 0 auto;
}
.yb-offers__tabs {
    display: flex;
    gap: 8px;
    margin: 22px 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
}
.yb-offers__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid var(--yb-line);
    border-radius: 999px;
    background: var(--yb-white);
    color: var(--yb-ink);
    font: 500 14px/1.3 var(--yb-font);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.yb-offers__tab:hover {
    border-color: var(--yb-ink);
}
.yb-offers__tab[aria-selected="true"] {
    border-color: var(--yb-ink);
    background: var(--yb-ink);
    color: var(--yb-white);
}
.yb-offers__count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--yb-primary-soft);
    color: var(--yb-primary-dark);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.yb-offers__tab[aria-selected="true"] .yb-offers__count {
    background: var(--yb-primary);
    color: var(--yb-on-primary);
}
.yb-offers__panel[hidden] {
    display: none;
}
.yb-offers__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.yb-offers__grid .results_list_item {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    float: none;
}
@media (max-width: 991px) {
    .yb-offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .yb-offers__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Listing cards: the kind of offer ---------- */
.card_img {
    position: relative;
}
.yb-card__kind {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--yb-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    pointer-events: none;
}
.slider__switch .yb-i {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}
.slider__switch .yb-i__dot {
    display: none;
}

/* ---------- One width for every section ----------
   Every section lines up on the theme's container: its gutter (15px on phones, 80px
   from 768px, yourbnb.css) and no maximum width. The standard sections drawn by the
   kindshare snippets (key points, reviews, FAQ, video, partners) carry their own
   1200px column with 20px sides, so on a wide screen they sat 300px in from the rest;
   the hero, the posts and the editorial box were pushed 15px off it by the grid's
   rows and columns. Three classes deep, to win over the snippets' own <style>, which
   comes later in the page. */
.yb-home {
    --yb-gutter: 15px;
}
@media (min-width: 768px) {
    .yb-home {
        --yb-gutter: 80px;
    }
}
.yb-home .kz-kp .kz-kp__inner,
.yb-home .kz-tm .kz-tm__inner,
.yb-home .kz-faq .kz-faq__inner,
.yb-home .kz-sc .kz-sc__inner,
.yb-home .kz-partners .kz-partners__inner {
    max-width: none;
    padding-left: var(--yb-gutter);
    padding-right: var(--yb-gutter);
}
.yb-home .hero-container > .container > .row,
.yb-home .home_edito_section > .row.custom_sect_content {
    margin-left: 0;
    margin-right: 0;
}
.yb-home .hero-container .home-banner-content {
    padding-left: 0;
    padding-right: 0;
}
.yb-home .featured-posts-section .section-header {
    padding-left: 0;
    padding-right: 0;
}
/* The posts keep their 15px apart; the row takes it back on its two outer edges. */
.yb-home .featured-posts-section .post_wrapper {
    margin-left: -15px;
    margin-right: -15px;
    width: auto;
}

/* ---------- Key points ----------
   Drawn as cards, so they need the room a card has: the snippet sets them flat, with
   no padding, and its rule comes later in the page than this file. */
.yb-home .kz-kp .kz-kp__card {
    display: flex;
    padding: 24px;
    border: 0;
    border-radius: var(--yb-radius);
    background: var(--yb-white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    transition: box-shadow .2s ease, transform .2s ease;
}
.yb-home .kz-kp .kz-kp__card-inner {
    gap: 16px;
}
.yb-home .kz-kp .kz-kp__icon {
    width: 48px;
    height: 48px;
}
.yb-home .kz-kp .kz-kp__subtitle {
    margin-top: 6px;
    line-height: 1.5;
}
.yb-home .kz-kp a.kz-kp__card:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    transform: translateY(-2px);
}
@media (max-width: 619px) {
    .yb-home .kz-kp .kz-kp__card {
        padding: 20px;
    }
    /* One card a row: the icon beside the text reads better than above it. */
    .yb-home .kz-kp.kz-kp--icon-top .kz-kp__card-inner {
        flex-direction: row;
    }
}
.yb-home .kz-kp__title {
    font-family: var(--yb-font);
    font-weight: 600;
    color: var(--yb-ink);
}
.yb-home .kz-kp__text,
.yb-home .kz-kp__subtitle {
    font-family: var(--yb-font);
    color: var(--yb-muted);
}
.yb-home .kz-kp__icon {
    color: var(--yb-primary);
}

/* ---------- Reviews ---------- */
.yb-home .kz-tm__card {
    border: 1px solid var(--yb-line);
    border-radius: var(--yb-radius);
    background: var(--yb-white);
    box-shadow: none;
}
.yb-home .kz-tm__text {
    font-family: var(--yb-font);
    color: var(--yb-ink);
}
.yb-home .kz-tm__name {
    font-family: var(--yb-font);
    font-weight: 600;
    color: var(--yb-ink);
}
.yb-home .kz-tm__stars,
.yb-home .kz-tm__avg-stars {
    color: var(--yb-ink);
}
.yb-home .kz-tm__avg-score {
    font-family: var(--yb-font);
    color: var(--yb-ink);
}

/* ---------- FAQ ---------- */
.yb-home .kz-faq__item {
    border-color: var(--yb-line);
}
.yb-home .kz-faq__q {
    font-family: var(--yb-font);
    font-weight: 600;
    color: var(--yb-ink);
}
.yb-home .kz-faq__a {
    font-family: var(--yb-font);
    color: var(--yb-muted);
}
.yb-home .kz-faq__sign {
    color: var(--yb-primary);
}
.yb-home .kz-faq__cta {
    border-radius: var(--yb-radius-btn);
    background: var(--yb-primary);
    color: var(--yb-on-primary);
}

/* ---------- Video ---------- */
.yb-home .kz-sc__frame,
.yb-home .kz-sc__poster {
    border-radius: var(--yb-radius);
    overflow: hidden;
}
.yb-home .kz-sc__play-disc {
    background: var(--yb-primary);
    color: var(--yb-on-primary);
}
.yb-home .kz-sc__text {
    font-family: var(--yb-font);
    color: var(--yb-ink);
}
.yb-home .kz-sc__cta {
    border-radius: var(--yb-radius-btn);
}

/* ---------- Partners ---------- */
.yb-home .kz-partners__eyebrow {
    font-family: var(--yb-font);
    color: var(--yb-secondary);
}
.yb-home .kz-partners__name {
    font-family: var(--yb-font);
}

/* ---------- Search and category: the page without the Mapbox app ---------- */
#category-search-body.yb-no-map .main-result-wrapper {
    width: 100%;
    max-width: none;
}
.yb-map {
    width: 100%;
    height: 100%;
    min-height: 420px;
}
.toggle-map-btn .yb-i {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
.filter-toggle .yb-i,
#mobile-search-button .yb-i {
    width: 18px;
    height: 18px;
}
.filters-modal-header .close .yb-i,
#SearchModalMobile .close .yb-i {
    width: 20px;
    height: 20px;
}

/* ---------- Blog: the author's picture ---------- */
.yb-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
.yb-avatar--initials {
    background: var(--yb-primary-soft);
    color: var(--yb-primary-dark);
    font-weight: 600;
    font-size: 18px;
}
.yb-author {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

/* ---------- Featured cities: a city without a picture ---------- */
.city.yb-city--plain {
    background-image: linear-gradient(160deg, var(--yb-primary) 0%, var(--yb-secondary) 100%);
}

/* ---------- Content pages: blocks the page editor can use ---------- */
/* Three steps, each with an icon. */
.yb-steps {
    margin: 32px -15px;
}
.yb-step {
    margin-bottom: 24px;
}
.yb-step img {
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
}
.yb-step h3 {
    margin: 0 0 8px;
    font-family: var(--yb-font);
    font-size: 18px;
    font-weight: 600;
    color: var(--yb-ink);
}
.yb-step p {
    color: var(--yb-muted);
}
/* A photo beside a text. */
.yb-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 40px -15px;
}
.yb-split > div {
    margin-bottom: 20px;
}
.yb-page-photo {
    width: 100%;
    border-radius: var(--yb-radius);
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.yb-split__text h2 {
    margin-top: 0;
    font-weight: 700;
}
.yb-page-cta {
    margin-top: 20px;
}
/* Questions that open. */
.yb-page-faq {
    margin: 40px 0;
}
.yb-page-faq details {
    padding: 16px 0;
    border-bottom: 1px solid var(--yb-line);
}
.yb-page-faq summary {
    font-weight: 600;
    color: var(--yb-ink);
    cursor: pointer;
}
.yb-page-faq details p {
    margin: 10px 0 0;
    color: var(--yb-muted);
}
.yb-credits li {
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--yb-muted);
}