/*
 * IZB Nordic: single post, page, archive, search and 404 layouts, and content typography (.izb-prose).
 * Values from DESIGN.md. Prose rules use :where() so existing content CSS (e.g. .izbus-modern-post in the
 * parent's Custom CSS) keeps priority over the defaults.
 */

/* Frame */
.wrap.narrow { width: min(760px, 100% - 2 * var(--izb-space-gutter)); }
.entry,
.listing { padding-top: 36px; }
.entry-head { margin-bottom: 24px; }
.page-title { font-size: clamp(32px, 4.4vw, 50px); font-weight: 700; letter-spacing: -.02em; }
.entry-head .meta { margin-top: 12px; }
.lede { margin: 10px 0 0; color: var(--izb-ink-2); max-width: 60ch; }
.lede p { margin: 0; }
.entry-head .search-form { margin-top: 20px; }
.result-count { margin: 14px 0 0; }
.empty { margin: 8px 0 0; padding: 20px 24px; background: var(--izb-paper); border-radius: var(--izb-radius-panel); box-shadow: var(--izb-shadow); color: var(--izb-ink-2); max-width: 70ch; }

/* Single post */
.single .entry .page-title { font-size: clamp(30px, 4vw, 44px); }
.entry-photo { margin: 0 0 28px; }
.entry-photo img {
	width: 100%;
	max-height: 560px;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: var(--izb-radius-photo);
	background: var(--izb-line);
	filter: var(--izb-grade);
}
.entry-photo figcaption { margin-top: 8px; font-size: 14.5px; color: var(--izb-ink-2); }

/* Article (single post): one 680px reading axis shared by headline, text, inline photos and the foot;
   only the lead photo breaks out to 1040px. Text, photos and captions start and end on the same edges. */
.article { width: min(1040px, 100% - 2 * var(--izb-space-gutter)); }
.article > .entry-head,
.article > .izb-prose,
.article > .entry-foot { max-width: 680px; margin-inline: auto; }
.article > .entry-head { margin-bottom: 28px; }
.entry-lede { margin: 14px 0 0; font-size: 20px; line-height: 1.5; color: var(--izb-ink-2); text-wrap: pretty; }
.entry-lede + .meta { margin-top: 16px; }
.article .entry-photo { margin: 0 0 36px; }
.article .entry-photo img { aspect-ratio: 16 / 9; max-height: none; border-radius: var(--izb-radius-panel); }
.article .entry-photo figcaption { max-width: 680px; margin-inline: auto; }
@media (max-width: 639px) {
	/* Phones: the lead photo runs edge to edge, like a news app. */
	.article .entry-photo { margin-inline: calc(-1 * var(--izb-space-gutter)); }
	.article .entry-photo img { aspect-ratio: 4 / 3; border-radius: 0; }
	.article .entry-photo figcaption { padding-inline: var(--izb-space-gutter); }
	.entry-lede { font-size: 18.5px; }
}
.entry-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--izb-line); display: grid; gap: 24px; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.share-label { font-weight: 600; margin-right: 4px; }
.share .btn { min-height: 44px; padding: 0 16px; font-size: 15px; background: var(--izb-paper); }
.share-status { flex-basis: 100%; font-size: 14.5px; color: var(--izb-green); }
/* Empty: visually hidden but kept in the accessibility tree, so the live region announces the result. */
.share-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.post-nav { display: grid; gap: 12px; }
.post-nav a {
	display: grid;
	gap: 4px;
	align-content: start;
	padding: 16px 20px;
	background: var(--izb-paper);
	border-radius: var(--izb-radius-panel);
	box-shadow: var(--izb-shadow);
	min-width: 0;
}
.post-nav .dir { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--izb-green); }
.post-nav .dir .icon { width: 18px; height: 18px; transition: transform .3s var(--izb-ease); }
.post-nav .t { font: 600 17.5px/1.3 var(--izb-font-head); letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.post-nav a:hover .t { color: var(--izb-green); }
.post-nav .prev:hover .icon { transform: scaleX(-1) translateX(3px); }
.post-nav .next:hover .icon { transform: translateX(3px); }
.post-nav .next { text-align: right; justify-items: end; }
@media (min-width: 640px) {
	.post-nav { grid-template-columns: 1fr 1fr; }
	.post-nav .next:only-child { grid-column: 2; }
}
.icon.flip { transform: scaleX(-1); }

/* Back link at the foot of an event or džemat page ("Kalendar aktivnosti", "Svi džemati") */
.back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--izb-green); }
.back-link .icon { width: 18px; height: 18px; transition: transform .3s var(--izb-ease); }
.back-link:hover .icon { transform: scaleX(-1) translateX(3px); }
.entry-foot .back-link { justify-self: start; }

/* Post views counter (plugin) printed at the top of the content: one quiet meta line */
.izb-prose .post-views { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 14.5px; color: var(--izb-ink-2); }
.izb-prose .post-views .dashicons { font-size: 18px; width: 18px; height: 18px; }

