/* ============================================================
   cards.css — Receptkort: alla varianter
   Large horizontal | Medium vertical | Small tall | Medium overlay| Medium banner | quote
   ============================================================ */


/* ============================================================
   DELAD BAS
   ============================================================ */
.card {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    overflow: visible;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 8px 32px rgba(0, 0, 0, 0.45);
    margin-bottom:calc(20px + 1rem);
}

/* Global ikonbegränsning — alla ikoner utom kortfoton */
.card img:not(.card__thumb img) {
    max-height: 22px;
    max-width: 32px;
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.card--quote .card__meta img { max-height: 30px; max-width: 80px; }

.card .card-thumb{box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);}

/* ============================================================
   LARGE HORIZONTAL CARD - The original for desktop
============================================================ */
.card--large {
    display: flex;
    width: 100%;
    aspect-ratio: 2 / 1;
    min-width: 380px;
    max-width: 800px;
}

/* Floating foto: procent av kortets bredd/höjd */
.card--large .card__thumb {
    position: absolute;
    top: -7%;
    left: 2.5%;
    width: 59.3%;
    height: 73%;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38);
    z-index: 10;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}
.card--large .card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (min-width: 769px) {
    .card--large .card__thumb:hover {
        width: 95%;
        height: 99%;
        top: -7%;
        left: 2.5%;
    }
}

/* Vänsterkolumn: nederjusterad */
.card--large .card-meta-row {
    flex: 0 0 61.8%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5% 0 3% 3%;
}

/* Högerkolumn */
.card--large .card__right {
    flex: 0 0 38.2%;
    display: flex;
    flex-direction: column;
    padding: 3% 3% 4% 3%;
    position: relative;
    overflow: hidden;
}




/* A — Mobil (≤768px): stackas vertikalt */
@media (max-width: 768px) {
    .card--large {
        aspect-ratio: unset;
        width: 100%;
        max-width: 420px;
        min-width: unset;
        height: unset;
        flex-direction: column;
        padding: 20px;margin-bottom: calc(32px + 1rem);
        margin-left: auto;
        margin-right: auto;
        display:unset;
    }
    .card--large .card__thumb {
        position: relative;
        top: unset;
        left: unset;
        margin-top:-40px;
        transition: none;
        z-index:2;
        width:unset; height:unset;
    }
    .card--large .card__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    .card--large .card-meta-row{
        flex-direction:row;
        justify-content: space-between;
        padding: 10px 0;;
    }
    .card--large .card__right{padding: unset;}
}


/* ============================================================
   LARGE VERTICAL CARD - The original for mobile
   ============================================================ */
.card--tall-m {
    max-width: 370px;
    padding:20px;
    /* flex-shrink tillåts (0 vore standard) — men i grid/wrap-kontext
       sätter föräldern bredden via width: calc(...) */
    margin-bottom: calc(32px + 1rem);
    width:315px;
}
.card--tall-m .card__thumb {
    position: relative;
    margin-top: -40px;
    /*height: 155px;*/
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 2;
}
.card--tall-m .card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
@media (max-width: 768px) {
    .card--tall-m{width:unset;}
}
/* ============================================================
   Small tall - Litet stående kort, utan beskrivning.
   Får plats med två bredvid även i smal kolumn
   ============================================================ */
.card--tall-s {
    max-width: 370px;
    padding:10px;
    /* flex-shrink tillåts (0 vore standard) — men i grid/wrap-kontext
       sätter föräldern bredden via width: calc(...) */
    margin-bottom: 32px;
}
.card--tall-s .card__thumb {
    position: relative;
    margin-top: -20px; 
    /*height: 155px;*/
    border-radius: var(--radius);
    overflow: hidden;
    z-index: 2;
    aspect-ratio:55/34;
}
.card--tall-s .card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.card--tall-s .card__body      { padding: 12px 0; }

/* B — Mobil: något smalare */
@media (max-width: 768px) {
    .card--tall-s              {max- width: 180px; margin-bottom: 28px; }
    .card--tall-s .card__thumb { margin-top: -14px; }
}



/* ============================================================
   Medium Fullbleed image with text overlay
   ============================================================ */
