/* ==========================================================================
   HOME PREVIEW - Gantry outline 10 (homepage redesign sandbox)
   Scoped to .outline-10 so the live home page (outline 9) is never touched.

   Sections, in the order they render:
     1. Rotator          image only - no caption, no dark overlay
     2. Mission          centred, comfortable measure
     3. Upcoming Events  the real RokSprocket events as three circles
     4. Meet the Sisters uniform 3:4 portrait crop
     5. Joyfully Serving / Pope's Intentions
     6. Community Profiles / Connect with Us
   Removed bands: the quote rotator (module 162) and the Resources module.

   The section order is CSS flex `order`, not a layout move: the layout lives
   in the Base outline and the API refuses cross-section moves on a duplicated
   outline. Move the sections for real in the Gantry admin before this ships.
   ========================================================================== */

/* --- 1. Rotator: image only. Hiding the content layer removes both the
       caption text and its rgba(0,0,0,.25) dark overlay. --- */
.outline-10 #g-header .sprocket-features-content { display: none !important; }
.outline-10 #g-header .sprocket-features-img-container img {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The menu is absolutely positioned; the flex reorder pushes it to the top of
   the page, so anchor it back over the rotator, just below the logo. */
@media only screen and (min-width: 768px) {
    .outline-10 #g-slideshow { top: 213px; }
}

/* --- Removed bands --- */
.outline-10 #g-showcase .fwrwide { display: none !important; }         /* quote rotator (162) */
.outline-10 #g-bottom .resources-module { display: none !important; }  /* Resources for teachers */

/* ==========================================================================
   Section order
   ========================================================================== */
.outline-10 #g-page-surround { display: flex; flex-direction: column; }
.outline-10 #g-top            { order: 1; }
.outline-10 #g-slideshow      { order: 2; }
.outline-10 #g-header         { order: 3; }
.outline-10 #g-above          { order: 4; }
.outline-10 #g-showcase       { order: 5; }
.outline-10 #g-feature        { order: 6; }
.outline-10 #g-utility        { order: 7; }
.outline-10 #g-extension      { order: 8; }
.outline-10 #g-container-main { order: 9; }
.outline-10 #g-expanded       { order: 10; }
.outline-10 #g-bottom         { order: 11; }
.outline-10 #g-footer         { order: 12; }
.outline-10 #g-copyright      { order: 13; }

/* ==========================================================================
   3. Upcoming Events - three circles
   Module 164 is a RokSprocket showcase that normally shows one item at a
   time; force every item into one row and reshape each into a circle.
   ========================================================================== */
.outline-10 #g-showcase .upcomingevents {
    background-attachment: scroll !important;
    background-position: 50% 25% !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.outline-10 #g-showcase .upcomingevents .layout-showcase { background: none !important; }

.outline-10 #g-showcase .upcomingevents .sprocket-features-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
    align-items: flex-start;
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-list > li {
    display: block !important;
    position: relative !important;
    width: 240px !important;
    margin: 0 !important;
    float: none !important;
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-container {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-img-container {
    position: relative !important;
    inset: auto !important;
    display: block !important;
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-img-container img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: 0 0 20px rgba(0,0,0,.45);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-content {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: rgba(0, 62, 126, .5);
    border-radius: 50%;
    transition: transform .3s cubic-bezier(.22,.61,.36,1),
                background .3s ease-in;
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-list > li:hover img,
.outline-10 #g-showcase .upcomingevents .sprocket-features-list > li:hover .sprocket-features-content {
    transform: scale(1.05);
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-list > li:hover .sprocket-features-content {
    background: rgba(0, 62, 126, .62);
}
.outline-10 #g-showcase .upcomingevents .sprocket-features-desc { display: block !important; }
.outline-10 #g-showcase .upcomingevents .sprocket-features-desc p,
.outline-10 #g-showcase .upcomingevents .sprocket-features-desc .button,
.outline-10 #g-showcase .upcomingevents .sprocket-features-desc a { display: none !important; }
.outline-10 #g-showcase .upcomingevents .sprocket-features-desc h2,
.outline-10 #g-showcase .upcomingevents .sprocket-features-desc h3,
.outline-10 #g-showcase .upcomingevents .sprocket-features-desc h5 {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(0,0,0,.9);
    font-size: 1.45rem;
    line-height: 1.15;
    margin: 0;
}

/* Heading sits on the events photo, white for contrast. */
.outline-10 #g-showcase .events-title {
    position: relative;
    z-index: 5;
    margin-bottom: -2.5rem;
    pointer-events: none;
}
.outline-10 #g-showcase .events-title h1,
.outline-10 #g-showcase .events-title h1 .gold-title {
    color: #ffffff !important;
    text-shadow: 0 0 18px rgba(0,0,0,.85);
}

/* ==========================================================================
   4. Meet the Sisters - uniform portrait crop
   ========================================================================== */
.outline-10 #g-feature .sprocket-strips-s-item { overflow: hidden; }
.outline-10 #g-feature .sprocket-strips-s-item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
}