/* Archive and search: wide first story, then the news grid */
.card-row {
	display: grid;
	background: var(--izb-paper);
	border-radius: var(--izb-radius-panel);
	overflow: hidden;
	box-shadow: var(--izb-shadow);
	margin-bottom: 28px;
	min-width: 0;
}
.card-row .ph { aspect-ratio: 3 / 2; background: var(--izb-line); overflow: hidden; }
.card-row .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: var(--izb-grade); transition: transform .8s var(--izb-ease); }
.card-row:hover .ph img { transform: scale(1.03); }
.card-row .txt { padding: 22px 20px 24px; min-width: 0; align-self: center; }
.card-row h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.02em; }
.card-row .meta { margin-top: 10px; }
.card-row .excerpt { margin: 12px 0 0; color: var(--izb-ink-2); max-width: 62ch; }
/* A hutba (no photo) keeps the soft date tile next to its heading. */
.card-row.has-tile { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; padding: 24px 20px; }
.card-row.has-tile .txt { padding: 0; align-self: start; }
@media (min-width: 800px) {
	.card-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
	.card-row.no-ph { grid-template-columns: minmax(0, 1fr); }
	.card-row .ph { aspect-ratio: auto; min-height: 340px; }
	.card-row .txt { padding: 36px; }
	.card-row.has-tile { grid-template-columns: 64px minmax(0, 1fr); padding: 36px; gap: 24px; }
	.card-row.has-tile .txt { padding: 0; }
}

.card h2 { font-size: 19px; letter-spacing: -.01em; }
.card h2 + .meta { margin-top: 6px; }
.card .excerpt { margin: 10px 0 0; font-size: 15.5px; color: var(--izb-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card.has-tile { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 639px) {
	.card h2 { font-size: 17px; }
	.card .excerpt { display: none; }
	.card.has-tile { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
}
@media (min-width: 640px) {
	/* A story without a photo is bare like the photo cards (no paper box that leaves a hole under it):
	   its heading starts on the row's top edge, marked by a hairline where the photo edge would be. */
	.card.no-ph { align-self: start; border-top: 1px solid var(--izb-line); padding-top: 16px; }
}

/* Search: one paper list (title, meta, square thumb or date tile) at every width, on the 760px
   axis of the search form, as on phones. */
.news-grid.is-list { max-width: 760px; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--izb-paper); border-radius: var(--izb-radius-panel); padding: 4px 20px; box-shadow: var(--izb-shadow); }
.news-grid.is-list .card { grid-template-columns: minmax(0, 1fr) 96px; gap: 16px; align-items: center; align-self: auto; padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--izb-line); }
.news-grid.is-list .card:last-child { border-bottom: 0; }
.news-grid.is-list .card .ph { order: 2; aspect-ratio: 1; border-radius: var(--izb-radius-md); }
.news-grid.is-list .card.no-ph { grid-template-columns: minmax(0, 1fr); }
.news-grid.is-list .card.has-tile { grid-template-columns: 64px minmax(0, 1fr); }
.news-grid.is-list .card h2 { font-size: 17.5px; font-weight: 600; text-wrap: pretty; }
.news-grid.is-list .card .meta { margin-top: 4px; font-size: 13.5px; }
.news-grid.is-list .card .excerpt { display: none; }
@media (max-width: 639px) { .news-grid.is-list { padding: 4px 16px; } }

/* Numbered pagination */
.pager { margin-top: 36px; }
.pager ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pager a,
.pager span.page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--izb-radius-md);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pager a { background: var(--izb-paper); border: 1px solid var(--izb-line); }
.pager a:hover { border-color: var(--izb-green); color: var(--izb-green); }
.pager .current { background: var(--izb-green); color: var(--izb-paper); }
.pager .dots { color: var(--izb-ink-2); }
.pager .icon { width: 18px; height: 18px; }

