/* Theme glue for blocks: rules that exist only because the mockup's one section is several sibling blocks in WordPress.
   Loaded after pages.css and before states/responsive. Keep specificity high enough to beat the sibling-margin rules there. */

/* Media Library images carry the file's natural width/height attributes. In the mockup the files were cut to size, so the
   attribute height (which beats aspect-ratio in the browser) was the image height: 490x522, 440 and 320 px. Keep that. */
.dn-service-top__image { height: 522px; }
.dn-card__image--square { height: 440px; }
.dn-card__image--wide { height: 320px; }

/* About page: the intro and the three-column values share one section in the mockup (cols sit 40px under the button). */
main.dn-page > .dn-container.dn-block--intro + .dn-container.dn-block--cols { margin-top: 0; }

/* About page: the mockup puts the services section in a .dn-block (block margin above, no section padding below);
   as a block of its own it would sit right under the cards. Same totals, same responsive steps (120 / 80 / 56). */
main.dn-page > .dn-section.dn-services { margin-top: 120px; padding-bottom: 0; }
@media (max-width: 1023px) { main.dn-page > .dn-section.dn-services { margin-top: 80px; } }
@media (max-width: 767px) { main.dn-page > .dn-section.dn-services { margin-top: 56px; } }

/* core/button on pages and posts looks like .dn-button; the "With arrow" style adds the down arrow. */
.wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--control-height); padding: 3px var(--button-pad-x); box-sizing: border-box;
  border: var(--border-width) solid var(--button-primary); border-radius: var(--radius);
  background: var(--button-primary); color: var(--typography-primary);
  font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible { background: var(--button-hover); border-color: var(--button-hover); color: var(--typography-primary); }
.wp-block-button.is-style-dn-arrow .wp-block-button__link::after {
  content: ""; flex: none; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5.5 0.5v10M0.7 5.7l4.8 4.8 4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5.5 0.5v10M0.7 5.7l4.8 4.8 4.8-4.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* News story body: editor blocks inside .dn-article__text (the mockup only has plain paragraphs). */
.dn-article__text > * + * { margin-top: 20px; }
.dn-article__text h2, .dn-article__text h3 { font-weight: 600; line-height: 1.2; margin-top: 32px; }
.dn-article__text ul, .dn-article__text ol { padding-left: 1.2em; }
.dn-article__text ul { list-style: disc; }
.dn-article__text ol { list-style: decimal; }
.dn-article__text figure { margin-inline: 0; }
.dn-article__text img { display: block; max-width: 100%; height: auto; }
.dn-article__text a { text-decoration: underline; text-underline-offset: 3px; }
.dn-article__text .wp-block-columns { display: flex; gap: 16px; }
.dn-article__text .wp-block-column { flex: 1 1 0; min-width: 0; }
.dn-article__text .wp-block-column > * + * { margin-top: 12px; }
.dn-article__text .wp-block-quote { border-left: 4px solid currentColor; padding-left: 20px; font-style: italic; }
.dn-article__text .wp-block-quote cite { display: block; margin-top: 8px; font-size: .8em; font-style: normal; }
@media (max-width: 767px) { .dn-article__text .wp-block-columns { flex-direction: column; } }
/* Columns patterns: set widths, vertical alignment, headings at the top of a column, captions. */
.dn-article__text .wp-block-column[style*="flex-basis"] { flex-grow: 0; }
.dn-article__text .wp-block-columns.are-vertically-aligned-center { align-items: center; }
.dn-article__text .wp-block-column.is-vertically-aligned-center { align-self: center; }
.dn-article__text .wp-block-column > h3:first-child { margin-top: 0; }
.dn-article__text figcaption { margin-top: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--elements-hover); }
/* Photo rows (patterns "four photos", "photo grid"): equal crops; they stay 2 per row on phones */
.dn-article__text .dn-photos-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dn-article__text .dn-photos-row--4 img { aspect-ratio: 1; }
.dn-article__text .dn-photos-row + .dn-photos-row { margin-top: 16px; }
@media (max-width: 767px) {
  .dn-article__text .wp-block-columns.dn-photos-row { flex-direction: row; flex-wrap: wrap !important; }
  /* !important: WordPress core forces flex-basis: 100% !important on stacked columns below 782px */
  .dn-article__text .wp-block-columns.dn-photos-row > .wp-block-column { flex: 1 1 calc(50% - 8px) !important; }
}
/* Google map (block dn/map): 16:9 at the container width, 4:3 on phones; inside an article it follows the text column */
.dn-gmap { width: min(var(--container), 100% - 2 * var(--gutter)); margin: 0 auto; }
.dn-gmap iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.dn-article__text .dn-gmap { width: auto; margin: 0; }
@media (max-width: 767px) { .dn-gmap iframe { aspect-ratio: 4 / 3; } }
/* YouTube and other embeds: a 16:9 frame at the article width */
.dn-article__text .wp-block-embed iframe { display: block; max-width: 100%; }