/* Pope's Intentions - breathing room, text vertically centred. */
.outline-10 #g-extension .imageside { padding-top: 3rem; padding-bottom: 3rem; }
.outline-10 #g-extension .flexrow > div:not(.imageside) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
}

/* ==========================================================================
   Type + spacing polish
   ========================================================================== */
.outline-10 .home-title { text-align: center; margin-bottom: 2.75rem; }
.outline-10 .home-title h1 {
    font-size: 4.5rem;
    line-height: 1.02;
    letter-spacing: .01em;
    margin: 0;
}
.outline-10 .home-title h1 .gold-title { font-size: 2.4rem; }

.outline-10 #g-above .g-content p {
    max-width: 62ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.15rem;
    line-height: 1.75;
    text-align: center;
}

.outline-10 #g-feature,
.outline-10 #g-utility,
.outline-10 #g-expanded,
.outline-10 #g-extension,
.outline-10 #g-bottom {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
}

.outline-10 #g-feature .sprocket-strips-s-title {
    font-size: 1.6rem;
    margin: .9rem 0 0;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .outline-10 .home-title { margin-bottom: 1.75rem; }
    .outline-10 .home-title h1 { font-size: 9vw; }
    .outline-10 .home-title h1 .gold-title { font-size: 5vw; }
    .outline-10 #g-feature,
    .outline-10 #g-utility,
    .outline-10 #g-expanded,
    .outline-10 #g-extension,
    .outline-10 #g-bottom {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
}

/* ==========================================================================
   Scroll reveal
   The hide is armed from JS (html.hp-armed), never from CSS alone, so if the
   script fails, errors, or is blocked the content stays visible. Each item
   fades in once as it enters the viewport.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html.hp-armed .outline-10 #g-above .g-content,
    html.hp-armed .outline-10 #g-showcase .upcomingevents .sprocket-features-list > li,
    html.hp-armed .outline-10 #g-feature .home-title,
    html.hp-armed .outline-10 #g-feature .sprocket-strips-s-block,
    html.hp-armed .outline-10 #g-utility .photo-title-text,
    html.hp-armed .outline-10 #g-utility .photo-title-subtext,
    html.hp-armed .outline-10 #g-expanded .photo-title-text,
    html.hp-armed .outline-10 #g-expanded .photo-title-subtext,
    html.hp-armed .outline-10 #g-extension .imageside,
    html.hp-armed .outline-10 #g-extension .flexrow > div:not(.imageside),
    html.hp-armed .outline-10 #g-bottom .home-title,
    html.hp-armed .outline-10 #g-bottom .sprocket-strips-item {
        opacity: 0;
        transform: translateY(1rem);
        transition: opacity .8s cubic-bezier(.22,.61,.36,1),
                    transform .8s cubic-bezier(.22,.61,.36,1);
    }
    html.hp-armed .outline-10 .hp-in {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   UPDATED UPCOMING EVENTS SECTION (module 167, position showcase-b)
   The client-approved preview band: the heading over a blurred photo, with
   three article-linked circles. While this section is in use the original
   RokSprocket band (module 164) and its heading/button modules stay hidden.
   ========================================================================== */