/* 404 */
.links-404 { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* Related ("Još iz rubrike") */
.related { padding-top: var(--izb-space-section); }

/* ---------- Content typography ---------- */
/* The narrow column caps everything at a ~68ch measure, so legacy bodies (text in bare divs or
   separated by <br>, WPBakery text columns) read at the same line length as <p> content. */
.izb-prose { overflow-wrap: break-word; }
.izb-prose:not(.is-wide) { max-width: 68ch; }
.izb-prose::after { content: ""; display: table; clear: both; }
.izb-prose > :first-child { margin-top: 0; }
.izb-prose :where(p, ul, ol, dl, blockquote, figure, table, pre, hr, .gallery, .wp-caption, iframe, .pdfemb-viewer) { margin: 0 0 1.1em; }
.izb-prose :where(h1, h2) { font-size: clamp(24px, 2.6vw, 28px); margin: 1.6em 0 .5em; }
.izb-prose :where(h3) { font-size: 21px; margin: 1.4em 0 .4em; }
.izb-prose :where(h4, h5, h6) { font: 600 18px/1.3 var(--izb-font-head); letter-spacing: -.01em; margin: 1.3em 0 .4em; }
.izb-prose :where(a) { color: var(--izb-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.izb-prose :where(a:hover) { text-decoration-thickness: 2px; }
.izb-prose :where(ul, ol) { padding-left: 1.4em; }
.izb-prose :where(li) { margin: .3em 0; }
.izb-prose :where(li > p) { margin: 0; }
.izb-prose :where(li::marker) { color: var(--izb-green); }
.izb-prose :where(strong, b) { font-weight: 700; }
.izb-prose :where(blockquote) { padding: 16px 20px; background: var(--izb-green-tint); border-radius: var(--izb-radius-md); font-size: 18px; }
.izb-prose :where(blockquote > :last-child) { margin-bottom: 0; }
.izb-prose :where(hr) { border: 0; border-top: 1px solid var(--izb-line); }
.izb-prose :where(img) { height: auto; border-radius: var(--izb-radius-md); }
.izb-prose :where(p > img, p > a > img) { margin-bottom: 12px; }
.izb-prose :where(iframe, video, embed, object) { max-width: 100%; }
.izb-prose :where(table) { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.izb-prose :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--izb-line); text-align: left; vertical-align: top; }
.izb-prose :where(th) { font-weight: 600; }
.izb-prose :where(pre) { overflow-x: auto; padding: 16px; background: var(--izb-paper); border-radius: var(--izb-radius-md); font-size: 15px; }
.izb-prose :where([lang="ar"]) { font-size: 1.25em; line-height: 1.9; }

/* Alignment (classic editor) */
.izb-prose :where(.aligncenter) { display: block; margin-inline: auto; }
.izb-prose :where(.alignleft, .alignright) { margin-bottom: 1em; }
@media (min-width: 640px) {
	.izb-prose :where(.alignleft) { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
	.izb-prose :where(.alignright) { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
}

/* Captions and figures */
.izb-prose :where(.wp-caption) { max-width: 100%; }
.izb-prose :where(figcaption, .wp-caption-text, .wp-element-caption) { margin-top: 8px; font-size: 14.5px; color: var(--izb-ink-2); }

/* Galleries (core [gallery] and the block) */
.izb-prose :where(.gallery) { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
	.izb-prose :where(.gallery-columns-3, .gallery-columns-4, .gallery-columns-5, .gallery-columns-6, .gallery-columns-7, .gallery-columns-8, .gallery-columns-9) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.izb-prose :where(.gallery-columns-1) { grid-template-columns: minmax(0, 1fr); }
.izb-prose :where(.gallery-item) { margin: 0; min-width: 0; }
.izb-prose :where(.gallery-icon a) { display: block; }
.izb-prose :where(.gallery img, .wp-block-gallery img) {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: var(--izb-radius-md);
	filter: var(--izb-grade);
}
.izb-prose :where(.gallery-caption) { margin-top: 6px; font-size: 14.5px; color: var(--izb-ink-2); }

/* Article body: 18px on the 680px axis (~70ch). Inline photos fill the axis, so a 1024px "large"
   image and the text share both edges; a quote reads as a quiet pull-quote. */
.article .izb-prose { max-width: 680px; font-size: 18px; }
.article .izb-prose :where(.wp-caption:not(.alignleft, .alignright):has(img.size-large)) { width: 100% !important; }
.article .izb-prose :where(img.size-large:not(.alignleft, .alignright)) { width: 100%; }
.article .izb-prose :where(.wp-caption, .wp-block-image) { margin: 32px 0; }
.article .izb-prose :where(.wp-caption img, .wp-block-image img) { border-radius: var(--izb-radius-photo); filter: var(--izb-grade); }
.article .izb-prose :where(.wp-caption-text, .wp-element-caption) { margin-top: 10px; }
.article .izb-prose :where(blockquote) { margin: 32px 0; padding: 22px 26px; font: 600 21px/1.4 var(--izb-font-head); letter-spacing: -.01em; text-wrap: pretty; }

/* Blocks */
.izb-prose :where(.wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-table, .wp-block-quote, .wp-block-buttons, .wp-block-file) { margin: 0 0 1.1em; }
.izb-prose :where(.wp-block-embed__wrapper iframe) { width: 100%; }
.izb-prose :where(.wp-block-button__link) { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--izb-radius-md); background: var(--izb-green); color: var(--izb-paper); font-weight: 600; text-decoration: none; }
.izb-prose :where(.wp-block-button__link:hover) { background: var(--izb-green-deep); color: var(--izb-paper); }
.izb-prose :where(.wp-block-separator) { border: 0; border-top: 1px solid var(--izb-line); }

/* Embeds: video frames and PDF Embedder at full width */
.izb-prose :where(.video_wrap) { position: relative; aspect-ratio: 16 / 9; margin: 0 0 1.1em; }
.izb-prose :where(.video_wrap iframe) { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: var(--izb-radius-md); }
.izb-prose .pdfemb-viewer,
.izb-prose .pdfemb-viewer iframe,
.izb-prose iframe.pdfemb-viewer { width: 100% !important; max-width: 100%; }
.izb-prose .pdfemb-viewer { display: block; border-radius: var(--izb-radius-md); overflow: hidden; }