/* 75th Anniversary Gala preview page - custom-page-agent CSS
   Site tokens: primary #6B5137 (nav brown), secondary #A2C1D9 (ticket-specified accent),
   heading color #450E09, fontDisplay "EB Garamond"/serif, fontBody Lato/sans-serif */

/* Tagline block (#g-above .parish-mission-wrapper) - this site's base.css has no rules at
   all for .parish-mission-wrapper, so the plain contentarray output was showing raw Joomla
   blog chrome (byline row + Read More). Hide that chrome and style the tagline as a banner. */
body section#g-above {
  background: #f5f0e8 !important;
}
#g-above .parish-mission-wrapper {
  background: #f5f0e8 !important;
  text-align: center;
  padding: min(6vw, 3.5rem) 1rem !important;
}
#g-above .parish-mission-wrapper .g-array-item-title,
#g-above .parish-mission-wrapper .g-array-item-details,
#g-above .parish-mission-wrapper .g-array-item-read-more {
  display: none !important;
}
#g-above .parish-mission-wrapper .g-array-item-text {
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: min(5vw, 2.25rem);
  color: #450E09;
  margin: 0;
}

/* Quicklinks grid (#g-slideshow .ql-united) - this site has no ql-united card/icon styling
   and the Studius stock quicklink images (gantry-media://stories/template/quicklinks/*.jpg)
   don't exist on this Clarity-theme server, so images rendered broken/empty. Replaced with
   CSS icon badges instead of images.
   2026-08-11 revamp: consolidated in place (not appended) since this is a full redesign,
   not a tweak - the old rules mixed the theme's default pale-blue .button (#A2C1D9) against
   the maroon heading and brown nav, three unrelated hues competing on one small card. Now
   built from only the two brand tones (brown #6B5137, maroon #450E09) plus cream/white.
   Gantry always renders a real <a class="button"> per card inside p.g-blockcontent-buttons;
   only the OUTER .g-blockcontent-subcontent-block is position:relative (the inner
   .block-content and its icon are deliberately left position:static) so that anchor's
   inset:0 resolves against the full outer card - border to border - instead of just the
   inner content box, making the entire card the click target, not a strip inside it.
   The section's own grid wrapper (.g-grid / .g-block.ql-united / .g-particle) carries an
   inline max-width from the outline's grid-width setting (1024px on this outline) - that
   is overridden here with !important since it is a plain (non-!important) inline style and
   any !important stylesheet rule beats it regardless of specificity. Icon + title are laid
   out as a true flex column (.block-content: flex-direction:column, justify-content:center)
   instead of a fixed top-offset, so the pair is centered as one cluster in whatever height
   the card ends up with. The title h4 gets an explicit width:100% - without it the h4 was
   measuring only as wide as its own text (confirmed via devtools) even though no
   stylesheet gives it a shrink-to-fit width, so its own justify-content:center had nothing
   to center within and it rendered pinned to the left edge instead of centered under the
   icon. The row itself is a 4-column CSS grid rather than a wrapping flexbox - flexbox with
   flex-wrap would rather drop the 4th card to its own line than shrink all four to fit one
   row at a given container width, which is exactly what happened at ~1100px. Grid columns
   are defined explicitly (1fr each) so all four always share one row on desktop; the
   column count only changes at the two breakpoints below, not as a side effect of width. */