.outline-10 #g-showcase .events-title,
.outline-10 #g-showcase .upcomingevents,
.outline-10 #g-showcase .events-button-module { display: none !important; }

.outline-10 #g-showcase {
    position: relative;
    background-image: url('/images/stories/template/christ-the-king.jpg') !important;
    background-position: 50% 25% !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}
.outline-10 #g-showcase::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 0;
    pointer-events: none;
}
.outline-10 #g-showcase > * { position: relative; z-index: 1; }

.outline-10 #g-showcase .pvnews { padding: 3rem 5%; text-align: center; }

.outline-10 #g-showcase .pvnews-h {
    font-size: 4.5rem;
    line-height: 1.02;
    letter-spacing: .01em;
    margin: 0 0 2.75rem;
    color: #ffffff;
    text-shadow: 0 0 18px rgba(0,0,0,.85);
}
.outline-10 #g-showcase .pvnews-h .gold-title { font-size: 2.4rem; color: #ffffff; }

.outline-10 #g-showcase .pvnews-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    justify-content: center;
    align-items: flex-start;
}
.outline-10 #g-showcase .pvnews-item {
    display: block;
    position: relative;
    width: 320px;
    text-decoration: none;
}
.outline-10 #g-showcase .pvnews-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,.5);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.outline-10 #g-showcase .pvnews-cap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 62, 126, .5);
    border-radius: 50%;
    color: #ffffff;
    font-family: 'Marcellus', serif;
    font-size: 1.75rem;
    line-height: 1.15;
    text-shadow: 0 0 12px rgba(0,0,0,.9);
    transition: transform .3s cubic-bezier(.22,.61,.36,1),
                background .3s ease-in;
}
.outline-10 #g-showcase .pvnews-item:hover img,
.outline-10 #g-showcase .pvnews-item:hover .pvnews-cap { transform: scale(1.05); }
.outline-10 #g-showcase .pvnews-item:hover .pvnews-cap { background: rgba(0, 62, 126, .62); }
.outline-10 #g-showcase .pvnews-more { margin: 2rem 0 0; }

@media only screen and (max-width: 767px) {
    .outline-10 #g-showcase .pvnews-h { font-size: 9vw; }
    .outline-10 #g-showcase .pvnews-h .gold-title { font-size: 5vw; }
}

/* Reveal: the events circles are the .pvnews-item links. */
@media (prefers-reduced-motion: no-preference) {
    html.hp-armed .outline-10 #g-showcase .pvnews-item {
        opacity: 0;
        transform: translateY(1rem);
        transition: opacity .8s cubic-bezier(.22,.61,.36,1),
                    transform .8s cubic-bezier(.22,.61,.36,1);
    }
}

/* ==========================================================================
   CORRECTION: photo bands must not pad the SECTION.
   The dark overlay on "Joyfully Serving the King" (#g-utility) and
   "View All / Community Profiles" (#g-expanded) is the inner block
   .g-block.photo-title (background rgba(0,0,0,.25)), sized to its own
   content. Padding the section adds height outside that block, so the
   overlay stops short of the bottom edge. The section stays unpadded and
   the breathing room moves inside the overlay block instead.
   Overrides the section padding set in the "Type + spacing polish" block
   above for these two bands only.
   ========================================================================== */
.outline-10 #g-utility,
.outline-10 #g-expanded {
    padding-top: 0;
    padding-bottom: 0;
}
.outline-10 #g-utility .photo-title,
.outline-10 #g-expanded .photo-title {
    padding-top: 4.25rem;
    padding-bottom: 4.25rem;
}
@media only screen and (max-width: 767px) {
    .outline-10 #g-utility .photo-title,
    .outline-10 #g-expanded .photo-title {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
}

