/* Shared frame only. Profiles keep atlas rows away from image grids and archives. */
body.cna-site main.container { color: var(--cna-text); }
body.cna-site main.container article.entry-content { color: var(--cna-text); }
/* Text links in known core content containers share the menu's hover color.
   Leave image links, buttons, forms and external plugin components alone. */
body.cna-site main.container :is(article.entry-content, article.entry-content .wp-block-group, article.entry-content .wp-block-column, article.entry-content .wp-block-media-text__content) > p a[href]:is(:hover, :focus-visible):not(.wp-element-button, .wp-block-button__link, [role='button']):not(:has(img, picture, svg)),
body.cna-site main.container article.entry-content :is(.wp-block-list, .wp-block-heading) a[href]:is(:hover, :focus-visible):not(.wp-element-button, .wp-block-button__link, [role='button']):not(:has(img, picture, svg)) {
  color: var(--cna-amber, #D58B2F) !important;
}
body.cna-site main.container :is(article.entry-content, article.entry-content .wp-block-group, article.entry-content .wp-block-column, article.entry-content .wp-block-media-text__content) > p a[href]:is(:hover, :focus-visible):not(.wp-element-button, .wp-block-button__link, [role='button']):not(:has(img, picture, svg)) :is(span, strong, em, b, i),
body.cna-site main.container article.entry-content :is(.wp-block-list, .wp-block-heading) a[href]:is(:hover, :focus-visible):not(.wp-element-button, .wp-block-button__link, [role='button']):not(:has(img, picture, svg)) :is(span, strong, em, b, i) {
  color: inherit !important;
}
/* Supplied mobile CSS makes full-width Gutenberg columns exactly 100vw.
   Keep a 3px gutter there without reducing existing larger content margins,
   changing atlas media/text rows, or narrowing the hero/navigation/footer. */
@media (max-width: 768px) {
  body.cna-site main.container article.entry-content > :is(.alignfull, .alignwide):where(:not(.wp-block-media-text)) {
    box-sizing: border-box;
    left: auto !important;
    width: calc(100vw - 6px) !important;
    max-width: calc(100vw - 6px) !important;
    margin-left: calc(50% - 50vw + 3px) !important;
    margin-right: calc(50% - 50vw + 3px) !important;
  }
  /* Match the atlas's 20px phone gutter on the front page and photo galleries.
     Account for full-width blocks that escape their padded content parent. */
  body.home.cna-site main.container article.entry-content > :is(.alignfull, .alignwide):where(:not(.wp-block-media-text)),
  body.cna-site.cna-profile-gallery main.container article.entry-content > :is(.alignfull, .alignwide):where(:not(.wp-block-media-text)) {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
    margin-left: calc(50% - 50vw + 20px) !important;
    margin-right: calc(50% - 50vw + 20px) !important;
  }
  body.cna-site.cna-profile-gallery main.container > div[id^='page-'] > .row > .content {
    box-sizing: border-box;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
body.cna-site main.container article.entry-content > h1.entry-header {
  font-family: var(--cna-serif) !important;
  color: var(--cna-forest) !important;
  font-size: clamp(24px, 3vw, var(--cna-title-size, 36px)) !important;
  line-height: 1.25;
  padding: 30px 0 24px;
  overflow-wrap: anywhere;
}
body.cna-site main.container .cn-breadcrumb { line-height: 1.7; overflow-wrap: anywhere; }
body.cna-site main.container .cn-breadcrumb a { color: var(--cna-text) !important; }
body.cna-site.cna-profile-text main.container article.entry-content {
  width: 100%;
  max-width: 860px;
  padding-top: 32px;
  padding-bottom: 56px;
  font-size: 1rem;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
body.cna-site.cna-profile-text main.container article.entry-content h2,
body.cna-site.cna-profile-text main.container article.entry-content h3 {
  color: var(--cna-forest) !important;
  font-family: var(--cna-serif) !important;
  line-height: 1.3;
}
body.cna-site.cna-profile-gallery main.container article.entry-content,
body.cna-site.cna-profile-tiles main.container article.entry-content {
  max-width: none;
  padding-top: 30px;
  padding-bottom: 48px;
}
body.cna-site.cna-profile-gallery main.container .wp-block-gallery img {
  border-radius: var(--cna-radius, 7px);
}
body.cna-site main.container .wp-element-caption,
body.cna-site main.container .wp-block-image figcaption {
  color: var(--cna-text);
  line-height: 1.5;
}
/* Known theme search/archive nodes, not the page-header component. */
body.cna-site.cna-profile-search #infinite-container,
body.cna-site.cna-profile-archive #infinite-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 36px 24px;
}
body.cna-site.cna-profile-search #infinite-container > article.post-holder,
body.cna-site.cna-profile-archive #infinite-container > article.post-holder {
  width: auto !important;
  min-width: 0;
  height: auto !important;
  float: none;
  margin: 0;
  overflow-wrap: anywhere;
  background-color: var(--cna-light);
  border: 1px solid var(--cna-line);
  border-radius: var(--cna-radius, 7px);
}
body.cna-site.cna-profile-search #infinite-container .featured-img,
body.cna-site.cna-profile-archive #infinite-container .featured-img {
  min-height: 220px;
  height: auto;
}
body.cna-site.cna-profile-search #infinite-container a:focus-visible,
body.cna-site.cna-profile-archive #infinite-container a:focus-visible {
  outline: 3px solid var(--cna-amber);
  outline-offset: 3px;
}
/* Existing main-/m-en-/urbex- links; labels come from existing visible overlays. */
body.cna-site a.cna-tile-link {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--cna-radius, 7px);
  line-height: 0;
  transform: none !important;
}
body.cna-site a.cna-tile-link img {
  display: block;
  transform: none !important;
  transition: none !important;
  border-radius: inherit;
}
/* The original columns rule adds margin-bottom:10px!important to each img.
   Keep that spacing outside the clipped link so its rounded bottom and hover
   overlay end at the actual photograph, not in a transparent strip below it. */
