/* Coalition For TJ - styles for the interactive parts (drawer, menus, galleries, video, PDF, blog, form). */

html.cg-lock,
html.cg-lock body { overflow: hidden; }

/* mobile navigation drawer + "More" dropdown */
.x [data-ux="NavigationDrawer"] { left: 0; }
.x [data-ux="NavigationDrawer"].cg-open { transform: none; }
.x [data-ux="Dropdown"].cg-open { display: block; }
.x [data-ux="NavigationDrawerCloseIcon"] { z-index: 2; }

/* YouTube embeds */
.cg-video { position: relative; width: 100%; overflow: hidden; }
.cg-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }

/* PDF first-page previews (the whole preview opens the PDF, at every screen size) */
.cg-pdf-preview { display: block; width: 100%; height: auto; background: #fff; }
.x a[data-aid="PDF_LINK_OVERLAY"] { display: block; }

/* horizontal photo strips: images used to be faded in by script */
.x img.gallery-8-img { opacity: 1; }

/* images pasted into text blocks keep fixed pixel sizes; let them shrink on small screens */
.x .x-rt img { max-width: 100%; height: auto; }

/* tablets: stack the home page banner above its text instead of cropping the banner to half width */
@media (min-width: 768px) and (max-width: 1023px) {
  .x [data-ux="Block"]:has(> [data-ux="Hero"]) { flex-direction: column; }
  .x [data-ux="Block"]:has(> [data-ux="Hero"]) > [data-ux="Block"] { width: 100%; min-width: 0; }
  .x [data-ux="Block"]:has(> [data-ux="Hero"]) > [data-ux="Hero"] { min-width: 0; flex-basis: auto; }
  .x img[data-aid="BACKGROUND_IMAGE_RENDERED"][data-ht="Inset"] { min-height: 0; }
}

/* photo galleries (slideshow with thumbnails / full-width slider) */
.cg-gallery { position: relative; width: 100%; outline: none; }
.cg-gallery-viewport { position: relative; overflow: hidden; height: 600px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cg-gallery-track { position: relative; display: flex; align-items: stretch; height: 100%; margin: 0; padding: 0; list-style: none; transition: transform .5s ease; will-change: transform; }
.cg-gallery-slide { position: relative; flex: 0 0 auto; height: 100%; margin: 0 0 0 5px; padding: 0; opacity: .3; transition: opacity .5s ease; }
.cg-gallery-slide.is-active { opacity: 1; }
.cg-gallery-slide img { display: block; height: 100%; width: auto; max-width: none; pointer-events: none; }
.cg-gallery[data-mode="full"] .cg-gallery-viewport { height: auto; }
.cg-gallery[data-mode="full"] .cg-gallery-slide { flex: 0 0 100%; margin: 0; opacity: 1; }
.cg-gallery[data-mode="full"] .cg-gallery-slide img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cg-gallery-btn { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: rgb(21, 21, 21); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: background .2s, color .2s; }
.cg-gallery-btn:hover, .cg-gallery-btn:focus-visible { background: rgb(203, 65, 84); color: #fff; outline: none; }
.cg-gallery-btn svg { width: 24px; height: 24px; }
.cg-gallery-prev { left: 16px; }
.cg-gallery-next { right: 16px; }
.cg-gallery-thumbs { position: relative; display: flex; gap: 8px; margin-top: 16px; padding: 0 0 6px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.cg-gallery-thumb { flex: 0 0 auto; padding: 0; border: 2px solid transparent; background: none; cursor: pointer; opacity: .5; transition: opacity .2s, border-color .2s; line-height: 0; }
.cg-gallery-thumb:hover, .cg-gallery-thumb.is-active { opacity: 1; }
.cg-gallery-thumb.is-active { border-color: rgb(203, 65, 84); }
.cg-gallery-thumb img { display: block; width: 96px; height: 72px; object-fit: cover; }
@media (max-width: 1023px) { .cg-gallery-viewport { height: 450px; } }
@media (max-width: 767px) {
  .cg-gallery-viewport { height: 300px; }
  .cg-gallery-slide img { max-width: calc(100vw - 48px); object-fit: cover; }
  .cg-gallery-btn { width: 36px; height: 36px; margin-top: -18px; }
  .cg-gallery-prev { left: 8px; }
  .cg-gallery-next { right: 8px; }
  .cg-gallery-thumb img { width: 72px; height: 54px; }
}

/* blog list + post */
.cg-blog { position: relative; max-width: 960px; margin: 0 auto; }
.cg-post { display: flex; flex-wrap: wrap; overflow: hidden; background: #fff; color: rgb(21, 21, 21); box-shadow: 0 3px 6px 3px rgba(0, 0, 0, .16); text-align: left; }
.cg-post-media { flex: 1 1 320px; min-height: 220px; background: rgb(251, 241, 242); }
.cg-post-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-post-body { flex: 1 1 320px; padding: 32px; }
.cg-post-date { margin: 0 0 8px; font-family: Quicksand, sans-serif; font-size: 14px; letter-spacing: .071em; text-transform: uppercase; color: rgb(94, 94, 94); }
.cg-post-title { margin: 0 0 16px; font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 400; line-height: 1.25; }
.cg-post-title a { color: inherit; text-decoration: none; }
.cg-post-title a:hover { color: rgb(199, 64, 82); }
.cg-post-excerpt, .cg-post-content p { margin: 0 0 16px; font-family: Quicksand, sans-serif; font-size: 16px; line-height: 1.5; color: rgb(94, 94, 94); }
.cg-post-more, .cg-post-back { display: inline-flex; align-items: center; gap: 4px; font-family: Quicksand, sans-serif; font-size: 16px; color: rgb(199, 64, 82); text-decoration: none; }
.cg-post-more:hover, .cg-post-back:hover { color: rgb(117, 34, 45); }
.cg-post-more svg, .cg-post-back svg { width: 1em; height: 1em; }
.cg-blog-single .cg-post { display: block; }
.cg-blog-single .cg-post-media { min-height: 0; }
.cg-blog-single .cg-post-media img { height: auto; max-height: 560px; }
.cg-blog-single .cg-post-title { font-size: 32px; }
.cg-blog-single .cg-post-back { margin: 0 0 24px; color: #fff; }
.cg-blog-single .cg-post-back:hover { color: rgb(251, 241, 242); }
@media (max-width: 767px) {
  .cg-post-body { padding: 24px; }
  .cg-blog-single .cg-post-title { font-size: 26px; }
}

/* contact form messages */
.cg-form-error { margin: 8px 0 0; font-family: Quicksand, sans-serif; font-size: 14px; color: rgb(203, 65, 84); }
.cg-form-status { margin: 16px 0 0; padding: 16px; font-family: Quicksand, sans-serif; font-size: 16px; line-height: 1.5; color: rgb(21, 21, 21); background: rgb(251, 241, 242); }