/* Dazzle Monk · the Instagram block (Instagram app): seven layouts, four sizes, the hover details and the post popup.
   Theme colours and fonts (--dm-*); flat colours, no gradients; motion only on hover and when opening. */
.dmig { --cols: 4; --gap: 12px; --r: 12px; --ar: 1; padding-block: clamp(32px, 5vw, 64px); }
.dmig.size-compact { --cols: 6; --gap: 4px; --r: 6px; }
.dmig.size-large { --cols: 3; --gap: 20px; --r: 18px; }
.dmig.size-edge { --cols: 6; --gap: 0px; --r: 0px; }
.dmig.is-portrait { --ar: 0.8; } /* also F · portrait grid: the classic grid with 4:5 tiles, as on a profile */

/* heading row */
.dmig-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 22px; }
.dmig-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dmig-who > div { min-width: 0; }
.dmig-ava { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--dm-text); color: var(--dm-bg); box-shadow: 0 0 0 2px var(--dm-bg), 0 0 0 4px var(--dm-primary); font: 800 0.85rem var(--dm-font-head); text-decoration: none; }
.dmig-ava img { width: 100%; height: 100%; object-fit: cover; }
.dmig-ava.is-big { width: 76px; height: 76px; font-size: 1.1rem; }
.dmig-title { margin: 0; font: 800 clamp(1.25rem, 2.4vw, 1.75rem)/1.15 var(--dm-font-head); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.dmig-sub { margin: 2px 0 0; color: var(--dm-muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.dmig-follow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: var(--dm-r-btn, 10px); background: var(--dm-text); color: var(--dm-bg); font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.dmig-follow:hover { background: var(--dm-primary); color: #fff; }
.dmig-follow:focus-visible, .dmig-tile:focus-visible, .dmig-arr:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }

/* tiles */
.dmig-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.dmig-grid > li { min-width: 0; }
.dmig-tile { position: relative; display: block; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--r); background: var(--dm-soft); color: #fff; }
.dmig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.dmig-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.dmig-tile.is-playing .dmig-vid { opacity: 1; }
.dmig-badge { z-index: 1;  position: absolute; top: 8px; inset-inline-end: 8px; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45)); }
.dmig-over { position: absolute; inset: 0; z-index: 1; display: grid; align-content: end; gap: 6px; padding: 12px; background: rgb(0 0 0 / 0.62); opacity: 0; transition: opacity 0.25s; }
.dmig-stats { display: flex; gap: 12px; font-weight: 700; font-size: 0.8rem; }
.dmig-stats > span { display: inline-flex; align-items: center; gap: 4px; }
.dmig-cap { display: -webkit-box; overflow: hidden; font-size: 0.78rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.dmig.size-compact .dmig-cap { -webkit-line-clamp: 2; font-size: 0.72rem; }
@media (hover: hover) {
    .dmig-tile:hover .dmig-over, .dmig-tile:focus-visible .dmig-over { opacity: 1; }
    .dmig-tile:hover img { transform: scale(1.04); }
}

/* B · mosaic: the first post (newest or pinned) big, and one more later on */
.dmig.is-mosaic .dmig-grid { grid-auto-flow: dense; }
.dmig.is-mosaic .dmig-grid > li:nth-child(1), .dmig.is-mosaic .dmig-grid > li:nth-child(8) { grid-column: span 2; grid-row: span 2; }

/* C · swipe strip: one row that scrolls sideways, arrows on desktop */
.dmig-strip { position: relative; }
.dmig.is-strip .dmig-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.dmig.is-strip .dmig-grid::-webkit-scrollbar { display: none; }
.dmig.is-strip .dmig-grid > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) * 1.15); scroll-snap-align: start; }
.dmig-arr { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--dm-bg); color: var(--dm-text); box-shadow: inset 0 0 0 1.5px var(--dm-text); cursor: pointer; transform: translateY(-50%); transition: background-color 0.2s, color 0.2s, opacity 0.2s; }
.dmig-arr:hover { background: var(--dm-text); color: var(--dm-bg); }
.dmig-arr.is-prev { inset-inline-start: -14px; }
.dmig-arr.is-next { inset-inline-end: -14px; }
.dmig-arr[disabled] { opacity: 0; pointer-events: none; }
.dmig.size-edge .dmig-arr.is-prev { inset-inline-start: 12px; }
.dmig.size-edge .dmig-arr.is-next { inset-inline-end: 12px; }
[dir="rtl"] .dmig-arr svg { transform: scaleX(-1); }

/* G · slider: one row of posts that moves by itself, with arrows and dots */
.dmig.is-slider .dmig-grid { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.dmig.is-slider .dmig-grid::-webkit-scrollbar { display: none; }
.dmig.is-slider .dmig-grid > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); scroll-snap-align: start; }
.dmig.is-slider.size-compact, .dmig.is-slider.size-edge { --cols: 5; }
.dmig-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.dmig-dots[hidden] { display: none; }
.dmig-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--dm-text); opacity: 0.25; cursor: pointer; transition: width 0.3s, opacity 0.3s, background-color 0.3s; }
.dmig-dots button[aria-current="true"] { width: 26px; background: var(--dm-primary); opacity: 1; }
.dmig-dots button:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 3px; }
.dmig.size-edge .dmig-dots { padding-inline: 16px; }
.dmig-strip:has(.dmig-dots:not([hidden])) .dmig-arr { top: calc(50% - 13px); }