body.cna-site.cna-profile-tiles .wp-block-column a.cna-tile-link {
  margin-bottom: 10px !important;
}
body.cna-site.cna-profile-tiles .wp-block-column a.cna-tile-link img {
  margin-bottom: 0 !important;
}
body.cna-site a.cna-tile-link::before,
body.cna-site a.cna-tile-link::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms ease;
  border: 0;
}
body.cna-site a.cna-tile-link::before {
  content: '';
  background: radial-gradient(ellipse at center, rgba(32,45,34,.72), rgba(32,45,34,.6));
  z-index: 1;
}
body.cna-site a.cna-tile-link::after {
  content: attr(data-cna-tile-label);
  display: grid;
  place-content: center;
  padding: 20px;
  color: #F5F0E5;
  font-family: var(--cna-sans, 'CNA Jost', Jost, Arial, sans-serif);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .1em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  z-index: 2;
}
body.cna-site a.cna-tile-link:hover::before,
body.cna-site a.cna-tile-link:hover::after,
body.cna-site a.cna-tile-link:focus-visible::before,
body.cna-site a.cna-tile-link:focus-visible::after { opacity: 1; }
body.cna-site a.cna-tile-link:focus-visible { outline: 3px solid var(--cna-amber); outline-offset: 4px; }
body.cna-site .cna-tile-legacy > .main-overlay-text,
body.cna-site .cna-tile-legacy > .m-en-overlay-text,
body.cna-site .cna-tile-legacy > .urbex-overlay-text,
body.cna-site .cna-tile-link .main-overlay-text,
body.cna-site .cna-tile-link .m-en-overlay-text,
body.cna-site .cna-tile-link .urbex-overlay-text { display: none !important; }
@media (hover: none), (pointer: coarse) {
  body.cna-site a.cna-tile-link::before,
  body.cna-site a.cna-tile-link::after { opacity: 1; }
}
@media (max-width: 950px) {
  body.cna-site.cna-profile-search #infinite-container,
  body.cna-site.cna-profile-archive #infinite-container { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  body.cna-site.cna-profile-search #infinite-container,
  body.cna-site.cna-profile-archive #infinite-container { grid-template-columns: minmax(0,1fr); padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cna-site a.cna-tile-link::before,
  body.cna-site a.cna-tile-link::after { transition: none; }
}