#g-slideshow.standard-ql {
  background: #fff;
}
#g-slideshow .g-grid,
#g-slideshow .g-block.ql-united,
#g-slideshow .g-particle {
  max-width: 1600px !important;
  width: 100% !important;
}
#g-slideshow .ql-united .g-blockcontent-subcontent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(3vw, 2rem);
  max-width: 1600px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  #g-slideshow .ql-united .g-blockcontent-subcontent {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  #g-slideshow .ql-united .g-blockcontent-subcontent {
    grid-template-columns: 1fr;
  }
}
#g-slideshow .ql-united .g-blockcontent-subcontent-block {
  position: relative;
  min-height: 190px;
  text-align: center;
  background: #fff;
  border: 1px solid #e6ddcc;
  border-radius: 10px;
  padding: 1.25rem 1.75rem;
  box-shadow: 0 2px 8px rgba(69, 14, 9, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#g-slideshow .ql-united .g-blockcontent-subcontent-block:hover,
#g-slideshow .ql-united .g-blockcontent-subcontent-block:focus-within {
  transform: translateY(-4px);
  border-color: #6B5137;
  box-shadow: 0 14px 28px rgba(69, 14, 9, 0.16);
}
#g-slideshow .ql-united .g-blockcontent-subcontent-img {
  display: none;
}
#g-slideshow .ql-united .g-blockcontent-subcontent-block-content {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}
#g-slideshow .ql-united .g-blockcontent-subcontent-block-content::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #6B5137;
  font-family: "FontAwesome";
  font-size: 18px;
  line-height: 48px;
  text-align: center;
  color: #fff;
  transition: background 0.18s ease;
}
#g-slideshow .ql-united .g-blockcontent-subcontent-block:hover .g-blockcontent-subcontent-block-content::before {
  background: #450E09;
}
#g-slideshow .ql-united .gala-ql-sponsors .g-blockcontent-subcontent-block-content::before {
  content: "\f004"; /* fa-heart */
}
#g-slideshow .ql-united .gala-ql-journal .g-blockcontent-subcontent-block-content::before {
  content: "\f02d"; /* fa-book */
}
#g-slideshow .ql-united .gala-ql-tickets .g-blockcontent-subcontent-block-content::before {
  content: "\f145"; /* fa-ticket */
}
#g-slideshow .ql-united .gala-ql-photos .g-blockcontent-subcontent-block-content::before {
  content: "\f030"; /* fa-camera */
}
#g-slideshow .ql-united .g-blockcontent-subcontent-title {
  font-family: "EB Garamond", serif;
  color: #450E09;
  margin: 0;
  width: 100%;
  font-size: 1.15rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#g-slideshow .ql-united .g-blockcontent-subcontent-title-text::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
  color: #6B5137;
  transition: transform 0.18s ease;
}
#g-slideshow .ql-united .g-blockcontent-subcontent-block:hover .g-blockcontent-subcontent-title-text::after {
  transform: translateX(4px);
}
#g-slideshow .ql-united .g-blockcontent-buttons {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  z-index: 2;
}
#g-slideshow .ql-united .g-blockcontent-buttons a.button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  border-radius: inherit;
}

/* Gala Rotator (#g-slideshow) - fixed 1600:669 ratio, centered column instead of the
   theme's default viewport-height full-bleed hero. The swiper particle's own height/
   heightMobile attributes were switched from "100%" (a JS full-viewport-height mode) to
   "auto" so this stylesheet's aspect-ratio governs sizing instead of fighting an inline
   JS-set height on resize. */
#g-slideshow .g-container {
  max-width: 1600px;
  margin: 0 auto;
}
#g-slideshow .fullwidth-swiper,
#g-slideshow .g-swiper,
#g-slideshow .g-swiper-slider,
#g-slideshow .swiper-slide {
  height: auto !important;
  aspect-ratio: 1600 / 669 !important;
}
#g-slideshow .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Gala Hero Title - large title overlaying the rotator, centered. The native swiper
   caption markup (.slide-content) was not used for this because it repeats per slide and
   would need duplicating on every future rotator image; this is one persistent page title
   instead, added as its own custom particle (id custom-2464) layered over the swiper with
   position:absolute. pointer-events:none so it never blocks the swiper's nav arrows. */
#g-slideshow {
  position: relative;
}
.gala-hero-title-block {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 5;
  pointer-events: none;
}
.gala-hero-title {
  margin: 0;
  font-family: "EB Garamond", serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 5.5vw, 4.25rem);
  line-height: 1.1;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.02em;
}