/* D · masonry: tall and wide photos keep their shape */
.dmig.is-masonry .dmig-grid { display: block; columns: var(--cols); column-gap: var(--gap); }
.dmig.is-masonry .dmig-grid > li { margin-bottom: var(--gap); break-inside: avoid; }
.dmig.is-masonry .dmig-tile { aspect-ratio: auto; }
.dmig.is-masonry .dmig-tile img { height: auto; }

/* E · profile + grid */
.dmig.is-profile .dmig-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.dmig.is-profile { --cols: 3; }
.dmig.is-profile.size-compact, .dmig.is-profile.size-edge { --cols: 4; }
.dmig.is-profile.size-large { --cols: 2; }
.dmig-card { position: sticky; top: 6rem; display: grid; gap: 14px; padding: 22px; border-radius: var(--dm-r, 16px); background: var(--dm-soft); }
.dmig-bio { margin: 0; color: var(--dm-muted); font-size: 0.88rem; line-height: 1.55; }
.dmig-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; text-align: center; }
.dmig-counts dt { order: 2; color: var(--dm-muted); font-size: 0.72rem; }
.dmig-counts div { display: flex; flex-direction: column; }
.dmig-counts dd { margin: 0; font: 800 1.05rem var(--dm-font-head); }

/* popup */
.dmig-pop { width: min(980px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--dm-r, 16px); background: var(--dm-bg); color: var(--dm-text); overflow: visible; }
.dmig-pop::backdrop { background: rgb(0 0 0 / 0.72); }
.dmig-pop[open] { animation: dmig-in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dmig-in { from { opacity: 0; transform: scale(0.96); } }
.dmig-pop-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-height: calc(100dvh - 32px); overflow: hidden; border-radius: inherit; }
.dmig-pop-pic { display: grid; place-items: center; min-height: 0; background: #000; }
.dmig-pop-pic img, .dmig-pop-pic video { width: 100%; height: 100%; max-height: calc(100dvh - 32px); object-fit: contain; }
.dmig-pop-pic [hidden] { display: none; }
.dmig-pop-side { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 26px 24px; overflow-y: auto; }
.dmig-pop-who { display: flex; align-items: center; gap: 8px; margin: 0; }
.dmig-pop-cap { margin: 0; white-space: pre-line; font-size: 0.9rem; line-height: 1.6; overflow-wrap: anywhere; }
.dmig-pop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; color: var(--dm-muted); font-size: 0.82rem; }
.dmig-pop-meta > span { display: inline-flex; align-items: center; gap: 4px; color: var(--dm-text); font-weight: 600; }
.dmig-pop-meta > span[hidden] { display: none; }
.dmig-pop-meta svg { color: var(--dm-primary); }
.dmig-pop-side .dmig-follow { justify-self: start; }
.dmig-pop-x, .dmig-pop-nav { position: absolute; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--dm-bg); color: var(--dm-text); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.dmig-pop-x:hover, .dmig-pop-nav:hover { background: var(--dm-primary); color: #fff; }
.dmig-pop-x { top: 10px; inset-inline-end: 10px; }
.dmig-pop-nav { top: 50%; transform: translateY(-50%); }
.dmig-pop-nav { box-shadow: 0 0 0 1.5px var(--dm-text); }
.dmig-pop-nav.is-prev { inset-inline-start: 12px; }
.dmig-pop-nav.is-next { inset-inline-end: 12px; }
.dmig-pop-nav[hidden] { display: none; }
[dir="rtl"] .dmig-pop-nav svg { transform: scaleX(-1); }

@media (max-width: 1024px) {
    .dmig.size-compact, .dmig.size-edge { --cols: 4; }
    .dmig.is-profile .dmig-body { grid-template-columns: 1fr; }
    .dmig-card { position: static; }
}
@media (max-width: 760px) {
    .dmig { --cols: 3; }
    .dmig.size-large { --cols: 2; }
    .dmig.size-compact, .dmig.size-edge, .dmig.is-profile, .dmig.is-profile.size-compact, .dmig.is-profile.size-edge { --cols: 3; }
    .dmig.is-profile.size-large { --cols: 2; }
    .dmig.is-mosaic .dmig-grid > li:nth-child(8) { grid-column: auto; grid-row: auto; }
    .dmig.is-strip .dmig-grid > li { flex-basis: 42%; }
    .dmig.is-slider .dmig-grid > li, .dmig.is-slider.size-compact .dmig-grid > li { flex-basis: calc((100% - var(--gap)) / 2); }
    .dmig.is-slider.size-large .dmig-grid > li { flex-basis: 82%; }
    .dmig-arr { display: none; }
    .dmig-follow { padding: 10px 14px; }
    .dmig-pop-in { grid-template-columns: 1fr; overflow-y: auto; }
    .dmig-pop-pic img, .dmig-pop-pic video { max-height: 60dvh; }
    .dmig-pop-nav.is-prev { inset-inline-start: 8px; }
    .dmig-pop-nav.is-next { inset-inline-end: 8px; }
    .dmig-pop-nav { top: 30dvh; }
}
@media (prefers-reduced-motion: reduce) {
    .dmig-tile img, .dmig-over, .dmig-follow, .dmig-arr, .dmig-vid, .dmig-dots button { transition: none; }
    .dmig-pop[open] { animation: none; }
    .dmig.is-strip .dmig-grid, .dmig.is-slider .dmig-grid { scroll-behavior: auto; }
}