/* ==========================================================
   Complex services: package cards (kp-), small cards (kt-), grey intro card (kci),
   direction panels (kpn-), pre-operative blocks.
   ========================================================== */

/* ---------- Package cards ---------- */

.kp {
    padding-block: 1.5rem 1rem;
}

.kp__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.kp__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.kp--single .kp__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: stretch;
}

/* One card spans the same number of rows and takes them from the grid (subgrid),
   so rows line up between neighbouring cards. */
.kp-card {
    display: grid;
    grid-row: span var(--kp-rows, 8);
    grid-template-rows: subgrid;
    row-gap: 0;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--brand-accent-t5);
    border: 2px solid var(--brand-accent-t7);
    border-radius: calc(1.5rem * var(--rs, 1));
}

.kp--single .kp-card { margin-bottom: 0; }

.kp-card__head {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    padding: 1.1rem 1.2rem;
    background: #fff;
    border-radius: calc(1.1rem * var(--rs, 1));
}

.kp-card__level {
    margin: 0 0 0.3rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-color, #1F2937);
}

.kp-card__audience {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #6B7280;
}

.kp-card__money {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.kp-card__badge {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--brand-cta);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.kp-card__prices {
    display: flex;
    flex-direction: column-reverse; /* the old price sits above the package price */
    align-items: flex-end;
    text-align: right;
}

.kp-card__price {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-primary, var(--brand-accent));
    white-space: nowrap;
}

.kp-card__retail {
    margin-bottom: 0.2rem;
    font-size: 0.9375rem;
    line-height: 1.3;
    color: #4B5563;
}

.kp-card__retail s {
    font-weight: 600;
    color: #A33A3A;
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
}

.kp-card__inc {
    margin: 0 0 0.2rem;
    padding: 0.2rem 0.25rem 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-accent) 29%, #fff);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color, #1F2937);
}

.kp-card__group {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
    padding: 0.75rem 0.25rem 0.2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6B7280;
}

.kp-card__group b {
    color: var(--color-primary, var(--brand-accent));
}

.kp-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid rgba(197, 227, 215, 0.7);
    font-size: 0.9rem;
    line-height: 1.35;
}

.kp-row__mark {
    flex: 0 0 1.1rem;
    text-align: center;
    font-weight: 700;
}

.kp-row--yes .kp-row__mark { color: var(--color-primary, var(--brand-accent)); }
.kp-row--no .kp-row__mark,
.kp-row--no .kp-row__text { color: #B3BAC4; }

.kp-row__text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--brand-accent-t6);
}

.kp-card__note {
    padding: 0.7rem 0.25rem 0;
    font-size: 0.8125rem;
    font-style: italic;
    color: #4B5563;
}

.kp-card__foot {
    align-self: end;
    padding-top: 0.9rem;
}

.kp-card__cta {
    padding: 0.6rem 1.8rem;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-primary, var(--brand-accent));
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.kp-card__cta:hover { filter: brightness(0.94); }

/* Option "packages_hide_excluded": only included items, no row alignment; cards of one height per row */
.kp__grid--compact { row-gap: 1.25rem; }

.kp__grid--compact .kp-card {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
    margin-bottom: 0;
}

.kp__grid--compact .kp-card__note:empty { display: none; }
.kp__grid--compact .kp-card__foot { margin-top: auto; }

.kp-aside {
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 2px solid var(--brand-accent-t7);
    border-radius: calc(1.5rem * var(--rs, 1));
}