/* Gantry platform bug: a sibling block's "size" attribute inside a .g-grid gets
   silently re-normalized to an equal split across siblings on every real save
   (gantry_layout import / gantry_particle add) - confirmed reproducible even though
   the tool's own dry-run diff shows the requested size accepted. Logged to
   knowledge_self_improving (gantry_layout, gantry_particle). Force the actual width
   here instead of continuing to fight the reset. */
#g-slideshow .fullwidth-swiper {
  width: 100% !important;
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

/* Same size-50 leak as the swiper block above: inset:0 alone loses to .size-50's
   explicit width:50% (no width declared here to compete with it), so the title box
   rendered pinned to the left half instead of spanning the full section. */
.gala-hero-title-block {
  width: 100% !important;
}

/* 2026-08-11: title moved from centered to top-right of the rotator, script font
   per client request. These rules override the centered version above (same
   selectors, later in the cascade wins at equal specificity) rather than
   replacing that block, so the history of the change stays visible in the file. */
.gala-hero-title-block {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 1.5rem 2rem;
}
.gala-hero-title {
  font-family: "Dancing Script", "EB Garamond", cursive, serif;
  font-weight: 700;
  text-align: right;
  max-width: 70%;
}

/* 2026-08-11: keep the hero title on one row instead of wrapping. Drops the
   max-width wrap constraint and scales font-size more aggressively with
   viewport width so a single line still fits down to mobile widths. */
.gala-hero-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.1rem, 4.5vw, 3.75rem);
}

/* 2026-08-11: dark image tint removed (swiper overlaycolor reset to transparent
   via particle attribute); compensate by giving the title its own solid
   background badge + shadow instead of relying on a full-image tint. */
.gala-hero-title {
  background: #6B5137;
  color: #fff;
  padding: 0.35em 0.9em;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  text-shadow: none;
}

/* 2026-08-11: shadow under the top nav on this page, so the elevated menu bar
   reads as sitting above the rotator - the gala title looks like it tucks in
   behind the menu. #g-navigation needs its own position+z-index to paint that
   shadow over the positioned #g-slideshow section below it - position:relative
   alone still follows DOM order for z-index:auto elements, so without an
   explicit z-index here the later slideshow section paints over the shadow
   instead of being tucked under it. */
#g-navigation {
  position: relative;
  z-index: 30;
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.5);
}

/* 2026-08-11: title badge sits flush in the top-right corner of the rotator,
   no gap from the image edges. */
.gala-hero-title-block {
  padding: 0;
}

/* 2026-08-11: badge sits flush in the image's actual top-right corner, so only
   the free-floating inner corner (bottom-left) should read as rounded. */
.gala-hero-title {
  border-radius: 0 0 0 8px;
}

/* ============================================================================
   2026-08-28 (ticket #36012) - centre the flushed slideshow on wide screens
   ----------------------------------------------------------------------------
   #g-slideshow is a .g-flushed section. clarity_13.css sets
   `.g-flushed > .g-container { margin-left:0 !important; margin-right:0 !important }`,
   which beats the non-!important `#g-slideshow .g-container { margin:0 auto }`
   rule earlier in this file. Result: past 1600px viewport width the
   1600px-capped container sat hard-left and the brown #g-slideshow background
   showed on the right. Re-assert auto side margins with an id-level selector +
   !important so the theme rule loses on specificity.

   Then give .g-grid its own positioning context: .gala-hero-title-block is
   position:absolute; inset:0 and was resolving against #g-slideshow (the only
   positioned ancestor), so its corner badge stretched to the full section width
   and desynced from the now-centred rotator. Anchoring it to .g-grid keeps the
   badge locked to the rotator's real top-right corner at every width.
   ========================================================================== */
#g-slideshow > .g-container {
  margin-left: auto !important;
  margin-right: auto !important;
}
#g-slideshow > .g-container > .g-grid {
  position: relative;
}