/* ---------- Instagram strip (dn/instagram, link mode: posts synced from Smash Balloon) ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dn-gallery__link, .dn-gallery__follow { position: relative; display: block; width: 100%; height: 100%; color: inherit; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.dn-gallery__link:focus-visible, .dn-gallery__follow:focus-visible { outline-offset: -4px; }
.dn-gallery__link img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

/* Reel / carousel badge: dark translucent circle, top right */
.dn-gallery__badge { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.dn-gallery__badge .dn-icon { width: 14px; height: 14px; fill: #fff; stroke: none; }

/* Hover layer: start of the caption + call to action. Only where hover exists; keyboard focus always shows it. */
.dn-gallery__hover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; background: linear-gradient(180deg, rgba(25, 25, 25, .15), rgba(25, 25, 25, .8)); color: #fff; font-size: 12px; line-height: 1.4; text-align: left; opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.dn-gallery__caption { display: block; overflow-wrap: anywhere; }
.dn-gallery__cta { display: block; font-weight: 700; color: var(--elements-primary); }
.dn-gallery__link:focus-visible .dn-gallery__hover { opacity: 1; }
@media (hover: hover) {
  .dn-gallery__link:hover .dn-gallery__hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dn-gallery__hover { transition: none; }
}

/* Follow card: last tile of the loop */
.dn-gallery__follow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; background: var(--button-primary); color: var(--typography-primary); font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; transition: background-color var(--transition); }
.dn-gallery__follow:hover, .dn-gallery__follow:focus-visible { background: var(--button-hover); }
.dn-gallery__follow-logo { display: block; width: 60%; margin-bottom: 8px; }
.dn-gallery__follow-logo img { display: block; width: 100%; height: auto; }
.dn-gallery__follow span:last-child { font-weight: 600; font-size: 14px; }

/* Follow pill in the intro row: heading left, pill right; on phones the pill moves under the strip */
.dn-instagram-follow { text-decoration: none; }
.dn-photos__intro:has(.dn-instagram-follow) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
.dn-photos__intro:has(.dn-instagram-follow) > .dn-instagram-follow { grid-column: 2; grid-row: 1; }
.dn-photos__intro:has(.dn-instagram-follow) > :not(.dn-instagram-follow) { grid-column: 1; }
.dn-photos__intro:has(.dn-instagram-follow) > * + :not(.dn-instagram-follow) { margin-top: 20px; }
@media (max-width: 767px) {
  .dn-photos:has(> .dn-photos__intro > .dn-instagram-follow), .dn-article-insta:has(> .dn-photos__intro > .dn-instagram-follow) { display: flex; flex-direction: column; }
  .dn-photos__intro:has(.dn-instagram-follow) { display: contents; }
  .dn-photos__intro:has(.dn-instagram-follow) > * { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; box-sizing: border-box; }
  .dn-photos__intro:has(.dn-instagram-follow) > .dn-instagram-follow { order: 2; width: auto; margin: 24px auto 0 var(--gutter); align-self: flex-start; }
  .dn-photos > .dn-gallery, .dn-article-insta > .dn-gallery { order: 1; }
}