/* ==========================================================================
   ChristLife page  —  St. Patrick Catholic Church, Council Bluffs
   Ticket #36044

   Delivered by the Raw Tags module "ChristLife — CSS/JS", which is assigned to
   the ChristLife menu item only. This file therefore loads on that one page and
   on no other, so the few layout rules below are safe to leave unscoped.
   ========================================================================== */

.cl-page {
    --cl-green:        #2A421D;
    --cl-green-light:  #41632F;
    --cl-yellow:       #F5EE31;
    --cl-tint:         #f2f3ee;
    --cl-ink:          #1c1c1c;
    --cl-white:        #ffffff;

    --cl-title-font:   'roxborough-cf-bold', 'Libre Baskerville', Georgia, serif;
    --cl-body-font:    'Montserrat', sans-serif;

    --cl-max:          1180px;
    --cl-gap:          min(4vw, 3rem);

    --cl-ease:         cubic-bezier(.22, .61, .36, 1);
    --cl-shadow:       0 .55rem 1.4rem rgba(42, 66, 29, .16);

    font-family: var(--cl-body-font);
    color: var(--cl-ink);
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Page frame
   The full-bleed bands push past the container, so the page wrapper must not
   scroll sideways. This page carries no right-hand sidebar, so the main column
   takes the whole width.
   -------------------------------------------------------------------------- */
#g-page-surround { overflow-x: hidden; }

#g-aside,
#g-sidebar { display: none !important; }

/* The 2025 theme override reserves a 5% gutter on the right of .g-content and
   none on the left, so the article wrapper sits left of the page centre. Each
   band centres on that wrapper, so the offset leaves a white strip down the
   right of every band. This page carries no sidebar, so the gutter goes.
   The theme rule uses !important at high specificity, so .g-content repeats
   here to outrank it. The media query matches the theme rule, which keeps the
   normal symmetric padding on a phone. */
@media only screen and (min-width: 50.99rem) {
    body[class*="-sub"]:not(.sponsorshippage)
    #g-container-main:has(#g-mainbar.section-padding-5, #g-aside)
    #g-mainbar.section-padding-5
    > .g-grid > .g-block > .g-content.g-content.g-content {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   Shared type
   -------------------------------------------------------------------------- */
/* clamp(), not min(), so a heading never collapses on a narrow screen. */
.cl-page h2 {
    font-family: var(--cl-title-font);
    color: var(--cl-green);
    font-size: clamp(1.5rem, 2.8vw, 2.2rem);
    line-height: 1.2;
    margin: 0 0 1rem;
}

.cl-page h3 {
    font-family: var(--cl-body-font);
    color: var(--cl-green);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin: 0 0 .5rem;
}

.cl-page p { margin: 0 0 1rem; }
.cl-page ul,
.cl-page ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.cl-page li { margin: 0 0 .45rem; }

/* Buttons ------------------------------------------------------------------ */
.cl-page .cl-btn {
    display: inline-block;
    background: var(--cl-green);
    color: var(--cl-white) !important;
    font-family: var(--cl-body-font);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-decoration: none !important;
    padding: .85rem 1.75rem;
    border: 2px solid var(--cl-green);
    border-radius: 3px;
    /* One transition list per element, so a later rule never drops a property
       another rule relies on. The hover states live in "Motion and hover". */
    transition: background .25s var(--cl-ease),
                color .25s var(--cl-ease),
                border-color .25s var(--cl-ease),
                box-shadow .25s var(--cl-ease),
                transform .25s var(--cl-ease);
}
.cl-page .cl-btn:hover,
.cl-page .cl-btn:focus {
    background: var(--cl-white);
    color: var(--cl-green) !important;
}

/* On a coloured band the button inverts. */
.cl-page .cl-band--dark .cl-btn,
.cl-page .cl-band--cta .cl-btn {
    background: var(--cl-white);
    color: var(--cl-green) !important;
    border-color: var(--cl-white);
}
.cl-page .cl-band--dark .cl-btn:hover,
.cl-page .cl-band--cta .cl-btn:hover {
    background: transparent;
    color: var(--cl-white) !important;
}

/* --------------------------------------------------------------------------
   Lede
   -------------------------------------------------------------------------- */
.cl-page .cl-lede {
    font-family: var(--cl-title-font);
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    line-height: 1.35;
    color: var(--cl-green);
    margin: 0 0 2.5rem;
}

/* --------------------------------------------------------------------------
   Full-bleed band  —  the "banner style section divider" the client asked for
   -------------------------------------------------------------------------- */
.cl-page .cl-band {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: min(7vw, 4.5rem) calc(50vw - 50%);
}

.cl-page .cl-band-inner {
    max-width: var(--cl-max);
    margin: 0 auto;
}

.cl-page .cl-band--tint { background: var(--cl-tint); }

.cl-page .cl-band--dark { background: var(--cl-green); }
.cl-page .cl-band--dark,
.cl-page .cl-band--dark p,
.cl-page .cl-band--dark li,
.cl-page .cl-band--dark h2,
.cl-page .cl-band--dark h3 { color: var(--cl-white); }

.cl-page .cl-band--cta { background: var(--cl-green-light); }
.cl-page .cl-band--cta,
.cl-page .cl-band--cta p,
.cl-page .cl-band--cta h2 { color: var(--cl-white); }

/* A band heading sits centred; the body copy under it stays left aligned. */
.cl-page .cl-band-title { text-align: center; margin-bottom: 1.5rem; }

.cl-page .cl-band--cta .cl-band-inner { max-width: 46rem; text-align: center; }

/* --------------------------------------------------------------------------
   Two-column intro:  "What is ChristLife?"  +  "Who is ChristLife for?"
   -------------------------------------------------------------------------- */
.cl-page .cl-split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cl-gap);
    align-items: flex-start;
}
.cl-page .cl-split-main  { flex: 1 1 22rem; }
.cl-page .cl-split-aside {
    flex: 0 1 29rem;
    border: 3px solid var(--cl-green-light);
    border-radius: 4px;
    padding: min(4vw, 2.25rem);
    background: var(--cl-white);
    transition: box-shadow .3s var(--cl-ease), border-color .3s var(--cl-ease);
}
.cl-page .cl-split-aside h2 { font-size: clamp(1.35rem, 2.3vw, 1.8rem); }
.cl-page .cl-split-aside > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Image + text row  (the ChristLife cycle graphic)
   -------------------------------------------------------------------------- */
.cl-page .cl-media {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cl-gap);
    align-items: center;
}
/* The figure clips its own image, so the hover zoom stays inside the frame. */
.cl-page .cl-media-figure {
    flex: 0 1 20rem;
    overflow: hidden;
    border-radius: 6px;
}
.cl-page .cl-media-body   { flex: 1 1 22rem; }
.cl-page .cl-media-body > *:last-child { margin-bottom: 0; }
.cl-page .cl-media-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 22rem;
    margin: 0 auto;
    transition: transform .5s var(--cl-ease);
}

