/* ==========================================================================
   Testimonials — Frutilu Design System (vir: Mnenja sekcija.dc.html → 1a)
   Ink Black #111111 · Juicy Orange #F6A300 · Mist #F4F4F4
   Montserrat 900/800 naslovi · Open Sans telo · brez navpičnih odmikov sekcije
   ========================================================================== */

.tm-testimonials {
    --tm-columns: 4;
    --tm-columns-fallback: var(--tm-columns);
    --tm-gap: 20px;
    --tm-tx: 22px;            /* osnovna velikost besedila mnenja */
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: var(--tm-mt, 0) var(--tm-mr, var(--tm-mx, 0)) var(--tm-mb, 0) var(--tm-ml, var(--tm-mx, 0));
    padding: var(--tm-pt, 0) var(--tm-pr, var(--tm-px, 0)) var(--tm-pb, 0) var(--tm-pl, var(--tm-px, 0));
    color: #111111;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    box-sizing: border-box;
}

.tm-testimonials *,
.tm-testimonials *::before,
.tm-testimonials *::after {
    box-sizing: border-box;
}

/* --- Glava: naslov levo, puščice desno --- */

.tm-testimonials .tm-testimonials__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin: 0 0 28px;
    padding: 0;
}

.tm-testimonials .tm-testimonials__intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tm-testimonials .tm-testimonials__header h2 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: var(--tm-h2-fw, 900);
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #111111;
    text-wrap: balance;
}

.tm-testimonials .tm-testimonials__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.tm-testimonials .tm-testimonials__stat {
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}

/* --- Puščice (kliki 48 px, SVG natančno na sredini) --- */

