/*
 * Džemati band (homepage and /dzemati-mapa/), the džemat archive and the single džemat page.
 * Band values from DESIGN.md ("Džemat band") / the approved izb-pravci/v2 build; moved unchanged from home.css.
 */

/* Band */
.dz-band { margin-top: var(--izb-space-band); background: var(--izb-green-deep); color: var(--izb-paper); padding: 56px 0; }
.dz-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.dz-head,
.dz-tools { min-width: 0; }
.dz-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.dz-head p { color: var(--izb-green-ink-2); margin: 10px 0 20px; max-width: 46ch; }
.dz-find { display: flex; gap: 10px; flex-wrap: wrap; }
.dz-find input { flex: 1 1 220px; min-width: 0; min-height: 48px; border-radius: var(--izb-radius-md); border: 1px solid rgba(255, 255, 255, .22); background: var(--izb-on-dark-wash); color: var(--izb-paper); padding: 0 16px; font: inherit; }
.dz-find input::placeholder { color: #C3D8CF; opacity: 1; }
.dz-list-wrap { margin-top: 20px; height: 330px; overflow: hidden; border-radius: 16px; background: rgba(0, 0, 0, .14); position: relative; -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); }
.dz-list { list-style: none; margin: 0; padding: 8px; animation: izb-drift 90s linear infinite; }
.dz-list-wrap:hover .dz-list,
.dz-list-wrap:focus-within .dz-list { animation-play-state: paused; }
.dz-list-wrap.searching { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
.dz-list-wrap.searching .dz-list { animation: none; }
.dz-list-wrap.searching .dz-item[data-dup] { display: none; }
.dz-item[hidden] { display: none; }
.dz-none { margin: 0; padding: 16px 22px; color: var(--izb-green-ink-2); }
@keyframes izb-drift { to { transform: translateY(-50%); } }

.dz-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: var(--izb-radius-md); transition: background .25s var(--izb-ease); }
.dz-item[data-on="1"],
.dz-item:hover { background: rgba(255, 255, 255, .1); }
.dz-item[data-sel] { background: rgba(200, 164, 90, .18); }
/* After a pick, only the picked row is lit; other rows answer hover with an underlined name. */
.dz-list-wrap.has-sel .dz-item:not([data-sel]):hover { background: none; }
.dz-list-wrap.has-sel .dz-item:not([data-sel]):hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.dz-item h3 { font-size: 17px; font-weight: 600; }
.dz-item .addr { grid-column: 1; font-size: 14.5px; color: var(--izb-green-ink-2); }
.dz-item .acts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 6px; position: relative; z-index: 1; }
.dz-item .acts a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--izb-radius-md); border: 1px solid rgba(255, 255, 255, .2); color: var(--izb-paper); }
.dz-item .acts a:hover { background: var(--izb-gold); color: var(--izb-green-deep); border-color: var(--izb-gold); }
.dz-pick { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.dz-pick::after { content: ""; position: absolute; inset: 0; border-radius: var(--izb-radius-md); }
.dz-pick:focus-visible { outline: 0; }
.dz-pick:focus-visible::after { outline: 3px solid var(--izb-gold); outline-offset: -3px; }

.dz-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.map { position: relative; }
.map svg { width: 100%; height: auto; display: block; max-height: 640px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-composite: intersect; }
.map .land-se { fill: #24594A; stroke: #3F7A68; stroke-width: 1; }
.map .land-other { fill: #1B4F42; stroke: #1B4F42; }
.map .pin { cursor: pointer; }
.map .pin circle.hit { fill: transparent; }
.map .pin circle.dot { fill: var(--izb-gold); stroke: var(--izb-green-deep); stroke-width: 2; transition: r .3s var(--izb-ease); }
.map .pin circle.halo { fill: var(--izb-gold); opacity: 0; transition: opacity .3s var(--izb-ease), r .3s var(--izb-ease); }
.map .pin text { font: 600 13px var(--izb-font-body); fill: var(--izb-paper); paint-order: stroke; stroke: var(--izb-green-deep); stroke-width: 4px; opacity: 0; transition: opacity .25s var(--izb-ease); pointer-events: none; }
.map .pin.on circle.dot { r: 7; }
.map .pin.on circle.halo { opacity: .28; r: 16; }
.map .pin.on text,
.map .pin.sel text { opacity: 1; }
.map .pin.sel circle.dot { r: 7; fill: var(--izb-paper); }
/* Only one label at a time: while another pin is hovered, the selected pin hides its label. */
.map svg.peek .pin.sel:not(.on) text { opacity: 0; }

.dz-card { background: rgba(0, 0, 0, .16); border-radius: 18px; padding: 20px 22px; min-height: 92px; }
.dz-hint { margin: 0; color: var(--izb-green-ink-2); }
.dz-card h3 { font-size: 22px; color: var(--izb-paper); }
.dz-facts { list-style: none; margin: 10px 0 14px; padding: 0; display: grid; gap: 6px; }
.dz-facts li { display: flex; gap: 10px; align-items: center; color: var(--izb-green-ink-1); min-width: 0; overflow-wrap: anywhere; }
.dz-facts .icon,
.dz-vak strong .icon { width: 18px; height: 18px; color: var(--izb-gold-on-dark); }
.dz-facts a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.dz-facts a:hover { color: var(--izb-paper); }
/* Band card phone numbers (built in dzemati.js): each tel: link is a 44px target. */
.dz-nums a { display: inline-flex; align-items: center; min-height: 44px; }
.dz-vak { border-top: 1px solid var(--izb-on-dark-line-2); padding-top: 14px; }
.dz-vak strong { display: flex; gap: 8px; align-items: center; color: var(--izb-paper); }
.dz-vak p { margin: 8px 0 0; color: var(--izb-green-ink-2); }
.dz-vak-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* Phones: DOM order (heading, map, card, search, list) is the visual and tab order. */
@media (max-width: 899px) {
	.dz-head p { margin-bottom: 16px; }
	.dz-tools { margin-top: 20px; }
	.map svg { max-height: 360px; margin-inline: auto; }
}
/* Desktop: search + list under the heading on the left, map + card on the right. The two
   1fr spacer rows centre the left block against the map and card, as in the approved build. */
@media (min-width: 900px) {
	.dz-grid {
		grid-template-columns: 1fr 1.05fr;
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas:
			".     side"
			"head  side"
			"tools side"
			".     side";
		column-gap: 48px;
	}
	.dz-head { grid-area: head; }
	.dz-side { grid-area: side; }
	.dz-tools { grid-area: tools; }
}

@media (prefers-reduced-motion: reduce) {
	.dz-list-wrap { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
	.dz-item[data-dup] { display: none; }
}

/* Link from the band card to the džemat's own page (džemat archive only) */
.dz-card .dz-page { margin-top: 10px; color: var(--izb-gold-on-dark); }
.dz-card .dz-page:hover { color: var(--izb-paper); }

/* Džemat archive (/dzemati-mapa/): page heading on sand, then the band full width */
.dz-archive .entry-head { margin-bottom: 0; }
.dz-archive .dz-band { margin-top: 32px; }
.dz-all h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 20px; }
.dz-links { list-style: none; margin: 0; padding: 8px 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); column-gap: 24px; background: var(--izb-paper); border-radius: var(--izb-radius-panel); box-shadow: var(--izb-shadow); }
.dz-links li { border-bottom: 1px solid var(--izb-line); }
.dz-links a { display: flex; align-items: center; min-height: 48px; font-weight: 600; overflow-wrap: anywhere; }
.dz-links a:hover { color: var(--izb-green); }

/* Single džemat: contact + vaktija card on paper */
.dz-info { background: var(--izb-paper); border-radius: var(--izb-radius-panel); box-shadow: var(--izb-shadow); padding: var(--izb-space-panel); margin-bottom: 28px; }
.dz-info-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.dz-info-facts li { display: flex; gap: 10px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; }
.dz-info-facts .icon { width: 18px; height: 18px; margin-top: 4px; color: var(--izb-green); }
.dz-info-facts a { color: var(--izb-green); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(31, 94, 75, .35); }
.dz-info-facts a:hover { text-decoration-color: currentColor; }
.dz-phones { display: flex; flex-wrap: wrap; gap: 0 18px; }
.dz-phones a { display: inline-flex; align-items: center; min-height: 44px; }
/* The phone row is a 44px target: centre its icon on the number instead of pinning it to the top. */
.dz-info-facts li:has(.dz-phones) { align-items: center; }
.dz-info-facts li:has(.dz-phones) .icon { margin-top: 0; }
.dz-info-facts li:has(.dz-phones) + li,
.dz-info-facts li + li:has(.dz-phones) { margin-top: -6px; }
.dz-info-vak { border-top: 1px solid var(--izb-line); padding-top: 16px; }
.dz-info > .sr:first-child + .dz-info-vak { border-top: 0; padding-top: 0; }
.dz-info-h { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.dz-info-h .icon { width: 20px; height: 20px; color: var(--izb-green); }
.dz-info .btns { margin-top: 14px; }
.dz-info-none { margin: 8px 0 0; color: var(--izb-ink-2); }
@media (max-width: 560px) {
	.dz-info { padding: 20px; }
	.dz-info .btns .btn { flex: 1 1 100%; justify-content: center; }
}
.dzemat-entry .dz-info { margin-bottom: 0; }
.dzemat-entry .entry-photo,
.dzemat-entry .izb-prose { margin-top: 28px; }
.dz-back { margin-top: 32px; }
/* One axis: "Vijesti iz džemata", its cards and "Svi džemati" sit on the 760px column of the title and card. */
.dz-news .news-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .dz-news .news-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }