/* Cards per row: the --cols and --peek variables per section come from /theme.css (Admin > Site Settings > Cards per row). Loaded last. */

[data-cols] { --gap: 18px; }

/* Carousels (specialities, doctors) */
[data-cols] .carousel__track { gap: var(--gap); }
[data-cols] .carousel__item { flex: 0 0 calc((100% - var(--peek, 0px) - (var(--cols, 3) - 1) * var(--gap)) / var(--cols, 3)); }

/* Grids (services, packages, articles, list pages) */
[data-cols].grid, [data-cols] > .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.swipe[data-cols] > .grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }

/* Patient stories slider */
[data-cols] .slider__track { gap: 20px; }
[data-cols] .slider__slide { flex: 0 0 calc((100% - var(--peek, 0px) - (var(--cols, 3) - 1) * 20px) / var(--cols, 3)); }

/* Gallery strip */
[data-cols].gallery-strip, [data-cols].gallery-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }

/* Phones: grids become swipe rows sized from the same variable */
@media (max-width: 639px) {
    [data-cols] { --gap: 14px; }
    [data-cols] .grid--swipe, [data-cols].grid--swipe { display: flex; gap: 14px; }
    [data-cols] .grid--swipe > *, [data-cols].grid--swipe > * { flex: 0 0 calc((100% - var(--peek, 0px) - (var(--cols, 3) - 1) * 14px) / var(--cols, 3)); }
    [data-cols].gallery-strip { display: grid; }
}

/* Compact cards inside detail pages (the main column is narrower than a list page) */
.layout__main [data-cols] .card-doctor__photo { aspect-ratio: 4 / 3; }
.layout__main [data-cols] .card-doctor__body { padding: 12px 12px 14px; }
.layout__main [data-cols] .card-doctor__body h3 { font-size: 1rem; }
.layout__main [data-cols] .card-doctor__meta { font-size: .76rem; margin: 4px 0 10px; }
.layout__main [data-cols] .card-doctor .btn { padding: .4rem .6rem; font-size: .76rem; }
.layout__main [data-cols] .card__media { aspect-ratio: 16 / 10; }
.layout__main [data-cols] .card__body { padding: 12px 14px 14px; }
.layout__main [data-cols] .card__body h3 { font-size: .98rem; }
.layout__main [data-cols] .card__body p:not(.card__meta) { font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.layout__main [data-cols] .card-package__media { aspect-ratio: 16 / 9; }
.layout__main [data-cols] .card-package__body { padding: 12px 14px 14px; gap: 6px; }
.layout__main [data-cols] .card-package__body h3 { font-size: .98rem; }
.layout__main [data-cols] .card-package__tests-list { font-size: .76rem; }
.layout__main [data-cols] .card-package__price strong { font-size: 1.3rem; }
.layout__main [data-cols] .card-feedback { padding: 16px; }
.layout__main [data-cols] .card-feedback blockquote { font-size: .88rem; }
.layout__main .cover { max-height: 320px; }


.layout__main [data-cols] .card-doctor .card-doctor__photo { aspect-ratio: auto; height: 150px; }
.layout__main [data-cols] .card .card__media { aspect-ratio: auto; height: 110px; }
.layout__main [data-cols] .card-package .card-package__media { aspect-ratio: auto; height: 120px; }
.layout__main [data-cols] .card-package__tests-list { max-height: 3.4em; overflow: hidden; }
@media (max-width: 640px) {
    .layout__main [data-cols] .card-doctor .card-doctor__photo { height: 120px; }
    .layout__main [data-cols] .card .card__media { height: 90px; }
    .layout__main [data-cols] .card-package .card-package__media { height: 100px; }
}
@media (max-width: 640px) {
    .layout__main [data-cols] .card-doctor .card-doctor__photo { height: 100px; }
    .layout__main [data-cols] .card-doctor__body { padding: 8px 8px 10px; }
    .layout__main [data-cols] .card-doctor__body h3 { font-size: .86rem; line-height: 1.25; }
    .layout__main [data-cols] .card-doctor__spec { font-size: .72rem; }
    .layout__main [data-cols] .card-doctor__meta { font-size: .68rem; margin: 2px 0 6px; }
    .layout__main [data-cols] .card-doctor .btn { padding: .3rem .4rem; font-size: .7rem; }
    .layout__main [data-cols] .card__body { padding: 8px 10px 10px; }
    .layout__main [data-cols] .card__body h3 { font-size: .86rem; }
    .layout__main [data-cols] .card__body p:not(.card__meta) { -webkit-line-clamp: 2; font-size: .76rem; }
}