/* 2026-08-28 (ticket #36012): Photo Gallery card removed per client decision
   ("We decided to not use a link for photos"). Three cards now, so the desktop
   quicklink row is 3-up instead of 4-up. Scoped to >=901px so it overrides the
   base `repeat(4, 1fr)` without disturbing the existing max-width:900px (2-up)
   and max-width:560px (1-up) rules earlier in this file. */
@media (min-width: 901px) {
  #g-slideshow .ql-united .g-blockcontent-subcontent {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================================
   2026-08-28 (ticket #36012) - quicklink buttons OVERLAID on the rotator
   ----------------------------------------------------------------------------
   Client (Maricelle, in-ticket): "use the rotator as a background page for the
   buttons ... get rid of empty space ... see the buttons right away."
   The Gala Quicklinks particle (blockcontent-2005) was moved out of #g-utility
   into the #g-slideshow section, as a 3rd block in the same .g-grid as the
   swiper. In the SAME edit every `#g-utility ...` selector above was rewritten
   to `#g-slideshow ...` (sed), because #g-utility is now empty - so all the
   existing card styling keeps applying in the new location unchanged. The
   `#g-slideshow.standard-ql { background:#fff }` rule that came across no longer
   matches (the slideshow section has no .standard-ql class), which is what we
   want: the rotator, not a white panel, is the backdrop.
   The rules below (a) switch the rotator to 16:9 for the extra height, clamped
   so the hero + buttons still fit a laptop viewport, and (b) pin the button row
   to the lower rotator with contrast lift, flowing normally below on phones. */

/* Rotator: 16:9 (was 1600/669). max-height keeps the hero within one screen on
   laptops so the buttons are visible on load. object-fit:cover on the slide img
   (rule above) absorbs the extra crop when max-height clamps below true 16:9. */
#g-slideshow .fullwidth-swiper,
#g-slideshow .g-swiper,
#g-slideshow .g-swiper-slider,
#g-slideshow .swiper-slide {
  aspect-ratio: 16 / 9 !important;
}
@media (min-width: 561px) {
  #g-slideshow .fullwidth-swiper,
  #g-slideshow .g-swiper,
  #g-slideshow .g-swiper-slider,
  #g-slideshow .swiper-slide {
    max-height: min(80vh, 880px);
    min-height: 440px;
  }
}

/* Overlay the quicklink block on the lower portion of the rotator. .g-grid is
   position:relative (2026-08-28 centring fix), so absolute + bottom:0 here
   resolves against the centred 1600px column = the rotator box. pointer-events
   none on the wrapper lets rotator swipe/drag work in the gaps between cards;
   each card re-enables pointer-events for itself. */
@media (min-width: 561px) {
  #g-slideshow .g-block.ql-united {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 min(5vw, 3.5rem) min(4vw, 2.75rem);
    pointer-events: none;
  }
  #g-slideshow .ql-united .g-blockcontent-subcontent-block {
    pointer-events: auto;
    min-height: 0;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

/* Phones: 3 stacked cards will not fit a 390px-wide 16:9 hero. Let the block
   flow normally just below the rotator inside the same section (white bg). */
@media (max-width: 560px) {
  #g-slideshow .g-block.ql-united {
    position: static;
    width: 100% !important;
    padding: 1rem;
    background: #fff;
  }
}

/* 2026-08-28 (ticket #36012): the single swiper pagination bullet now sits
   behind the overlaid button row and peeks out between cards. Hide it - the
   prev/next arrows still navigate. Re-enable this if a multi-slide rotator
   ever needs the dots as a position indicator. */
#g-slideshow .swiper-pagination-parent-6841,
#g-slideshow [class*="swiper-pagination"] {
  display: none !important;
}

