MediaWiki:Common.css

/* ---- Feed block ---- */
.feed-block {
    margin: 2em 0;
}
.feed-title, .feed-title a {
    font-size: 1.4em;
    margin-bottom: 0.5em;
    color: inherit;
    text-decoration: none;
}
.feed-title a:hover {
    text-decoration: underline;
}

.feed-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

/* Individual card */
.feed-item {
    flex: 1 1 300px;
    max-width: 32%;
    box-sizing: border-box;
}
.feed-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.feed-item-thumb {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}
.feed-item-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    padding: 0.5em 0.75em;
}
.feed-item-title h3 {
    color: #fff;
    margin: 0;
    font-size: 1.1em;
}
.feed-item-desc {
    margin-top: 0.5em;
    font-size: 0.9em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feed-item-more {
    color: #0645ad;
    font-weight: bold;
    margin-left: 0.3em;
}

/* Preview mode (homepage): force max 3 per row on wide screens */
.feed-mode-preview .feed-item {
    max-width: 32%;
}

/* Full mode (dedicated "view all" page) */
.feed-mode-full .feed-item {
    max-width: 32%;
}
/* Optional single-column layout: wrap a feed in <div class="feed-single"> */
.feed-single .feed-item {
    max-width: 100%;
    flex: 1 1 100%;
}

/* ---- Responsive breakpoints ---- */
@media (max-width: 900px) {
    .feed-item { max-width: 48%; }
}
@media (max-width: 600px) {
    .feed-items { flex-direction: column; }
    .feed-item { max-width: 100%; }
}

/* =====================================================================
   FEED SYSTEM — LAYOUT ADDITIONS (columns control + new card styles)
   Everything below is additive; it does not alter the original
   .feed-item / .feed-block / .feed-title rules added previously.
   ===================================================================== */

/* ---- Optional column-count override (cols= parameter on {{Feed}}) ----
   Only takes effect on a feed where cols= was actually set; otherwise
   feeds keep using the original flexible 3-per-row layout untouched. */
.feed-items.feed-grid {
    display: grid;
    grid-template-columns: repeat(var(--feed-cols, 3), 1fr);
    gap: 1em;
}
.feed-items.feed-grid .feed-item,
.feed-items.feed-grid .feed-item-side,
.feed-items.feed-grid .feed-item-overlaytop {
    max-width: 100%;
}
@media (max-width: 900px) {
    .feed-items.feed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .feed-items.feed-grid { grid-template-columns: 1fr; }
}

/* ---- style=overlaytop: title on TOP of the photo, description on the
   BOTTOM of the photo, both layered over the image ---- */
.feed-item-overlaytop .feed-item-thumb {
    height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.feed-item-overlaytop .feed-item-title-top {
    background: linear-gradient(rgba(0,0,0,0.65), transparent);
    padding: 0.5em 0.75em;
}
.feed-item-overlaytop .feed-item-title-top h3 {
    color: #fff;
    margin: 0;
    font-size: 1.1em;
}
.feed-item-overlaytop .feed-item-desc-overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    padding: 0.5em 0.75em;
    font-size: 0.85em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- style=side: photo alone on the left, title + description stacked
   on the right, nothing written over the image ---- */
.feed-item-side {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1em;
    max-width: 100%;
    flex: 1 1 100%;
}
.feed-item-side .feed-item-link {
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 100%;
    text-decoration: none;
    color: inherit;
}
.feed-item-side .feed-item-thumb {
    flex: 0 0 240px;
    height: 160px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
}
.feed-item-side .feed-item-body {
    flex: 1 1 auto;
}
.feed-item-side .feed-item-body h3 {
    margin: 0 0 0.3em;
    font-size: 1.2em;
}
.feed-item-side .feed-item-desc {
    margin-top: 0;
    font-size: 0.9em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 600px) {
    .feed-item-side .feed-item-link { flex-direction: column; }
    .feed-item-side .feed-item-thumb { flex: none; width: 100%; }
}

/* ---- Optional call-to-action button (cta= / ctalabel=) ----
   Appears inline below the description in "side" style, or pinned to
   the bottom-right corner of the photo in "overlaytop" style. */
.feed-item-cta {
    display: inline-block;
    margin-top: 0.6em;
    padding: 0.4em 0.9em;
    background: #0645ad;
    color: #fff !important;
    border-radius: 4px;
    font-size: 0.85em;
    text-decoration: none;
}
.feed-item-cta:hover {
    background: #03318c;
}
.feed-item-overlaytop .feed-item-thumb .feed-item-cta {
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    margin-top: 0;
}

/* ---- Optional like/share icon row (actions=1) ----
   Visual placeholders only — wire up real click behavior later once
   the action (favoriting, sharing, etc.) is decided. */
.feed-item-actions {
    display: flex;
    gap: 0.5em;
    margin-top: 0.5em;
}
.feed-item-actions button {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 50%;
    width: 2em;
    height: 2em;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1;
}
.feed-item-overlaytop .feed-item-thumb .feed-item-actions {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    margin-top: 0;
}