/*
 * Naslovna (front-page.php). Values from DESIGN.md / the approved izb-pravci/v2 build.
 */

/* Shared photo treatment */
.lead img,
.thumb img,
.about .ph img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	filter: var(--izb-grade);
}

/* 1. Glavna vijest + bočna lista */
.lead-news { padding: 24px 0 8px; display: grid; gap: 16px; }
.lead { position: relative; border-radius: var(--izb-radius-panel); overflow: hidden; background: var(--izb-green-deep); color: var(--izb-paper); min-height: 420px; display: flex; isolation: isolate; box-shadow: var(--izb-shadow); }
.lead img { position: absolute; inset: 0; z-index: -2; transition: transform 1.2s var(--izb-ease); }
.lead::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 70, 58, 0) 30%, rgba(21, 70, 58, .72) 62%, rgba(16, 52, 43, .95)); }
.lead:hover img { transform: scale(1.03); }
.lead .txt { margin-top: auto; padding: 24px; max-width: 760px; min-width: 0; }
.lead h2 { font-size: clamp(27px, 4.2vw, 46px); font-weight: 700; letter-spacing: -.02em; }
.lead h2 a:hover { color: var(--izb-paper); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lead p { margin: 12px 0 0; color: var(--izb-green-ink-1); display: none; max-width: 62ch; }
.lead .meta { color: #D5E4DD; margin-top: 12px; }
.lead .meta b { color: var(--izb-gold-on-dark); }
.lead a:focus-visible { outline-color: var(--izb-gold); }

.side-news { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; background: var(--izb-paper); border-radius: var(--izb-radius-panel); padding: 6px 18px; box-shadow: var(--izb-shadow); }
.side-news article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--izb-line); }
.side-news article:last-child { border-bottom: 0; }
.side-news article.has-thumb { grid-template-columns: minmax(0, 1fr) 96px; }
.side-news h3 { font-size: 17.5px; font-weight: 600; letter-spacing: -.01em; text-wrap: pretty; }
.side-news .meta { margin-top: 4px; font-size: 13.5px; }
.thumb { aspect-ratio: 1; border-radius: var(--izb-radius-md); overflow: hidden; background: var(--izb-line); }

@media (min-width: 900px) {
	.lead-news { grid-template-columns: 1.55fr 1fr; gap: 20px; padding-top: 32px; }
	.lead { min-height: 560px; }
	.lead .txt { padding: 36px; }
	.lead p { display: block; }
}

/* 2. Džemati: the band lives in dzemati.css (shared with the džemat archive). */

/* 3. Događaji + hutbe */
.duo { display: grid; gap: 20px; }
.panel { background: var(--izb-paper); border-radius: var(--izb-radius-panel); padding: var(--izb-space-panel); box-shadow: var(--izb-shadow); display: flex; flex-direction: column; min-width: 0; }
.panel h2 { font-size: 26px; margin-bottom: 14px; }
.panel > .more { margin-top: auto; padding-top: 12px; align-self: flex-start; }
.events { list-style: none; margin: 0; padding: 0; }
.event { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--izb-line); }
.event:first-child { border-top: 0; }
.event h3 { font-size: 18px; }
.event h3 a:hover { color: var(--izb-green); }
.hutbe .event h3 { font-size: 17.5px; line-height: 1.3; text-wrap: pretty; }
.deadline { color: var(--izb-gold-ink); font-weight: 600; }
.event-empty { padding: 12px 0; color: var(--izb-ink-2); }
@media (min-width: 900px) {
	.duo { grid-template-columns: 1fr 1fr; }
	.duo.duo-single { grid-template-columns: 1fr; }
}

/* 4. Naše vijesti: .news-grid and .card live in components.css (shared with archives). */

/* 5. Ko smo mi */
.about { margin: var(--izb-space-band) auto 0; background: var(--izb-green); color: var(--izb-paper); border-radius: var(--izb-radius-block); overflow: hidden; display: grid; box-shadow: var(--izb-shadow); }
.about .ph { aspect-ratio: 16 / 10; background: var(--izb-green-deep); }
.about .ph img { object-position: 50% 40%; }
.about .txt { padding: 32px; min-width: 0; }
.about h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; margin-bottom: 14px; }
.about p { color: var(--izb-green-ink-1); margin: 0 0 12px; max-width: 58ch; }
.about p[lang="sv"] { color: var(--izb-green-ink-2); }
.about .about-sv { margin: 14px 0 0; font-size: 15px; }
.about-sv a { display: inline-flex; align-items: center; min-height: 44px; color: var(--izb-gold-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.about-sv a:hover { color: var(--izb-paper); }
@media (min-width: 900px) {
	.about { grid-template-columns: 1fr 1fr; }
	.about.no-photo { grid-template-columns: 1fr; }
	.about .ph { aspect-ratio: auto; }
	.about .txt { padding: 48px; align-self: center; }
}