/* 2026-08-28 (ticket #36012): cap the overlaid button row so it stays well
   inside the rotator instead of running near the image edges. margin:0 auto is
   already on this selector, so a max-width just centres it. The card container
   also carries .g-grid, and `#g-slideshow .g-grid { max-width:1600px!important;
   width:100%!important }` (rescoped from the old #g-utility rule) would otherwise
   win - so this needs !important too, and it does at higher specificity
   (1,2,0 > 1,1,0). Desktop/tablet only; the <=560px block flows full width. */
@media (min-width: 561px) {
  #g-slideshow .ql-united .g-blockcontent-subcontent {
    max-width: 1160px !important;
    width: 100% !important;
  }
}

/* 2026-08-28 (ticket #36012): the hero title badge was painting its #6B5137
   background the full width of its particle wrapper (Gantry gives .g-particle
   width:100%), with only the text right-aligned inside. Shrink the badge box
   to its text and push it to the right corner so the brown is just behind the
   words, not a full-width bar. */
.gala-hero-title {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

/* ============================================================================
   2026-08-31 (ticket #36012) - event date line under the hero title badge
   ----------------------------------------------------------------------------
   The date was added to particle custom-2464 as a bare <p> with no class and no
   rule, so it inherited #g-slideshow's white color, spanned the full width of
   the .gala-hero-title-block overlay and aligned left - landing as white text
   over the top-left navigation. It now carries class .gala-hero-date and is
   styled as a second solid #6B5137 bar stacked flush under the title badge:
   same right-edge alignment (margin-left:auto), same rounded inner corner,
   white text. Body font (Lato), not the Dancing Script of the title, so the
   date stays legible at small size. Scoped to #g-slideshow to beat the
   `#g-slideshow { color:#fff }` and theme font rules on specificity. */
#g-slideshow .gala-hero-date {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0 auto;
  padding: 0.5em 0.9em;
  background: #6B5137;
  color: #fff;
  font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.72rem, 1.7vw, 1rem);
  line-height: 1.35;
  text-align: right;
  border-radius: 0 0 0 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
@media (max-width: 560px) {
  #g-slideshow .gala-hero-date {
    font-size: 0.72rem;
    padding: 0.4em 0.7em;
  }
}

/* ============================================================================
   2026-08-31 (ticket #36012) - date INSIDE the title box (follow-up request)
   ----------------------------------------------------------------------------
   Client follow-up: "just make it appear below the anniversary gala title in
   the same box." The title + date are now wrapped in .gala-hero-box (particle
   custom-2464). Move the solid #6B5137 badge - rounded inner corner - shadow
   onto that wrapper so both lines share ONE box, and strip the per-element
   backgrounds that made them read as two separate stacked bars. Padding is set
   in rem on the wrapper (the old 0.35em on .gala-hero-title resolved against
   the huge title font; on the wrapper em would be tiny). */
#g-slideshow .gala-hero-box {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 0.75rem 1.25rem;
  background: #6B5137;
  border-radius: 0 0 0 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
#g-slideshow .gala-hero-box .gala-hero-title {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: auto;
  max-width: none;
}
#g-slideshow .gala-hero-box .gala-hero-date {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin: 0.2em 0 0;
  width: auto;
}
@media (max-width: 560px) {
  #g-slideshow .gala-hero-box {
    padding: 0.55rem 0.85rem;
  }
}

/* ============================================================================
   2026-08-31 (ticket #36012) - date on ONE line + more gap under the title
   ----------------------------------------------------------------------------
   Follow-up: "make the sub text appear in one line and add a bit more space
   between the main title and the sub text." The <br /> between the time and
   "Larkfield" was removed in particle custom-2464 (now a " middot " separator);
   bump the top margin on .gala-hero-date so it drops a little lower under the
   title. Supersedes the 0.2em margin from the "date inside the box" pass. */
#g-slideshow .gala-hero-box .gala-hero-date {
  margin-top: 0.55em;
  white-space: nowrap;
}
@media (max-width: 480px) {
  #g-slideshow .gala-hero-box .gala-hero-date {
    white-space: normal;
    font-size: 0.68rem;
  }
}