/* Cinematic overview cards: main-/m-en-/urbex-; ffoto has its own module. */
body.cna-site a.cna-tile-link.cna-cinematic-gallery {
  --cna-tile-inset: clamp(16px, 1.5vw, 26px);
  --cna-tile-title-size: clamp(18px, 2vw, 28px);
}
body.cna-site a.cna-tile-link.cna-cinematic-gallery img {
  transform: scale(1) !important;
  transform-origin: center;
  transition: transform 300ms ease !important;
}
/* The supplied urbex snippet makes the link overflow visible and masks image
   edges. Override only upgraded location tiles to keep zoom inside the card. */
body.cna-site a.cna-tile-link.cna-cinematic-urbex {
  overflow: hidden !important;
}
body.cna-site a.cna-tile-link.cna-cinematic-urbex img {
  -webkit-mask: none !important;
  mask: none !important;
}
body.cna-site a.cna-tile-link.cna-cinematic-gallery::before {
  background: linear-gradient(to bottom, transparent 30%, rgba(10, 15, 12, .75) 100%);
  opacity: 0;
  transition: opacity 300ms ease;
}
body.cna-site a.cna-tile-link.cna-cinematic-gallery::after {
  content: none;
  display: none;
}
/* CTA sits above the actual title, including when a long title wraps. */
body.cna-site a.cna-cinematic-gallery .cna-tile-caption {
  position: absolute;
  inset: auto var(--cna-tile-inset) var(--cna-tile-inset);
  pointer-events: none;
  z-index: 3;
}
body.cna-site a.cna-cinematic-gallery .cna-tile-name {
  display: block;
  color: #FFFFFF !important;
  opacity: 1 !important;
  font-family: var(--cna-sans, 'CNA Jost', Jost, Arial, sans-serif);
  font-weight: 700;
  font-size: var(--cna-tile-title-size);
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .317), 0 0 6px rgba(0, 0, 0, .3), 0 2px 12px rgba(0, 0, 0, .233);
}
body.cna-site a.cna-cinematic-gallery .cna-tile-cta {
  display: block;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  color: #FFFFFF !important;
  font-family: var(--cna-sans, 'CNA Jost', Jost, Arial, sans-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .317), 0 0 6px rgba(0, 0, 0, .3), 0 2px 12px rgba(0, 0, 0, .233);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}
body.cna-site a.cna-tile-link.cna-cinematic-gallery:hover::before,
body.cna-site a.cna-tile-link.cna-cinematic-gallery:focus-visible::before { opacity: 1; }
body.cna-site a.cna-tile-link.cna-cinematic-gallery.cna-touch-active::before { opacity: 1; transition: none !important; }
body.cna-site a.cna-cinematic-gallery.cna-touch-active .cna-tile-cta { opacity: 1; transform: translateY(0); transition: none !important; }
body.cna-site a.cna-cinematic-gallery.cna-touch-active img { transform: scale(1.03) !important; transition: none !important; }
body.cna-site a.cna-cinematic-gallery:focus-visible img { transform: scale(1.03) !important; }
body.cna-site a.cna-cinematic-gallery:focus-visible .cna-tile-cta { opacity: 1; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  body.cna-site a.cna-cinematic-gallery:hover img { transform: scale(1.03) !important; }
  body.cna-site a.cna-cinematic-gallery:hover .cna-tile-cta { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.cna-site a.cna-tile-link.cna-cinematic-gallery img,
  body.cna-site a.cna-cinematic-gallery.cna-touch-active img,
  body.cna-site a.cna-tile-link.cna-cinematic-gallery::before,
  body.cna-site a.cna-cinematic-gallery .cna-tile-cta {
    transition: none !important;
    transform: none !important;
  }
}