/* IDEREA: karty .drazbaitem. Třída .stav-ukoncena doplňuje Default.aspx podle Eval("ukonceno"). */

/* Lokální tokeny */
:root {
    --iderea-card-font: 1.3rem;
    --iderea-card-font-header: 1.5rem;
    --iderea-card-radius: 6px;
    --iderea-card-pad: 18px;
    --iderea-card-gap: 10px;
    --iderea-card-border: 2px solid var(--brand-orange, #e35727);
    --iderea-card-shadow: 0 2px 12px rgba(31, 46, 53, 0.08);
    --iderea-card-shadow-hover: 0 16px 40px rgba(31, 46, 53, 0.14);
    --iderea-transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.28s ease;
}

/* =============================================================================
   Karta – kontejner
   ============================================================================= */

/* .drazbaitem je současně .col-md-4 — karty jsou přímí potomci .col-md-9 (mimo .tab-content) */
.content .row .drazbaitem,
.content .col-md-9 .drazbaitem {
    margin-bottom: var(--iderea-card-gap);
    padding: var(--iderea-card-pad);
    background: var(--brand-white, #fff);
    border: var(--iderea-card-border);
    border-radius: var(--iderea-card-radius);
    box-shadow: var(--iderea-card-shadow);
    position: relative;
    z-index: 0;
    overflow: visible;
    isolation: isolate;
    transition: var(--iderea-transition);
}

/* Mezery mezi kartami – repeater je přímý potomek .col-md-9 (ne v .tab-content) */
@media (min-width: 992px) {
    .content .col-md-9 > .drazbaitem.col-md-4 {
        width: calc((100% - 2 * var(--iderea-card-gap)) / 3);
        margin-right: var(--iderea-card-gap);
        margin-bottom: var(--iderea-card-gap);
        float: left;
    }

    .content .col-md-9 > .drazbaitem.col-md-4.third {
        margin-right: 0;
    }
}

@media (max-width: 991px) {
    .content .col-md-9 > .drazbaitem.col-md-4 {
        width: 100%;
        margin-right: 0;
        margin-bottom: var(--iderea-card-gap);
        float: none;
    }
}

/* přebít .third { border-right: none } z nemovitostivaukci.css – červený okraj po celém obvodu */
.content .row .drazbaitem.third,
.content .col-md-9 .drazbaitem.third {
    border: var(--iderea-card-border);
}

/* Horní akcent – po najetí se „rozjede“ (gradient ze schématu) */
.drazbaitem::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    border-radius: var(--iderea-card-radius) var(--iderea-card-radius) 0 0;
    background: var(--brand-gradient-main, linear-gradient(90deg, #336f7c 0%, #5a8e99 30%, #a29769 60%, #e35727 100%));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 2;
}

.drazbaitem:hover,
.drazbaitem:focus-within {
    z-index: 3;
    transform: translateY(-5px) scale(1.022);
    box-shadow: var(--iderea-card-shadow-hover);
    border-color: #c73d18;
}

.drazbaitem:hover::after,
.drazbaitem:focus-within::after {
    transform: scaleX(1);
}

.drazbaitem .title {
    padding-top: 0;
    margin-bottom: 12px;
}

.drazbaitem .title a {
    text-decoration: none;
    color: var(--brand-dark, #1f2e35);
    display: block;
}

.drazbaitem .title a:hover,
.drazbaitem .title a:focus {
    color: var(--brand-blue, #336f7c);
}

.drazbaitem .title h4 {
    margin: 0;
    font-family: "Avenir Next LT Pro", Arial, Helvetica, sans-serif;
    font-size: var(--iderea-card-font-header);
    font-weight: 700;
    line-height: 1.35;
    color: var(--brand-dark, #1f2e35);
    letter-spacing: -0.02em;
}

/* Blok obrázku + proměnné štítku */
.drazbaitem .image.crop {
    --ribbon-bg: var(--brand-orange, #e35727);
    --ribbon-text: var(--brand-white, #fff);
    position: relative;
    height: 200px;
    margin-left: calc(-1 * var(--iderea-card-pad));
    margin-right: calc(-1 * var(--iderea-card-pad));
    margin-bottom: 14px;
    width: calc(100% + 2 * var(--iderea-card-pad));
    max-width: none;
    border-radius: 0;
    overflow: hidden;
    background: var(--brand-light, #f7f9fa);
}

.drazbaitem .image.crop a {
    display: block;
    height: 100%;
}

.drazbaitem .crop img,
.drazbaitem .image.crop img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    vertical-align: middle;
}

.drazbaitem:hover .crop img,
.drazbaitem:focus-within .crop img {
    transform: scale(1.07);
}

/* Datum / stav */
.drazbaitem .date {
    padding: 0 0 8px 0;
    font-family: "Avenir Next LT Pro", Arial, Helvetica, sans-serif;
}

.drazbaitem .date p {
    margin: 0 0 4px 0;
    font-weight: 700;
    font-size: var(--iderea-card-font);
    color: var(--brand-dark, #1f2e35);
}

.drazbaitem .date span {
    font-size: var(--iderea-card-font);
    font-weight: 600;
    color: var(--brand-blue, #336f7c);
}

.drazbaitem .date span.konec {
    color: var(--brand-orange, #e35727);
}

/* Ceny */
.drazbaitem .cena {
    padding: 6px 0 0 0;
    font-family: "Avenir Next LT Pro", Arial, Helvetica, sans-serif;
    font-size: var(--iderea-card-font);
}

.drazbaitem .cena + .cena {
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--brand-border-soft, #eaf3f4);
}

.drazbaitem .cena p {
    margin: 0 0 2px 0;
    font-weight: 700;
    font-size: var(--iderea-card-font);
    color: var(--brand-dark, #1f2e35);
}

.drazbaitem .cena span {
    display: inline-block;
    font-size: var(--iderea-card-font);
    font-weight: 700;
    color: var(--brand-orange, #e35727);
    letter-spacing: -0.02em;
}

.drazbaitem .cena strong {
    font-size: var(--iderea-card-font);
    font-weight: 600;
    color: var(--brand-dark, #333);
}

/* Štítek na fotce (rohová stuha) – kapitálky, stejná velikost jako text karty */
.drazbaitem .image.crop::before {
    content: "PŘIPRAVUJEME";
    position: absolute;
    z-index: 4;
    top: 20px;
    left: -56px;
    width: 240px;
    padding: 10px 0;
    text-align: center;
    font-family: "Avenir Next LT Pro", Arial, Helvetica, sans-serif;
    font-size: var(--iderea-card-font);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ribbon-text);
    background: var(--ribbon-bg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    transform: rotate(-42deg);
    transform-origin: center;
    pointer-events: none;
}

/* Nezahájena: datum má <span> bez .konec */
.drazbaitem:has(.date span:not(.konec)) .image.crop::before {
    content: "NEZAHÁJENA";
    text-transform: uppercase;
    background: var(--brand-gradient-main, linear-gradient(90deg, #336f7c 0%, #5a8e99 30%, #a29769 60%, #e35727 100%));
    color: var(--brand-white, #fff);
}

/* Ukončená – třída .stav-ukoncena */
.drazbaitem.stav-ukoncena .image.crop {
    --ribbon-bg: var(--brand-gray-medium, #bdbdbd);
}

.drazbaitem.stav-ukoncena .image.crop::before {
    content: "UKONČENA";
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
    background: var(--brand-gray-medium, #bdbdbd);
    color: var(--brand-white, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Probíhající – oranžový pruh (span.konec, není ukončeno) */
.drazbaitem:has(.date span.konec):not(.stav-ukoncena) .image.crop::before {
    content: "PŘIPRAVUJEME";
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 400;
    background: linear-gradient(
        180deg,
        var(--brand-orange, #e35727) 0%,
        #c73d18 100%
    );
}

/* Ukončená – tlumené datum a cena */
.drazbaitem.stav-ukoncena .date span.konec {
    color: var(--brand-gray-dark, #7b7b7b) !important;
    font-weight: 600;
}

.drazbaitem.stav-ukoncena .cena span {
    color: var(--brand-gray-dark, #7b7b7b) !important;
}

/* =============================================================================
   Prefer reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .drazbaitem,
    .drazbaitem::after,
    .drazbaitem .crop img {
        transition: none;
    }

    .drazbaitem:hover,
    .drazbaitem:focus-within {
        transform: none;
    }

    .drazbaitem:hover .crop img,
    .drazbaitem:focus-within .crop img {
        transform: none;
    }
}