.card--overlay-m {
    max-width: 400px;
    aspect-ratio:55 / 34;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08), 0 5px 18px rgba(0,0,0,0.3);
    margin-bottom:unset;
}
.card--overlay-m .card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.card--overlay-m .card__overlay   { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 55%); }
.card--overlay-m .card__body      { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 14px; }
.card--overlay-m .card__title     { color: #fff; font-size: 14px; line-height: 1.15; }



/* ============================================================
   Medium banner (bild vänster, text höger)
   Fast höjd sätts av zones.css (100px).
   ============================================================ */
.card--banner-m {
    display: flex;
    overflow: hidden;
    margin-bottom: unset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 5px 18px rgba(0,0,0,0.22);
    height: 133px;
}
/* Bild: fast bredd i px, inte procent — förhindrar klippning */
.card--banner-m .card__thumb {
    flex: 0 0 133px;
    width: 133px;
    overflow: hidden;
    aspect-ratio:1;
}
.card--banner-m .card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Text: resten av bredden, klipp overflow */
.card--banner-m .card__body {
    flex: 1;
    min-width: 0; /* kritiskt — tillåter text att trunkeras */
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}
.card--banner-m .card__title     {
    margin-bottom: 3px;
    /* Klipp titel till 2 rader */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* F — Mobil: bild lite smalare */
@media (max-width: 768px) {
    .card--banner-m .card__thumb { flex: 0 0 90px; width: 90px; }
    .card--banner-m .card__body  { padding: 8px 10px; }
    .card--banner-m .card__title { font-size: 12px; }
}


/* ============================================================
   Large banner NOT IN USE
   ============================================================ */
/* ============================================================
   DELADE ELEMENT
   ============================================================ */
/* Beskrivning: absolut inom högerkolumnen */
.card__intro {
    font-size: clamp(12px, 16px, 22px);
    line-height: 1.5;
    color: var(--color-text);
    text-align: justify;
    overflow: hidden;
}

/* Titel: skalas med bredden */
.card__title {
    font-size: clamp(16px, 18px, 22px);
    font-family: var(--font-title), serif;
    margin-bottom: 2%;
    color: var(--color-main);
    line-height: 1.1;
}
.card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 80%;
    margin-bottom: 4px;
}
.card__rating small { color: var(--color-text-light); }
.card__thumb{aspect-ratio: 55/34;}
/*Label and timing*/
.card-meta-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px 0;
}
/* Timing-ikoner */
.card__meta {
  display: flex;
  align-items: flex-end;
  align-self: flex-end;
  text-align: center;
  min-width: 180px;
  justify-content: flex-end;
}
.card__label {
    font-family: var(--font-special), sans-serif;
    color: var(--color-secondary-light);
    font-size: 2rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    align-self: flex-start;
}
.card__meta > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    flex-basis: 25%;
    min-width:36px;
}
.card__meta img {
    height: 20px;
    width: auto;
    margin-bottom: 2px;
}
.card__meta span {
    font-size: clamp(8px,10px,10px);
    color: var(--color-text-light);
    display: block;
    text-align: center;
    white-space:nowrap;
}
.card__meta-text {
    font-size: 80%;
    color: var(--color-text-light);
    display: block;
}
/* ============================================================
   FAB — Floating Action Button
   Nedsänkt under kortet — avsiktlig brand-grej.
   ============================================================ */
.card__fab {
    position: absolute;
    right: 28px;
    bottom: -28px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(255, 255, 255, 0.6);
    z-index: 20;
    text-decoration: none;
    transition: transform 0.18s, box-shadow 0.18s;
    cursor: pointer;
}
.card__fab:hover {
    transform: scale(1.07);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.55),
        0 0 0 3px rgba(255, 255, 255, 0.85);
}
.card__fab span {
    -webkit-mask-image: url('/images/ar3.svg');
    mask-image: url('/images/ar3.svg');
    background-image: linear-gradient(-45deg, rgba(255,255,255,0.7), rgba(255,255,255,0.85));
    display: inline-block;
    width: 46px;
    height: 46px;
    background-size: cover;
    background-repeat: no-repeat;
}

/* B: lite mindre FAB */
.card--vertical .card__fab       { right: 18px; bottom: -24px; width: 48px; height: 48px; }
.card--vertical .card__fab span  { width: 38px; height: 38px; }

/* Citat: pil nedåt */
.card--quote .card__fab span { transform: rotate(90deg); }


/* ============================================================
   CITAT-KORT
   ============================================================ */
.card--quote .card__thumb {
    background-image: var(--bggradient);
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    padding: 20px;
}
.card--quote .card__thumb div {
    border: 1px solid #fff;
    border-radius: var(--radius);
    font-size: 22px;
    line-height: 1.3;
    font-family: var(--font-accent), sans-serif;
    flex-basis: 100%;
    padding: 20px;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
}


/* ============================================================
   STJÄRNOR
   ============================================================ */
.Stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times, serif;
    line-height: 1;
}
.Stars::before {
    content: "★★★★★";
    letter-spacing: 3px;
    background: linear-gradient(
        90deg,
        var(--star-background) var(--percent),
        var(--star-color) var(--percent)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}