/* ══════════════════════════════════════════════════════════════════════
   gctanimate.css — GCT Ministries
   ══════════════════════════════════════════════════════════════════════
   The "gctanimate" hero from the original gctministries.org homepage:
   scrolling photo collage, purple fade, animated title (gctanimate-text.html),
   GIVING / EVENTS buttons and the Bishop & First Lady photo.

   Every rule below was taken from the original site's stylesheets
   (inline <style> blocks of gct-home-page.html, full-img-back2.css,
   gctstyle.css, styles.css, boilerplate.css) in their original order, and
   scoped under .gcta so none of it can touch the rest of the page — and
   nothing on the rest of the page can change it.

   Loaded by index.php only when the admin has switched the home page hero
   to "GCT Animate".
   ══════════════════════════════════════════════════════════════════════ */

/* Base resets the original page applied to everything (scoped). */
.gcta *{ margin:0; padding:0; box-sizing:border-box; }
.gcta img{ border:0; vertical-align:middle; display:inline; max-width:none; }
.gcta iframe{ background:none transparent; border:0; }
.gcta a, .gcta a:visited, .gcta a:hover, .gcta a:active{ color:inherit; text-decoration:none; }

.gcta .btn-row { justify-content: center; align-items: center; gap: 16px; margin-left: auto; margin-right: auto; float: none; position: relative; z-index: 1000; pointer-events: auto; padding-left: 45px; margin-top: 0px !important; display: none !important; }
.gcta .btn { padding: 0.75rem 1.9rem; border-radius: 999px; border: 2px solid rgb(255, 255, 255); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; cursor: pointer; outline: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s; }
.gcta .btn:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px; }
.gcta .btn:active { transform: translateY(0px); box-shadow: none; }
.gcta .btn-outline-white { background-color: transparent; color: rgb(255, 255, 255); }
.gcta .btn-cutout { background-color: rgb(255, 255, 255); border-color: rgb(255, 255, 255); color: white; background-image: var(--page-bg); background-clip: text; }
@media only screen and (max-width: 715px) {
  .gcta .btn-row { margin-top: -370px !important; margin-left: -50px !important; display: block !important; }
}
.gcta .btn-row { }
@media only screen and (max-width: 3000px) {
  .gcta .btn-row { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: -50px; margin-left: auto; margin-right: auto; float: none; position: relative; z-index: 1000; pointer-events: auto; }
  .gcta .btn { padding: 0.75rem 1.9rem; border-radius: 999px; border: 2px solid rgb(255, 255, 255); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; cursor: pointer; outline: none; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s, color 0.15s; }
  .gcta .btn:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px; }
  .gcta .btn:active { transform: translateY(0px); box-shadow: none; }
  .gcta .btn-outline-white { background-color: transparent; color: rgb(255, 255, 255); }
  .gcta .btn-cutout { background-color: rgb(255, 255, 255); border-color: rgb(255, 255, 255); color: white; background-image: var(--page-bg); background-clip: text; }
}
.gcta .marquee-item, .gcta .marquee-itemb { filter: blur(5px); }
.gcta .full-img-back-hero { margin-top: -100px !important; }
.gcta .heropnghero-image-wrap { align-self: flex-end; display: flex; align-items: flex-end; justify-content: flex-end; margin-top: 0px !important; }
@media (max-width: 900px) {
  .gcta .heropnghero-image-wrap { justify-content: center; }
}
.gcta .heropnghero-image { height: auto; max-width: 100%; display: block; margin: 0px !important; }
.gcta .heropngasp-module-wrap, .gcta .heropngasp-module-wrap * { font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.gcta .heropnghero { width: 100%; max-width: 100%; margin: 0px; padding: 0px; display: flex; background: transparent; height: auto; }
.gcta .heropnghero-inner { display: flex; flex: 1 1 auto; padding-top: 40px; padding-right: 0px; padding-left: 0px; gap: 30px; align-items: center; justify-content: space-between; height: auto; padding-bottom: 0px !important; }
.gcta .heropnghero-image { max-width: 760px; width: 550px; height: auto; object-fit: contain; }
.gcta #heropngiframe { height: 600px; width: 600px !important; margin-top: 75px !important; margin-left: 75px !important; }
.gcta .heropnghero-text { flex: 1 1 50%; width: 100%; max-width: none; margin-top: -50px !important; }
.gcta .heropnghero-image-wrap { flex: 1 1 50%; display: flex; align-items: flex-end; justify-content: flex-end; margin-top: -250px; }
@media (max-width: 1400px) {
  .gcta .heropnghero-text { flex: 1 1 50%; width: 700px; margin-top: -50px !important; }
}
@media (max-width: 1150px) {
  .gcta .heropnghero-text { flex: 1 1 50%; width: 700px; height: 600px; margin-top: 50px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
  .gcta #heropngiframe { width: 700px; height: 600px; margin-left: auto !important; margin-right: auto !important; float: none !important; margin-top: -75px !important; }
}
@media (max-width: 1150px) {
  .gcta .heropnghero-inner { flex-direction: column; align-items: flex-start; padding: 28px 0px 32px; }
  .gcta .heropnghero-text { max-height: 450px; width: 700px !important; margin-top: 0px !important; }
  .gcta #heropngiframe { width: 700px !important; height: 600px !important; margin-left: auto !important; margin-right: auto !important; float: none !important; }
  .gcta .heropnghero-image-wrap { width: 100%; justify-content: center; }
  .gcta .heropnghero-image { max-width: 90%; margin-top: 0px; }
}
@media (max-width: 750px) {
  .gcta .heropnghero-text { flex: 1 1 90%; height: 200px; width: 90% !important; max-width: 500px !important; margin-top: 50px !important; }
  .gcta #heropngiframe { width: 90%; max-width: 500px; height: auto; }
  .gcta .heropnghero-image { max-width: 90%; min-width: 400px; margin-top: -250px; }
}
@media (max-width: 715px) {
  .gcta .heropnghero-text { flex: 1 1 90%; height: 200px; text-align: center; width: 90% !important; max-width: 90% !important; margin-top: 50px !important; margin-left: auto !important; margin-right: auto !important; }
  .gcta #heropngiframe { display: block; width: 400px; max-width: 400px; height: auto; margin: 0px auto; }
  .gcta .heropnghero-image { max-width: 90%; min-width: 400px; margin-top: -350px; }
  .gcta .heropngasp-module-wrap { width: 100%; margin-top: -150px; }
}
@media (max-width: 715px) {
  .gcta .heropnghero-text { flex: 1 1 80%; height: auto; max-height: 0px; text-align: center; width: 90% !important; max-width: 90% !important; margin-top: 50px !important; margin-left: auto !important; margin-right: auto !important; }
  .gcta #heropngiframe { display: block; width: 80%; max-width: 90%; height: auto; margin: 0px auto; }
  .gcta .heropnghero-image { max-width: 100%; min-width: 400px; margin-left: 5%; margin-top: 250px !important; }
  .gcta .heropngasp-module-wrap { width: 90%; }
}
.gcta .full-img-back-hero { position: relative; width: 100%; overflow: hidden; background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; height: auto; }
.gcta .full-img-back-hero-html { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gcta .full-img-back-hero-media { position: absolute; inset: 0px; z-index: 1; pointer-events: none; }
.gcta .full-img-back-hero-overlay { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; pointer-events: none; }
.gcta .full-img-back-hero-content { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 0px; width: 70%; max-width: 1400px; margin: 0px auto; display: flex; justify-content: center; height: auto; }
.gcta .full-img-back-hero-content > * { width: 70%; height: auto; }
.gcta .full-img-back-hero-inner { width: 100%; min-height: auto; display: flex; align-items: center; justify-content: center; background-color: transparent !important; }
@media (max-width: 1300px) {
  .gcta .full-img-back-hero-content { width: 70%; max-width: 100%; margin: 0px auto; }
}
@media (max-width: 715px) {
  .gcta .full-img-back-hero-content { width: 90%; max-width: 100%; margin: 0px auto; }
  .gcta .full-img-back-hero-content > * { width: 100%; }
}
.gcta .full-img-back-hero { position: relative; overflow: hidden; }
.gcta .full-img-back-hero-iframe-bg { position: absolute; inset: 0px; z-index: 0; }
.gcta .full-img-back-hero-html { position: relative; z-index: 1; }
.gcta .full-img-back-hero-media { position: absolute; inset: 0px; z-index: 2; pointer-events: none; }
.gcta .full-img-back-hero-content { position: relative; z-index: 3; }
@media (min-width: 716px) {
  .gcta .full-img-back-hero-content { width: 70% !important; }
}
.gcta .marquee-grid { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 0px; padding: 0px; background: rgb(47, 17, 86); }
.gcta .marquee-inner { display: inline-flex; gap: 0px; white-space: nowrap; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: var(--duration, 40s); animation-play-state: paused; }
.gcta .scroll-left { animation-name: marquee-left; }
.gcta .scroll-right { animation-name: marquee-right; }
.gcta .marquee-item { width: 300px; height: 300px; flex-shrink: 0; }
.gcta .marquee-itemb { width: 500px; height: 500px; flex-shrink: 0; }
.gcta .marquee-itemb img { width: 100%; height: 100%; object-fit: cover; }
.gcta .marquee-item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 715px) {
  .gcta .marquee-inner { animation-duration: 10s !important; }
  .gcta .full-img-back-hero-media { opacity: 0.8; }
}
.gcta .heropnghero { margin-top: 50px; }
@media (max-width: 715px) {
  .gcta .full-img-back-hero-media { }
}
@keyframes marquee-left { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-right { 
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0px); }
}

/* ── GCT Ministries adjustments ────────────────────────────────────────
   The original pulled the banner up 100px under its old header; here it
   sits directly under the site's nav bar instead. */
.gcta .full-img-back-hero{ margin-top: 0 !important; }
.gcta{ --page-bg: linear-gradient(transparent, transparent); }
.gcta .gcta__admin{ z-index: 50; }
/* Breakpoints changed from the original on request (2026-10-03):
     • the tablet layouts that used to start at 1100px / 1000px now start at 1150px,
       so 1150px and below look like 950px did;
     • the phone layout that used to start at 650px / 500px now starts at
       715px, so 715px–515px look exactly like 450px did.
   (gctanimate-text.html hides its own buttons in that same range, as it
   did at 450px, so the buttons are never shown twice.) */

/* 75px less space above the content than the original (150px → 75px). */
.gcta .full-img-back-hero-content{ padding-top: 75px; }

/* Admin-only GIVING / EVENTS button editor. */
.gcta__btnedit{ position: absolute; right: 18px; bottom: 64px; z-index: 60; width: min(420px, calc(100vw - 36px));
  background: #fff; color: #17101F; border-radius: 10px; padding: 16px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
  font: 14px/1.4 'Barlow', system-ui, sans-serif; text-align: left; }
.gcta__btnedit[hidden]{ display: none; }
.gcta__btnedit h4{ margin: 0 0 4px; font: 700 15px/1.2 'Barlow', system-ui, sans-serif; color: #2F1156; }
.gcta__btnedit p{ margin: 0 0 12px; font-size: 12px; color: #5F5A66; }
.gcta__btnedit fieldset{ border: 1px solid #E4E1E8; border-radius: 8px; padding: 10px 12px 12px; margin: 0 0 10px; }
.gcta__btnedit legend{ padding: 0 6px; font: 700 11px/1 'Barlow', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #2F1156; }
.gcta__btnedit label{ display: block; font-size: 12px; font-weight: 600; margin: 6px 0 3px; }
.gcta__btnedit input[type=text]{ width: 100%; padding: 8px 10px; border: 1px solid #D9D4DF; border-radius: 6px; font: 14px/1.2 'Barlow', system-ui, sans-serif; }
.gcta__btnedit .gcta__nt{ display: flex; align-items: center; gap: 6px; font-weight: 500; margin-top: 8px; }
.gcta__btnedit__act{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.gcta__btnedit__act button{ font: 600 13px/1 'Barlow', system-ui, sans-serif; padding: 9px 14px; border-radius: 6px; border: 1px solid #D9D4DF; background: #fff; color: #2F1156; cursor: pointer; }
.gcta__btnedit__act button.is-primary{ background: #2F1156; border-color: #2F1156; color: #fff; }
.gcta__admin .gcta__editbtn{ font: 600 12px/1 'Barlow', system-ui, sans-serif; padding: 9px 14px; border-radius: 8px; border: 0; cursor: pointer; background: #fff; color: #2F1156; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }

/* ── Phones and small tablets (715px and below) ─────────────────────────
   The original phone layout placed the buttons and photo with fixed
   negative margins (-370px, -50px, +250px …) that only lined up at one
   exact width; anywhere else the title ran over the buttons and things
   sat off-centre. Here everything simply stacks and centres instead:
   the title frame takes the animation's own 16:10 shape, so its height
   always matches the artwork, and the buttons and photo follow it. */
@media (max-width: 715px) {
  .gcta .full-img-back-hero-content{ width: 100% !important; padding-left: 16px; padding-right: 16px; }
  .gcta .full-img-back-hero-content > *{ width: 100% !important; }
  .gcta .heropngasp-module-wrap{ width: 100% !important; margin: 0 auto !important; }
  .gcta .heropnghero-inner{ flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 24px !important; padding: 8px 0 0 !important; }
  .gcta .heropnghero-text{ flex: 0 0 auto !important; width: 100% !important; max-width: 560px !important; height: auto !important; max-height: none !important;
                           margin: 0 auto !important; text-align: center !important; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .gcta .heropnghero-text > center{ width: 100%; display: block; }
  .gcta #heropngiframe{ display: block !important; width: 100% !important; max-width: 560px !important; height: auto !important;
                        aspect-ratio: 1920 / 1200; margin: 0 auto !important; float: none !important; }
  .gcta .btn-row{ display: flex !important; flex-wrap: wrap; justify-content: center !important; align-items: center; gap: 14px !important;
                  margin: 0 auto !important; padding: 0 !important; position: relative; z-index: 5; }
  .gcta .heropnghero-image-wrap{ width: 100% !important; margin: 0 auto !important; display: flex !important; justify-content: center !important; align-items: flex-end !important; }
  .gcta .heropnghero-image{ width: 100% !important; max-width: 480px !important; min-width: 0 !important; margin: 0 auto !important; }
}

/* Admin controls inside this banner: undo the banner's "no padding on
   anything" reset so they look the same as on the Standard hero. */
.gcta .gct-heroswitch{ padding: 4px; }
.gcta .gct-heroswitch small{ padding: 0 8px; }
.gcta .gct-heroswitch__b{ padding: 8px 12px; }
.gcta .gct-heroauto{ padding: 6px 10px; }
.gcta .gct-heroauto__sel{ padding: 6px 8px; }