.tm-testimonials .tm-testimonials__pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.tm-testimonials .tm-pagination__status {
    min-width: 44px;
    font-size: 15px;
    font-weight: 700;
    color: #111111;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tm-testimonials .tm-pagination__prev,
.tm-testimonials .tm-pagination__next {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    color: #111111;
    background: transparent;
    box-shadow: inset 0 0 0 2px #111111;
    transition: background .2s cubic-bezier(.2,.8,.2,1), opacity .2s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}

.tm-testimonials .tm-pagination__next {
    background: #F6A300;
    box-shadow: none;
}

.tm-testimonials .tm-pagination__prev svg,
.tm-testimonials .tm-pagination__next svg {
    display: block;
    width: 22px;
    height: 22px;
}

.tm-testimonials .tm-pagination__prev:hover { background: #EBEBEB; color: #111111; }
.tm-testimonials .tm-pagination__next:hover { background: #D88F00; color: #111111; }
.tm-testimonials .tm-pagination__prev:active,
.tm-testimonials .tm-pagination__next:active { transform: scale(.96); }

.tm-testimonials .tm-pagination__prev:focus-visible,
.tm-testimonials .tm-pagination__next:focus-visible {
    outline: 3px solid #111111;
    outline-offset: 3px;
}

.tm-testimonials .tm-pagination__prev:disabled,
.tm-testimonials .tm-pagination__next:disabled {
    opacity: .3;
    cursor: default;
    transform: none;
}

.tm-testimonials .tm-pagination__prev:disabled:hover { background: transparent; }
.tm-testimonials .tm-pagination__next:disabled:hover { background: #F6A300; }

/* --- Drsnik --- */

.tm-testimonials .tm-testimonials__body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.tm-testimonials .tm-testimonials__carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 6px 0 24px;
    margin: -6px 0 -24px;
    cursor: grab;
}

.tm-testimonials .tm-testimonials__carousel.is-dragging { cursor: grabbing; }

.tm-testimonials .tm-testimonials__track {
    display: flex;
    gap: var(--tm-gap);
    width: 100%;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.tm-testimonials .tm-testimonials__track.no-transition { transition: none !important; }
.tm-testimonials:not(.tm-testimonials--ready) .tm-testimonials__track { transform: none !important; }

/* --- Kartica: bela, obroba ZNOTRAJ (drsnik je ne odreže) --- */

.tm-testimonials .tm-testimonials__card {
    flex: 0 0 auto;
    width: calc((100% - (var(--tm-gap) * (var(--tm-columns-fallback) - 1))) / var(--tm-columns-fallback));
    min-width: 0;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 28px;
    background: #FFFFFF !important;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s, border-color .2s;
    -webkit-user-select: none;
    user-select: none;
}

.tm-testimonials .tm-testimonials__card:hover {
    transform: translateY(-2px);
    border-color: rgba(0,0,0,.16);
    box-shadow: 0 12px 22px rgba(0,0,0,.08);
}

.tm-testimonials .tm-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tm-testimonials .tm-card__stars {
    display: flex;
    gap: 2px;
    line-height: 1;
}

.tm-testimonials .tm-card__stars svg { display: block; flex: none; }

.tm-testimonials .tm-card__quote {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 64px;
    line-height: .6;
    height: 28px;
    color: #F6A300;
}

/* Citat: <div>, nikoli <blockquote>/<p> (tema Grogin jih obarva oranžno).
   Višina kartice ostane enaka ne glede na dolžino mnenja: besedilo ima omejeno število vrstic,
   avtor in izdelek sta vedno na dnu. */
.tm-testimonials .tm-card__text {
    flex: 0 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: var(--tm-tx-fw, 800);
    font-size: var(--tm-tx);
    font-style: normal;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #111111 !important;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* Srednje dolgo mnenje (61–120 znakov) */
.tm-testimonials .tm-card__text.is-medium {
    font-size: max(18px, calc(var(--tm-tx) * .8));
    line-height: 1.3;
}

/* Dolgo mnenje (> 120 znakov): manjša pisava, največ 4 vrstice, nato … (celotno besedilo v title) */
.tm-testimonials .tm-card__text.is-long {
    font-size: max(15px, calc(var(--tm-tx) * .68));
    line-height: 1.45;
}

/* Manj stolpcev = širše kartice = večje besedilo */
.tm-testimonials.tm-cols-1,
.tm-testimonials.tm-cols-2,
.tm-testimonials.tm-cols-3 { --tm-tx: 26px; }

.tm-testimonials .tm-card__text::before,
.tm-testimonials .tm-card__text::after { content: none !important; }

/* Avtor */
.tm-testimonials .tm-card__person {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tm-testimonials .tm-card__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #111111;
    color: #FFFFFF;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
}

.tm-testimonials .tm-card__who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tm-testimonials .tm-card__author {
    font-weight: var(--tm-au-fw, 800);
    font-size: var(--tm-au-fs, 16px);
    color: #111111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-testimonials .tm-card__meta {
    font-size: 13px;
    color: #50575e;
}

/* Izdelek */
.tm-testimonials .tm-card__product {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 14px 8px 8px;
    border-radius: 16px;
    background: #F4F4F4;
    color: #111111;
    text-decoration: none;
    transition: background .2s;
}

.tm-testimonials .tm-card__product:not(:has(.tm-card__product-img)) { padding-left: 14px; }
.tm-testimonials .tm-card__product:hover { background: #EBEBEB; color: #111111; }
.tm-testimonials .tm-card__product:focus-visible { outline: 3px solid #F6A300; outline-offset: 2px; }

.tm-testimonials .tm-card__product-img {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFFFFF;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.tm-testimonials .tm-card__product-img img {
    display: block;
    width: auto;
    height: auto;
    max-width: 38px;
    max-height: 38px;
    margin: 0;
    object-fit: contain;
    transform: rotate(-6deg);
}

.tm-testimonials .tm-card__product-name {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- CTA --- */

.tm-testimonials .tm-testimonials__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
    text-align: center;
}

.tm-testimonials .tm-cta__heading {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111111;
}

.tm-testimonials .tm-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    border-radius: 999px;
    background: #F6A300;
    color: #111111;
    font-weight: 800;
    font-size: 17px;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
}

.tm-testimonials .tm-cta__button:hover {
    background: #D88F00;
    color: #111111;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

/* ==========================================================================
   Odzivnost (stolpce določa JS: ≤1024 → 3, ≤768 → 2, ≤420 → 1)
   ========================================================================== */

@media (max-width: 1024px) {
    .tm-testimonials { --tm-columns-fallback: min(var(--tm-columns), 3); }
    .tm-testimonials[class*="tm-cols-"] { --tm-tx: 22px; }
}

@media (max-width: 768px) {
    .tm-testimonials { --tm-columns-fallback: min(var(--tm-columns), 2); --tm-gap: 16px; }
    .tm-testimonials .tm-testimonials__header { margin-bottom: 20px; }
    .tm-testimonials .tm-testimonials__card { min-height: 280px; padding: 22px; }
}

@media (max-width: 640px) {
    .tm-testimonials .tm-testimonials__card { max-width: 350px; }
    .tm-testimonials[class*="tm-cols-"] { --tm-tx: 21px; }
    .tm-testimonials .tm-cta__button { width: 100%; }
}

@media (max-width: 420px) {
    .tm-testimonials { --tm-columns-fallback: 1; }
    .tm-testimonials .tm-testimonials__card { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-testimonials .tm-testimonials__track,
    .tm-testimonials .tm-testimonials__card { transition: none; }
}

/* Odmiki na telefonu (Nastavitve → Odmiki → Telefon); prazno = vrednost za računalnik */
@media (max-width: 768px) {
    .tm-testimonials {
        margin: var(--tm-mt-m, var(--tm-mt, 0)) var(--tm-mr-m, var(--tm-mr, var(--tm-mx, 0))) var(--tm-mb-m, var(--tm-mb, 0)) var(--tm-ml-m, var(--tm-ml, var(--tm-mx, 0)));
        padding: var(--tm-pt-m, var(--tm-pt, 0)) var(--tm-pr-m, var(--tm-pr, var(--tm-px, 0))) var(--tm-pb-m, var(--tm-pb, 0)) var(--tm-pl-m, var(--tm-pl, var(--tm-px, 0)));
    }
    .tm-testimonials.tm-w-full { margin-left: calc(50% - 50vw + var(--tm-sbw, 0px) / 2) !important; margin-right: calc(50% - 50vw + var(--tm-sbw, 0px) / 2) !important; }
}

/* Širina: omejena (na sredini) ali polna (od roba do roba, rob vsebine 15 px) */
.tm-testimonials.tm-w-fixed { --tm-mx: auto; max-width: var(--tm-maxw, 1360px); }

/* Do desnega roba: sekcija je omejena in poravnana z vsebino strani (levo), drsnik pa sega do
   desnega roba zaslona — naslednja kartica »pokuka«. --tm-bleed-r (razdalja do desnega roba)
   izmeri JS; rezervna vrednost velja za sekcijo na sredini zaslona. */
.tm-testimonials.tm-w-bleed {
    --tm-mx: auto;
    --tm-px: 15px;
    max-width: var(--tm-maxw, 1360px);
}
.tm-testimonials.tm-w-bleed .tm-testimonials__carousel {
    width: auto;
    max-width: none;
    margin-right: calc(-1 * var(--tm-bleed-r, max(0px, (100vw - var(--tm-sbw, 0px) - var(--tm-maxw, 1360px)) / 2)));
}
.tm-testimonials.tm-w-full {
    --tm-px: 15px;
    width: calc(100vw - var(--tm-sbw, 0px));
    max-width: calc(100vw - var(--tm-sbw, 0px));
    margin-left: calc(50% - 50vw + var(--tm-sbw, 0px) / 2);
    margin-right: calc(50% - 50vw + var(--tm-sbw, 0px) / 2);
}

/* Pisava iz nastavitev (prepiše privzete velikosti; srednja/dolga mnenja se izpeljejo iz --tm-tx) */
.tm-testimonials.tm-has-h2 .tm-testimonials__header h2 { font-size: var(--tm-h2-fs, 48px); }
.tm-testimonials.tm-has-tx[class*="tm-cols-"] { --tm-tx: var(--tm-tx-fs, 22px); }
@media (max-width: 768px) {
    .tm-testimonials.tm-has-h2 .tm-testimonials__header h2 { font-size: var(--tm-h2-fs-m, var(--tm-h2-fs, 30px)); }
    .tm-testimonials.tm-has-tx[class*="tm-cols-"] { --tm-tx: var(--tm-tx-fs-m, var(--tm-tx-fs, 21px)); }
    .tm-testimonials.tm-has-au .tm-card__author { font-size: var(--tm-au-fs-m, var(--tm-au-fs, 16px)); }
}