/* gallery.css — self-contained, zero-JS reimplementation of the portfolio gallery grid.
   The original builder set grid vars + background-image at runtime via JS; we do it statically
   in port.mjs. Column/gap/aspect come from each gallery's own settings as inline CSS vars. */

.mpx-grid-gallery {
  display: grid;
  grid-template-columns: repeat(var(--mpx-cols, 4), 1fr);
  gap: var(--mpx-gap, 10px);
  width: 100%;
}
@media (max-width: 1024px) {
  .mpx-grid-gallery { grid-template-columns: repeat(var(--mpx-cols-t, 2), 1fr); }
}
@media (max-width: 767px) {
  .mpx-grid-gallery { grid-template-columns: repeat(var(--mpx-cols-m, 1), 1fr); }
}

.mpx-grid-gallery .mpx-gallery-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--mpx-aspect, 3 / 2);
  text-decoration: none;
}
.mpx-grid-gallery .mpx-gallery-item__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: transform .4s ease;
  will-change: transform;
}
/* image_hover_animation: grow */
.mpx-grid-gallery .mpx-gallery-item:hover .mpx-gallery-item__image,
.mpx-grid-gallery .mpx-gallery-item:focus-visible .mpx-gallery-item__image {
  transform: scale(1.1);
}
/* overlay_background: yes */
.mpx-grid-gallery .mpx-gallery-item__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(0, 0, 0, .35);
  transition: opacity .4s ease;
  pointer-events: none;
}
.mpx-grid-gallery .mpx-gallery-item:hover .mpx-gallery-item__overlay,
.mpx-grid-gallery .mpx-gallery-item:focus-visible .mpx-gallery-item__overlay {
  opacity: 1;
}

/* hover title: a slim bar in the site's green that SLIDES UP from the bottom on hover (not a flash) */
.mpx-grid-gallery .mpx-gallery-item__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  box-sizing: border-box;
  background: rgba(174, 185, 166, .94);       /* the site's own custom-cta green */
  transform: translateY(101%);                /* hidden just below the tile */
  transition: transform .4s ease !important;  /* !important: a bundled gallery rule zeroes the duration otherwise */
  pointer-events: none;
  z-index: 2;
}
.mpx-grid-gallery .mpx-gallery-item:hover .mpx-gallery-item__content,
.mpx-grid-gallery .mpx-gallery-item:focus-within .mpx-gallery-item__content { transform: translateY(0) !important; }
.mpx-grid-gallery .mpx-gallery-item__title {
  color: #2b3122;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.25;
  margin: 0;
}

/* CTA category cards (parent pages): self-contained layout so the bg image fills the card and the
   custom-cta title slides in smoothly (the Elementor widget's own positioning rules didn't survive the bundle) */
.mpx-widget-call-to-action .mpx-cta { position: relative !important; display: block; overflow: hidden; }
.mpx-widget-call-to-action .mpx-cta__bg-wrapper { position: absolute !important; inset: 0 !important; overflow: hidden; }
.mpx-widget-call-to-action .mpx-cta__bg { position: absolute !important; inset: 0 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat; }
.mpx-widget-call-to-action .mpx-cta__bg-overlay { position: absolute; inset: 0; }
.mpx-widget-call-to-action .mpx-cta__content { position: relative; z-index: 1; }
.custom-cta .mpx-cta__title { transition: transform .5s ease, opacity .5s ease !important; }

/* Swiper fade safety (bundle CSS already includes it; keep slides from stacking before init) */
.swiper-fade .swiper-slide { pointer-events: none; transition: none; }
.mpx-fade-ready.swiper-fade .swiper-slide { transition: opacity 0.4s ease !important; }
.swiper-fade .swiper-slide-active { pointer-events: auto; }

/* GLightbox caption legibility */
.glightbox-clean .gslide-description { background: rgba(0, 0, 0, .82); }
.glightbox-clean .gslide-title { font-size: 1rem; font-weight: 600; }

/* lightbox: leave breathing room around images (don't fill the window edge-to-edge); caption sits at the bottom.
   Cap the image at 74vh and bound the caption so a long materials/dimensions line can't push the image off-screen. */
.glightbox-container .gslide-image img { max-height: 74vh !important; max-width: 90vw !important; }
.glightbox-container .gslide-description { padding: 12px 18px; max-height: 22vh; overflow-y: auto; text-align: center; }
/* caption text is white on the dark bar — the .gslide-title is an <h4> that would otherwise inherit the
   site's dark heading colour and become unreadable */