/* --------------------------------------------------------------------------
   Four icon columns on the dark band
   -------------------------------------------------------------------------- */
.cl-page .cl-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(4vw, 2.5rem);
    margin-top: min(5vw, 3rem);
}
.cl-page .cl-icon-card {
    text-align: center;
    padding: 1rem .6rem;
    border-radius: 6px;
    transition: opacity .5s var(--cl-ease),
                transform .35s var(--cl-ease),
                background .3s var(--cl-ease);
}
.cl-page .cl-icon-card img {
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
    margin: 0 auto 1rem;
    transition: transform .35s var(--cl-ease);
}
.cl-page .cl-icon-card h3 {
    font-size: 1.15rem;
    letter-spacing: 0;
    margin-bottom: .5rem;
}
.cl-page .cl-icon-card p {
    font-size: .92rem;
    line-height: 1.55;
    margin: 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Schedule date cards
   Rows are styled by position, so the client can add a line inside a card,
   or copy a whole card, without touching any class name.
   -------------------------------------------------------------------------- */
.cl-page .cl-schedule-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.cl-page .cl-schedule-head h2 { margin: 0; }
.cl-page .cl-schedule-head p  { margin: 0; }

.cl-page .cl-dates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.cl-page .cl-date {
    border: 2px solid var(--cl-green-light);
    border-radius: 4px;
    padding: 1.1rem .75rem;
    text-align: center;
    transition: opacity .5s var(--cl-ease),
                transform .35s var(--cl-ease),
                border-color .28s var(--cl-ease),
                box-shadow .28s var(--cl-ease);
}
.cl-page .cl-date > p { margin: 0; }
.cl-page .cl-date > p:first-child {
    font-weight: 700;
    color: var(--cl-green);
    font-size: 1.02rem;
}
.cl-page .cl-date > p:not(:first-child) {
    font-size: .92rem;
    color: var(--cl-ink);
    margin-top: .2rem;
}

/* --------------------------------------------------------------------------
   Testimonial carousel
   Without JavaScript every quote simply stacks and stays readable.
   christlife.js turns the stack into a one-at-a-time carousel with dots.
   -------------------------------------------------------------------------- */
.cl-page .cl-carousel { position: relative; }

.cl-page .cl-quote {
    max-width: 46rem;
    margin: 0 auto 1.5rem;
    text-align: center;
}
.cl-page .cl-quote > p:first-child {
    font-family: var(--cl-title-font);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.5;
    color: var(--cl-green);
    margin: 0 0 .9rem;
}
.cl-page .cl-quote > p:not(:first-child) {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cl-green-light);
    margin: 0;
}

/* Active carousel state — applied only once the JavaScript has run. */
.cl-page .cl-carousel.cl-ready .cl-quote {
    display: none;
    margin-bottom: 0;
}
.cl-page .cl-carousel.cl-ready .cl-quote.cl-active { display: block; }

