/* ============================================================
   Magazine front page  (4plus1.ba)
   ============================================================ */

.fp-home { max-width: 1200px; }

/* ---------- shared card ---------- */
.fp-card { display: flex; flex-direction: column; background: #fff; }
.fp-card__media { display: block; overflow: hidden; }
.fp-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.fp-card__media:hover img { transform: scale(1.04); }
.fp-card__body { padding: .7rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.fp-card__cat {
	align-self: flex-start;
	color: #fff; background: var(--theme-palette-color-1, #b22222);
	font: 700 10.5px/1.7 "Roboto Condensed", Arial, sans-serif;
	text-transform: uppercase; letter-spacing: .3px;
	padding: 1px 7px; border-radius: 2px;
}
.fp-card__cat:hover { background: var(--theme-palette-color-2, #8f1b1b); color:#fff; }
.fp-card__title {
	margin: 0; line-height: 1.2;
	font-family: "Roboto Condensed", "Titillium Web", Arial, sans-serif; font-weight: 700;
}
.fp-card__title a { color: #16181d; }
.fp-card__title a:hover { color: var(--theme-palette-color-1, #b22222); }
.fp-card__excerpt { margin: 0; color: #55606d; font-size: .9rem; line-height: 1.5; }
.fp-card__date { color: #8a94a1; font-size: .78rem; }

/* ---------- hero ---------- */
.fp-hero {
	display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem;
	margin-bottom: 2.5rem;
	padding-bottom: 2rem; border-bottom: 3px solid var(--theme-palette-color-1, #b22222);
}
.fp-hero__lead .fp-card__media { aspect-ratio: 16 / 9; border-radius: 4px; }
.fp-hero__lead .fp-card__title { font-size: 1.9rem; }
.fp-hero__subs { display: flex; flex-direction: column; gap: 1rem; }
.fp-hero__subs .fp-card { flex-direction: row; gap: .8rem; align-items: flex-start; }
.fp-hero__subs .fp-card__media { flex: 0 0 116px; aspect-ratio: 4 / 3; border-radius: 3px; }
.fp-hero__subs .fp-card__body { padding: 0; }
.fp-hero__subs .fp-card__title { font-size: 1rem; }

/* ---------- body layout ---------- */
.fp-body { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 2.5rem; }

/* ---------- section ---------- */
.fp-section { margin-bottom: 2.25rem; }
.fp-section__head {
	display: flex; align-items: baseline; justify-content: space-between;
	border-bottom: 2px solid var(--theme-palette-color-1, #b22222);
	margin-bottom: 1.1rem; padding-bottom: .35rem;
}
.fp-section__title {
	margin: 0; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .4px;
	font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700; color: #16181d;
}
.fp-section__more { font: 600 .8rem/1 "Titillium Web", Arial, sans-serif; text-transform: uppercase; color: var(--theme-palette-color-1, #b22222); }

.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem 1.3rem; }
.fp-grid .fp-card__media { aspect-ratio: 16 / 10; border-radius: 3px; }
.fp-grid .fp-card__title { font-size: 1.02rem; }

/* ---------- sidebar ---------- */
.fp-side { display: flex; flex-direction: column; gap: 1.6rem; align-self: start; position: sticky; top: 1.5rem; }

.fp-recent { list-style: none; margin: 0; padding: 0; }
.fp-recent li { padding: .55rem 0; border-bottom: 1px solid #eceff2; }
.fp-recent li:last-child { border-bottom: 0; }
.fp-recent a { display: block; font: 600 .9rem/1.35 "Titillium Web", Arial, sans-serif; color: #23262d; }
.fp-recent a:hover { color: var(--theme-palette-color-1, #b22222); }
.fp-recent__date { color: #97a0ac; font-size: .74rem; }
.fp-widget__title {
	margin: 0 0 .8rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .4px;
	font-family: "Roboto Condensed", Arial, sans-serif; font-weight: 700;
	border-bottom: 2px solid var(--theme-palette-color-1, #b22222); padding-bottom: .3rem;
}
.fp-widget--table table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.fp-widget--table th { background: #16181d; color: #fff; font: 700 .72rem/1 "Roboto Condensed", Arial, sans-serif; text-transform: uppercase; padding: .45rem .3rem; }
.fp-widget--table td { padding: .4rem .3rem; border-bottom: 1px solid #eceff2; }
.fp-widget--table tr:nth-child(even) td { background: #fafbfc; }

.fp-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.fp-social a {
	display: inline-block; padding: .4rem .8rem; border: 1px solid #dfe3e8; border-radius: 3px;
	font: 600 .82rem/1 "Titillium Web", Arial, sans-serif; color: #333;
}
.fp-social a:hover { background: var(--theme-palette-color-1, #b22222); border-color: var(--theme-palette-color-1, #b22222); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 999px) {
	.fp-body { grid-template-columns: 1fr; }
	.fp-hero { grid-template-columns: 1fr; }
	.fp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.fp-grid { grid-template-columns: 1fr; }
	.fp-hero__lead .fp-card__title { font-size: 1.45rem; }
	.fp-hero__subs .fp-card { flex-direction: column; }
	.fp-hero__subs .fp-card__media { flex-basis: auto; width: 100%; aspect-ratio: 16/9; }
}