.glightbox-container .gslide-title { color: #fff !important; margin-bottom: 4px; }
.glightbox-container .gslide-desc { color: rgba(255, 255, 255, .88) !important; }

/* site logo drops behind all content and the menu — purely a z-index change, logo stays in normal flow
   (GMD id + GMS id; each id exists on only its own site, so listing both keeps this stylesheet identical) */
.mpx-element-3b88108,
.mpx-element-afbbe46 {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Elementor full-width GRID containers apply their gap directly (the bundled rule only covers flex
   containers) — without this the 3 category cards on the parent pages touch with no gutter */
.mpx-con.mpx-grid { gap: var(--row-gap) var(--column-gap); }

/* nested-carousel (Testimonials) prev/next arrows: the eicons font isn't bundled, so the chevrons
   render as empty squares — draw them from CSS borders instead */
.mpx-swiper-button .eicon-chevron-left::before,
.mpx-swiper-button .eicon-chevron-right::before { content: "" !important; }
.mpx-swiper-button i {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  box-sizing: border-box;
}
.mpx-swiper-button-prev i { transform: rotate(135deg); }
.mpx-swiper-button-next i { transform: rotate(-45deg); }

/* Video widget: Elementor lazy-loads a YouTube iframe on click; we embed a real responsive iframe
   (preserveVideo in port.mjs). 16:9 box, full width of its container, no layout shift. */
.mpx-video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.mpx-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Elementor's nested flex containers set min-height:0, so on mobile — where the gallery grid is 1
   column and far taller than the section's flex-distributed height — the grid's ancestor containers
   collapse and the grid overflows (painting over the footer; the footer rides up to mid-page and the
   copyright bar looks missing). Desktop is unaffected (the 3-col grid is short enough). Blockify only
   the containers that actually hold a grid gallery, at mobile widths, so they size to the grid's real
   height and the footer sits at the true bottom. (Desktop's side-by-side gallery|heading row is kept.) */
@media (max-width: 1024px) {
  .mpx-con:has(.mpx-grid-gallery),
  .mpx-con-full:has(.mpx-grid-gallery),
  .mpx-con-boxed:has(.mpx-grid-gallery),
  .mpx-con-inner:has(.mpx-grid-gallery),
  .mpx-widget-gallery:has(.mpx-grid-gallery),
  .mpx-widget-gallery > .mpx-widget-container {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* Résumé carousel: the 4 resume pages merged into one Swiper, driven by the page's own Previous/More
   links (carousel.js). autoHeight handles the differing slide heights; slides are full width. */
.mpx-resume-layout { display: flex; gap: 56px; align-items: flex-start; }
.mpx-resume-layout > .mpx-con,
.mpx-resume-layout > [class*="mpx-element-"] {
  flex: 0 0 auto !important; width: auto !important; max-width: 180px !important; align-self: flex-start;
}
.mpx-resume { display: flex; gap: 48px; align-items: flex-start; flex: 1 1 0; min-width: 0; max-width: 1040px; }
.mpx-resume-media { flex: 0 0 44%; max-width: 460px; }
.mpx-resume-media img, .mpx-resume-media picture, .mpx-resume-media picture img { display: block; width: 100%; height: auto; }
.mpx-resume-body { flex: 1 1 0; min-width: 0; }
.mpx-resume-panels { position: relative; min-height: 380px; }
.mpx-resume-panel { display: none; }
.mpx-resume-panel.is-active { display: block; animation: mpx-resume-fade .4s ease; }
@keyframes mpx-resume-fade { from { opacity: 0; } to { opacity: 1; } }
.mpx-resume-title { margin: 0 0 .7em; font-size: 1.55rem; font-weight: 600; color: #2a2a2a; line-height: 1.2; }
.mpx-resume-panel p { margin: 0 0 1em; }
.mpx-resume-panel table { border-collapse: collapse; width: 100%; margin: .2em 0 1em; }
.mpx-resume-panel td { padding: 2px 16px 2px 0; vertical-align: top; }
.mpx-resume-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.mpx-resume-nav button { background: none; border: 0; padding: 0; font: inherit; color: #4a4a4a; cursor: pointer; }
.mpx-resume-nav button:hover:not(:disabled) { color: #000; text-decoration: underline; }
.mpx-resume-nav button:disabled { opacity: .3; cursor: default; }
.mpx-resume-sep { color: #c4c4c4; }
@media (max-width: 900px) {
  .mpx-resume-layout { display: block; }
  .mpx-resume { flex-direction: column; gap: 22px; }
  .mpx-resume-media { flex: none; width: 100%; max-width: 420px; }
  .mpx-resume-panels { min-height: 0; }
}

/* About/Résumé pages: source used dark section backgrounds — force clean white to match the site. */
.mpx-page-2181 .mpx-element, .mpx-page-2354 .mpx-element,
.mpx-page-2359 .mpx-element, .mpx-page-2364 .mpx-element { background-color: transparent !important; }
/* About/Résumé pages: text was white for the (removed) dark bg — force dark so it's readable on white. */
.mpx-page-2181, .mpx-page-2354, .mpx-page-2359, .mpx-page-2364,
.mpx-page-2181 .mpx-heading-title, .mpx-page-2354 .mpx-heading-title,
.mpx-page-2359 .mpx-heading-title, .mpx-page-2364 .mpx-heading-title,
.mpx-page-2181 .mpx-widget-text-editor, .mpx-page-2354 .mpx-widget-text-editor,
.mpx-page-2359 .mpx-widget-text-editor, .mpx-page-2364 .mpx-widget-text-editor,
.mpx-page-2181 .mpx-widget-text-editor *, .mpx-page-2354 .mpx-widget-text-editor *,
.mpx-page-2359 .mpx-widget-text-editor *, .mpx-page-2364 .mpx-widget-text-editor *,
.mpx-page-2181 td, .mpx-page-2354 td, .mpx-page-2359 td, .mpx-page-2364 td,
.mpx-page-2181 .mpx-nav-menu a, .mpx-page-2354 .mpx-nav-menu a,
.mpx-page-2359 .mpx-nav-menu a, .mpx-page-2364 .mpx-nav-menu a { color: #333 !important; }
.mpx-page-2181 a[href*="resume-gary-marsh"], .mpx-page-2354 a[href*="resume-gary-marsh"],
.mpx-page-2359 a[href*="resume-gary-marsh"], .mpx-page-2364 a[href*="resume-gary-marsh"],
.mpx-page-2181 .mpx-widget-text-editor a, .mpx-page-2354 .mpx-widget-text-editor a,
.mpx-page-2359 .mpx-widget-text-editor a, .mpx-page-2364 .mpx-widget-text-editor a { color: #333 !important; }