/* ==========================================================================
   TICKET #36853 - Sr. Peter Marie (CTK-Sisters), 2026-10-07
   1. "Events" now matches the "Upcoming" size in the Upcoming Events heading.
   2. A thin white ring around each event circle lifts it off the dark band.
   Scoped to .outline-10 (preview). Live homepage (outline 9) untouched.
   ========================================================================== */
.outline-10 #g-showcase .pvnews-h .gold-title {
    font-size: 4.5rem;
}
@media only screen and (max-width: 767px) {
    .outline-10 #g-showcase .pvnews-h .gold-title {
        font-size: 9vw;
    }
}
.outline-10 #g-showcase .pvnews-item img {
    box-shadow: 0 0 0 3px #ffffff, 0 0 20px rgba(0,0,0,.5);
}

/* ==========================================================================
   TICKET #36853 (cont.) - 2026-10-07 - Sr. Peter Marie
   Remove the gap between the logo band and the menu bar.
   The theme pins #g-slideshow absolute (gemini-style.css:120) and the preview
   set top:213px, which floats the menu 49px below the 164px logo band; the band
   height changes with width, so a fixed top never stays flush. Return the menu
   to the flow: flex order 2 already places it between the logo band (#g-top,
   order 1) and the rotator (#g-header, order 3), so it lands flush under the
   logo at every width.
   ========================================================================== */
.outline-10 #g-slideshow {
    position: relative;
    top: auto;
}

/* ==========================================================================
   TICKET SOL-30991 - Sr. Peter Marie (CTK-Sisters), 2026-10-30
   Preview only (.outline-10). The live home page (outline 9) is untouched.
   1. The three-circle band loses its heading and its dark photo backdrop:
      a white band with three circles, styled after the TOR reference
      (thin white inner ring, letterspaced uppercase serif, no blue tint).
   2. The "All Events" button is gone - the third circle goes to the
      Events page itself.
   3. The Community Profiles banner moves above the sister portraits, and
      the "Meet the Sisters" heading above the portraits is hidden.

   Visual order from here: circles -> banner -> portraits -> Joyfully
   Serving video -> Pope's Intentions -> Connect with Us.
   ========================================================================== */

/* --- 1. White band, no heading --- */
.outline-10 #g-showcase {
    background-image: none !important;
    background-color: #ffffff !important;
}
.outline-10 #g-showcase::before { display: none !important; }
.outline-10 #g-showcase .pvnews { padding: 3.5rem 5% 3rem; }

/* --- 2. TOR-style circles --- */
.outline-10 #g-showcase .pvnews-item img {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22) !important;
}
.outline-10 #g-showcase .pvnews-cap {
    background: rgba(0, 0, 0, .28);
    font-family: 'Marcellus', serif;
    font-size: 1.5rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}
/* thin white ring inset from the photo edge, as in the TOR reference */
.outline-10 #g-showcase .pvnews-cap::after {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    pointer-events: none;
}
.outline-10 #g-showcase .pvnews-item:hover .pvnews-cap { background: rgba(0, 0, 0, .38); }

@media only screen and (max-width: 767px) {
    .outline-10 #g-showcase .pvnews-cap { font-size: 1.15rem; }
    .outline-10 #g-showcase .pvnews-cap::after { inset: 9px; }
}

/* --- 3. Banner above the portraits, heading hidden --- */
.outline-10 #g-expanded  { order: 6; }
.outline-10 #g-feature   { order: 7; }
.outline-10 #g-utility   { order: 8; }
.outline-10 #g-extension { order: 9; }
.outline-10 #g-feature .home-title { display: none !important; }

/* ==========================================================================
   SOL-30991 follow-up - 2026-11-02 - Sr. Peter Marie
   Centre the three circles in the white band (equal white space above and
   below). The events title module is hidden but its layout block is still
   there, and .home-title carries a 44px bottom margin - so the band read
   44 + 56 = 100px above the circles and only 48px below.
   Remove the dead block and give the band equal padding: 56px each side.
   ========================================================================== */
.outline-10 #g-showcase .g-block.home-title { display: none !important; }
.outline-10 #g-showcase .pvnews { padding: 3.5rem 5%; }