.kp-aside__title {
    margin: 0 0 0.4rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.kp-aside__text {
    margin: 0 0 1.25rem;
    line-height: 1.55;
    color: #4B5563;
}

.kp-aside__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kp-aside__facts li {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 1rem;
    background: var(--brand-accent-t5);
    border-radius: calc(0.9rem * var(--rs, 1));
    font-size: 0.8125rem;
    color: #6B7280;
}

.kp-aside__facts b {
    font-size: 0.95rem;
    color: var(--text-color, #1F2937);
}

@media (max-width: 991.98px) {
    .kp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kp__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
    .kp--single .kp__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .kp__grid,
    .kp__grid[data-count="2"] { grid-template-columns: minmax(0, 1fr); }
    .kp-card__price { font-size: 1.625rem; }
}

/* ---------- Pre-op blocks around the cards (before_packages / after_packages) ---------- */

.kp-before { padding-top: 1.5rem; }

.kp-promos {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.kp-promo {
    padding: 1.75rem;
    border-radius: calc(1.5rem * var(--rs, 1));
}

.kp-promo--green {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    background: var(--brand-accent);
    color: #fff;
}

.kp-promo--grey { background: #F1F3F2; color: var(--text-color, #1F2937); }

.kp-promo__title { margin: 0 0 0.75rem; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.kp-promo--grey .kp-promo__title { font-size: 1.125rem; }
.kp-promo__text { margin: 0; font-size: 0.95rem; line-height: 1.55; }

.kp-promo__down {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
}

.kp-promo__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.5rem 1.1rem;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.kp-promo__extra { margin: 0.9rem 0 0; font-size: 0.9rem; line-height: 1.55; color: #4B5563; }

.kp-after { padding-block: 1rem 2rem; }

.kp-why {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.kp-why__card {
    padding: 1.75rem;
    background: #F4F5F4;
    border-radius: calc(1.5rem * var(--rs, 1));
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09);
}

.kp-why__title { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; }

.kp-why__list { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; }

.kp-why__list li { display: flex; gap: 0.9rem; align-items: flex-start; }

.kp-why__num {
    flex: 0 0 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--brand-accent);
    color: #fff;
    font-weight: 700;
}

.kp-why__list b { display: block; margin-bottom: 0.15rem; }
.kp-why__list span.kp-why__t { font-size: 0.9rem; line-height: 1.5; color: #4B5563; }

.kp-why__pic img { display: block; width: 100%; height: 100%; min-height: 16rem; object-fit: cover; border-radius: calc(1.5rem * var(--rs, 1)); }

.kp-pros__title { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; }

.kp-pros__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.kp-pros__item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: #F4F5F4;
    border-radius: calc(1.25rem * var(--rs, 1));
    font-weight: 600;
    line-height: 1.4;
}

.kp-pros__icon { width: 3rem; height: 3rem; color: var(--brand-accent); }

@media (max-width: 767.98px) {
    .kp-promos,
    .kp-why { grid-template-columns: minmax(0, 1fr); }
    .kp-pros__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Small tiles (kompleks_tiles_block) ---------- */

.kt__title { margin: 0 0 1.25rem; font-size: 1.75rem; font-weight: 700; }

.kt__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: #F4F5F4;
    border-radius: calc(1.25rem * var(--rs, 1));
}

.kt-card__media { display: block; margin-bottom: 0.35rem; }

.kt-card__media img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: calc(1rem * var(--rs, 1));
}

.kt-card__title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }

.kt-card__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #4B5563;
}

.kt-card__price { margin: 0; font-weight: 700; color: var(--color-primary, var(--brand-accent)); }

.kt-card__btn {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.5rem 1.4rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--color-primary, var(--brand-accent));
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.kt-card__btn:hover { filter: brightness(0.94); color: #fff; }

.kt-card--soon { opacity: 0.6; }

.kt-card__badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-pill, 999px);
    background: #6B7280;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* four cards: one row of four, taller, price + button pinned to the bottom */
@media (min-width: 992px) { .kt__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kt__grid--4 .kt-card__media img { height: 200px; }
.kt__grid--4 .kt-card { padding-bottom: 1.25rem; }
.kt-card__price { margin-top: auto; }
.kt-card__price + .kt-card__btn { margin-top: 0; }

@media (max-width: 991.98px) { .kt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kt__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Grey intro card (kompleks_intro_block) ---------- */

.kci { padding: 2rem 0; background: var(--brand-accent-t10); }

.kci__card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    overflow: hidden;
    background: #F1F3F2;
    border-radius: calc(1.5rem * var(--rs, 1));
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.13);
}

.kci__card--text { grid-template-columns: minmax(0, 1fr); }

.kci__text { padding: 2rem 2.25rem; align-self: center; }
.kci__title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; }
.kci__lead { margin: 0 0 0.9rem; font-weight: 700; line-height: 1.5; }
.kci__line { display: block; width: 3.5rem; height: 3px; margin-bottom: 1rem; border-radius: calc(2px * var(--rs, 1)); background: var(--brand-accent); }
.kci__body { font-size: 0.9rem; line-height: 1.6; color: #374151; }
.kci__body p { margin: 0 0 0.6rem; }

.kci__body ul { margin: 0 0 0.6rem; padding-left: 1.2rem; list-style: disc; }
.kci__body li { margin-bottom: 0.2rem; }
.kci__media { position: relative; min-height: 18rem; }
.kci__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

@media (max-width: 767.98px) {
    .kci__card { grid-template-columns: minmax(0, 1fr); }
    .kci__media { min-height: 14rem; }
    .kci__text { padding: 1.5rem; }
}

/* ---------- Direction panels (kompleks_panels_block) ---------- */

.kpn__title { margin: 0 0 1.25rem; font-size: 1.75rem; font-weight: 700; }

.kpn__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

.kpn-panel {
    position: relative;
    display: block;
    padding: 1.25rem;
    background: var(--brand-accent-t10);
    border-radius: calc(1.5rem * var(--rs, 1));
}

.kpn-panel__title { display: flex; align-items: center; min-height: 5rem; margin: 0 0 0.75rem; padding-right: 5.75rem; font-size: 1.125rem; font-weight: 700; }

.kpn-panel__title a { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }

.kpn-panel__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #fff;
    line-height: 1;
}

.kpn-panel__rows { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }

.kpn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border-radius: calc(0.9rem * var(--rs, 1));
    color: var(--text-color, #1F2937);
    font-size: 0.9rem;
    line-height: 1.3;
    text-decoration: none;
}

a.kpn-row:hover { box-shadow: 0 0 0 2px var(--brand-accent-t6) inset; }

.kpn-row__price { font-weight: 700; white-space: nowrap; }

.kpn-panel__pic { position: absolute; top: 1.25rem; right: 1.25rem; }

.kpn-panel__pic img {
    display: block;
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border: 3px solid #fff;
    border-radius: 50%;
}

@media (max-width: 991.98px) { .kpn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .kpn__grid { grid-template-columns: minmax(0, 1fr); } }

/* check-up hub "Elave imkanlar": taller cards (scoped to this section id) */
#elave-imkanlar .kt-card__media img { height: 200px; }
#elave-imkanlar .kt-card { padding-bottom: 1.25rem; }

/* single package side block: purpose items + result line */
.kp-aside__list { margin: 0 0 0.9rem; padding-left: 1.2rem; list-style: disc; }
.kp-aside__list li { margin-bottom: 0.3rem; }
.kp-aside__result { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; color: #4B5563; }
.kp-aside__result b { color: var(--color-primary, var(--brand-accent)); }