/* Cu29 Feeds — frontend styles */

.cu29feeds {
    --cu29feeds-cols:          3;
    --cu29feeds-gap:           12px;
    --cu29feeds-radius:        6px;
    --cu29feeds-overlay-bg:    rgba(0,0,0,.58);
    --cu29feeds-overlay-color: #fff;
    --cu29feeds-caption-bg:    #fff;
    --cu29feeds-caption-color: #374151;
    --cu29feeds-date-color:    #9ca3af;
}

/* ── Gap presets ──────────────────────────────────────────── */
.cu29feeds--gap-small  { --cu29feeds-gap: 4px;  }
.cu29feeds--gap-medium { --cu29feeds-gap: 12px; }
.cu29feeds--gap-large  { --cu29feeds-gap: 20px; }
.cu29feeds--gap-xlarge { --cu29feeds-gap: 32px; }

/* ── Grid ─────────────────────────────────────────────────── */
.cu29feeds--grid {
    display: grid;
    grid-template-columns: repeat(var(--cu29feeds-cols), 1fr);
    gap: var(--cu29feeds-gap);
}

/* ── Masonry (CSS columns) ────────────────────────────────── */
.cu29feeds--masonry {
    columns: var(--cu29feeds-cols);
    column-gap: var(--cu29feeds-gap);
}
.cu29feeds--masonry .cu29feeds__item {
    break-inside: avoid;
    margin-bottom: var(--cu29feeds-gap);
    display: block;
}

/* ── List ─────────────────────────────────────────────────── */
.cu29feeds--list {
    display: flex;
    flex-direction: column;
    gap: var(--cu29feeds-gap);
}
.cu29feeds--list .cu29feeds__item {
    display: flex;
    gap: var(--cu29feeds-gap);
    align-items: flex-start;
}
.cu29feeds--list .cu29feeds__img-wrap {
    flex-shrink: 0;
    width: 140px;
}
.cu29feeds--list .cu29feeds__body {
    flex: 1;
    padding: 4px 0;
}
.cu29feeds--list .cu29feeds__img-wrap { aspect-ratio: auto !important; }
.cu29feeds--list .cu29feeds__img     { height: auto !important; }

/* ── Item ─────────────────────────────────────────────────── */
.cu29feeds__item {
    overflow: hidden;
    border-radius: var(--cu29feeds-radius);
    position: relative;
    background: #f0f0f0;
}

/* ── Link ─────────────────────────────────────────────────── */
.cu29feeds__link,
.cu29feeds__link:hover,
.cu29feeds__link:visited,
.cu29feeds__link:focus {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
/* List: länken måste vara flex-container för att img+text ska ligga i rad */
.cu29feeds--list .cu29feeds__link {
    display: flex;
    gap: var(--cu29feeds-gap);
    align-items: flex-start;
    width: 100%;
}

/* ── Bild-wrap + aspect ratios ────────────────────────────── */
.cu29feeds__img-wrap {
    position: relative;
    overflow: hidden;
    background: #e5e7eb;
}
.cu29feeds--ratio-square    .cu29feeds__img-wrap { aspect-ratio: 1;   }
.cu29feeds--ratio-landscape .cu29feeds__img-wrap { aspect-ratio: 4/3; }
.cu29feeds--ratio-portrait  .cu29feeds__img-wrap { aspect-ratio: 3/4; }
.cu29feeds--ratio-auto      .cu29feeds__img-wrap { aspect-ratio: auto;}
.cu29feeds--masonry         .cu29feeds__img-wrap { aspect-ratio: auto;}

.cu29feeds__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease, opacity .25s;
}
.cu29feeds--ratio-auto .cu29feeds__img,
.cu29feeds--masonry    .cu29feeds__img { height: auto; }

/* ── Hover: zoom ──────────────────────────────────────────── */
.cu29feeds--hover-zoom .cu29feeds__link:hover .cu29feeds__img {
    transform: scale(1.07);
}

/* ── Hover: dim ───────────────────────────────────────────── */
.cu29feeds--hover-dim .cu29feeds__link:hover .cu29feeds__img {
    opacity: .65;
}

/* ── Caption: hover overlay ───────────────────────────────── */
.cu29feeds__overlay {
    position: absolute;
    inset: 0;
    background: var(--cu29feeds-overlay-bg);
    color: var(--cu29feeds-overlay-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    opacity: 0;
    transition: opacity .22s;
    pointer-events: none;
}
.cu29feeds--caption-hover .cu29feeds__link:hover .cu29feeds__overlay {
    opacity: 1;
}
.cu29feeds--caption-hover .cu29feeds__overlay .cu29feeds__caption {
    color: var(--cu29feeds-overlay-color);
    line-height: 1.45;
    margin: 0 0 5px;
}
.cu29feeds--caption-hover .cu29feeds__overlay .cu29feeds__date {
    color: rgba(255,255,255,.65);
    font-size: .85em;
}

/* ── Caption: alltid nedan ────────────────────────────────── */
.cu29feeds__body {
    padding: 10px 14px 12px;
    background: var(--cu29feeds-caption-bg);
}
.cu29feeds__caption {
    margin: 0 0 4px;
    line-height: 1.5;
    color: var(--cu29feeds-caption-color);
}
.cu29feeds__date {
    font-size: .85em;
    color: var(--cu29feeds-date-color);
}

/* ── Karusell ─────────────────────────────────────────────── */
.cu29feeds__carousel {
    position: relative;
    overflow: hidden;
}
.cu29feeds__carousel-track {
    display: flex;
    transition: transform .32s ease;
}
.cu29feeds__carousel-track .cu29feeds__img-wrap {
    flex: 0 0 100%;
    min-width: 0;
}
.cu29feeds__carousel-count {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: .72em;
    color: #fff;
    background: rgba(0,0,0,.45);
    padding: 2px 7px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
}
.cu29feeds__carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}
.cu29feeds__carousel-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    transition: background .15s, transform .15s;
    /* Större klickyta utan att pricken syns större */
    padding: 6px;
    box-sizing: content-box;
    margin: -6px;
}
.cu29feeds__carousel-dots span.active {
    background: #fff;
    transform: scale(1.2);
}

/* ── Video-badge ──────────────────────────────────────────── */
.cu29feeds__video-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: .75em;
    letter-spacing: .03em;
    color: #fff;
    background: rgba(0,0,0,.45);
    padding: 2px 7px;
    border-radius: 3px;
    pointer-events: none;
}

/* ── Responsiv ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cu29feeds--grid    { grid-template-columns: repeat(2, 1fr); }
    .cu29feeds--masonry { columns: 2; }
    .cu29feeds--list .cu29feeds__img-wrap { width: 100px; }
}
@media (max-width: 480px) {
    .cu29feeds--grid    { grid-template-columns: repeat(1, 1fr); }
    .cu29feeds--masonry { columns: 1; }
    .cu29feeds--list .cu29feeds__img-wrap { width: 80px; }
}