.cl-page .cl-carousel-nav {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.75rem;
}
.cl-page .cl-carousel-nav button {
    width: .7rem;
    height: .7rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(42, 66, 29, .25);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.cl-page .cl-carousel-nav button:hover { background: rgba(42, 66, 29, .5); }
.cl-page .cl-carousel-nav button[aria-current="true"] {
    background: var(--cl-green);
    transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   Spacing between the page blocks
   -------------------------------------------------------------------------- */
.cl-page .cl-section { margin: 0 0 min(7vw, 4rem); }
.cl-page .cl-band    { margin-bottom: min(7vw, 4rem); }
.cl-page > *:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 60rem) {
    .cl-page .cl-icons { grid-template-columns: repeat(2, 1fr); }
    .cl-page .cl-dates { grid-template-columns: repeat(2, 1fr); }
    .cl-page .cl-split-aside { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
    .cl-page .cl-band { padding: 2.5rem calc(50vw - 50%); }
    .cl-page .cl-media-figure { flex: 1 1 100%; }
    .cl-page .cl-schedule-head { justify-content: flex-start; }
}

@media only screen and (max-width: 30rem) {
    .cl-page .cl-icons { grid-template-columns: 1fr; }
    .cl-page .cl-dates { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Motion and hover

   Four rules govern this chapter.

   1. Motion is safe to lose. The scroll reveal hides a block only inside
      `(scripting: enabled)`, so a browser with JavaScript off, or one too old
      to know that query, shows the finished page with nothing hidden.
   2. `prefers-reduced-motion` removes every move. A visitor who asks for
      reduced motion still gets colour and shadow feedback on hover.
   3. CSS owns every visual state. christlife.js adds one class, `cl-in`, and
      controls nothing else.
   4. The hover rules sit after the reveal rules on purpose. Both have the
      same specificity, so source order decides, and hover must win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal — the initial hidden state
   The matching transition sits on each element's own rule further up, so a
   later declaration can never drop a property that another rule needs.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {

    .cl-page > .cl-lede,
    .cl-page > .cl-section {
        opacity: 0;
        transform: translateY(1.75rem);
        transition: opacity .75s var(--cl-ease), transform .75s var(--cl-ease);
    }

    /* A band carries a full-width background, so the block itself only fades.
       Sliding the colour would drag the whole band edge up the screen. The
       content inside makes the upward move instead. */
    .cl-page > .cl-band {
        opacity: 0;
        transition: opacity .8s var(--cl-ease);
    }
    .cl-page > .cl-band > .cl-band-inner {
        transform: translateY(1.75rem);
        transition: transform .8s var(--cl-ease);
    }

    /* Cards inside a grid arrive one after another. */
    .cl-page .cl-icon-card,
    .cl-page .cl-date {
        opacity: 0;
        transform: translateY(1rem);
    }

    /* christlife.js adds cl-in as each block reaches the viewport. */
    .cl-page > .cl-in,
    .cl-page .cl-icon-card.cl-in,
    .cl-page .cl-date.cl-in {
        opacity: 1;
        transform: none;
    }
    .cl-page > .cl-in > .cl-band-inner { transform: none; }
}

/* --------------------------------------------------------------------------
   Hover — colour and shadow
   These stay outside the motion query, so reduced motion keeps the feedback.
   -------------------------------------------------------------------------- */
.cl-page .cl-btn:hover,
.cl-page .cl-btn:focus-visible { box-shadow: var(--cl-shadow); }

.cl-page .cl-icon-card:hover { background: rgba(255, 255, 255, .07); }

.cl-page .cl-date:hover {
    border-color: var(--cl-green);
    box-shadow: var(--cl-shadow);
}

.cl-page .cl-split-aside:hover { box-shadow: var(--cl-shadow); }

/* A keyboard visitor must see the same target the pointer sees. */
.cl-page .cl-btn:focus-visible,
.cl-page .cl-carousel-nav button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hover — movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

    .cl-page .cl-btn:hover,
    .cl-page .cl-btn:focus-visible { transform: translateY(-2px); }
    .cl-page .cl-btn:active        { transform: translateY(0); }

    .cl-page .cl-icon-card:hover     { transform: translateY(-4px); }
    .cl-page .cl-icon-card:hover img { transform: scale(1.07); }

    .cl-page .cl-date:hover { transform: translateY(-3px); }

    .cl-page .cl-media-figure:hover img { transform: scale(1.04); }

    /* A testimonial change reads as one quote replacing another. The rule
       needs no script of its own — christlife.js already moves cl-active. */
    .cl-page .cl-carousel.cl-ready .cl-quote.cl-active {
        animation: cl-quote-in .5s var(--cl-ease) both;
    }
}

@keyframes cl-quote-in {
    from { opacity: 0; transform: translateY(.6rem); }
    to   { opacity: 1; transform: none; }
}