/* ============================================================
   SUNNYBANK — FUNERAL GUIDE (MAGAZINE LAYOUT)
   External CSS — Scoped to .sb-ui.sb-funeral-guide-scope
   Palette: Option 2 (Soft Neutral Funeral)
============================================================ */

.sb-ui.sb-funeral-guide-scope {
    --sb-green:#4A6655;
    --sb-soft:#FAF9F7;       /* warm soft neutral */
    --sb-accent:#C9B8A9;     /* warm beige accent */
    --sb-text:#2C2C2C;
    --sb-shadow:0 12px 32px rgba(0,0,0,0.08);
    --sb-radius:18px;

    max-width:1400px;
    margin:0 auto;
    padding:60px 20px 90px;
    background:var(--sb-soft);
    color:var(--sb-text);
    font-family:"Lato",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    line-height:1.85;
    box-sizing:border-box;
}

.sb-ui.sb-funeral-guide-scope * {
    box-sizing:border-box;
}

/* ============================================================
   HEADER
============================================================ */

.sb-fg-header{
    text-align:center;
    margin:0 auto 40px;
    max-width:760px;
}
.sb-fg-kicker{
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:.78rem;
    color:var(--sb-green);
    margin-bottom:10px;
}
.sb-fg-header h1{
    font-family:"Playfair Display",serif;
    font-size:2.4rem;
    letter-spacing:-0.03em;
    margin:0 0 10px;
    color:var(--sb-green);
}
.sb-fg-sub{
    font-size:1.02rem;
    opacity:.9;
}

/* ============================================================
   INTRO GRID
============================================================ */

.sb-fg-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:flex-start;
    margin-bottom:50px;
}

.sb-fg-intro-card{
    background:#fff;
    border-radius:var(--sb-radius);
    padding:26px 24px 22px;
    box-shadow:var(--sb-shadow);
}
.sb-fg-intro-card p{
    margin:0 0 10px;
}
.sb-fg-tagline{
    font-style:italic;
    color:var(--sb-green);
    margin-top:4px;
}

.sb-fg-side{
    display:flex;
    flex-direction:column;
    gap:20px;
}
.sb-fg-side-card{
    background:#fff;
    border-radius:var(--sb-radius);
    padding:18px 18px 16px;
    box-shadow:var(--sb-shadow);
    font-size:.92rem;
}
.sb-fg-side-card h3{
    font-family:"Playfair Display",serif;
    font-size:1.1rem;
    margin:0 0 6px;
    color:var(--sb-green);
}
.sb-fg-pill-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:6px 0 0;
    padding:0;
    list-style:none;
}
.sb-fg-pill-list li{
    background:rgba(74,102,85,0.08);
    border-radius:999px;
    padding:4px 10px;
    font-size:.78rem;
    white-space:nowrap;
}

/* ============================================================
   IMAGE PLACEHOLDER STYLE
============================================================ */

.sb-fg-img-placeholder{
    background:#E8E5E1;
    border:2px dashed #BEB5AC;
    border-radius:var(--sb-radius);
    padding:50px 20px;
    text-align:center;
    font-size:1rem;
    color:#6B655E;
    font-style:italic;
}

/* ============================================================
   FULL-WIDTH IMAGE BLOCK
============================================================ */

.sb-fg-fullwidth-img{
    width:100%;
    margin:40px 0;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,0.12);
}

/* ============================================================
   SECTION TITLES
============================================================ */

.sb-fg-section{
    margin-bottom:50px;
}
.sb-fg-eyebrow{
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.75rem;
    color:rgba(44,44,44,0.6);
    margin-bottom:8px;
}
.sb-fg-section h2{
    font-family:"Playfair Display",serif;
    font-size:1.6rem;
    margin:0 0 10px;
    color:var(--sb-green);
}
.sb-fg-section-lede{
    font-weight:600;
    margin-bottom:8px;
}

/* ============================================================
   TWO-COLUMN LAYOUT
============================================================ */

.sb-fg-two-col{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(0,1.3fr);
    gap:26px;
    align-items:flex-start;
    margin-bottom:30px;
}

.sb-fg-list{
    padding-left:18px;
    margin:0;
}
.sb-fg-list li{
    margin-bottom:4px;
}

.sb-fg-note{
    font-size:.9rem;
    opacity:.85;
    margin-top:6px;
}

/* ============================================================
   IMAGE CARD
============================================================ */

.sb-fg-image-card{
    background:#fff;
    border-radius:var(--sb-radius);
    padding:16px 16px 14px;
    box-shadow:var(--sb-shadow);
    font-size:.9rem;
}
.sb-fg-image-card strong{
    display:block;
    margin-bottom:4px;
    color:var(--sb-green);
}

/* ============================================================
   EDITORIAL BLOCK
============================================================ */

.sb-fg-editorial{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:30px;
    margin:50px 0;
    align-items:center;
}
.sb-fg-editorial.reverse{
    grid-template-columns:1fr 1.2fr;
}

.sb-fg-editorial-img .sb-fg-img-placeholder{
    height:380px;
}

.sb-fg-editorial-text blockquote{
    font-family:"Playfair Display",serif;
    font-size:1.6rem;
    line-height:1.4;
    color:var(--sb-green);
    margin:0 0 10px;
}
.sb-fg-editorial-text p{
    margin:0;
    opacity:0.9;
}

/* ============================================================
   COLLAGES
============================================================ */

.sb-fg-collage-3,
.sb-fg-collage-2{
    display:grid;
    gap:14px;
    margin:30px 0;
}
.sb-fg-collage-3{
    grid-template-columns:1fr 1fr 1fr;
}
.sb-fg-collage-2{
    grid-template-columns:1fr 1fr;
}
.sb-fg-collage-3 .sb-fg-img-placeholder,
.sb-fg-collage-2 .sb-fg-img-placeholder{
    height:260px;
}

/* ============================================================
   CTA BLOCK
============================================================ */

.sb-fg-cta{
    margin:40px 0;
    background:#fff;
    border-radius:var(--sb-radius);
    padding:24px 22px;
    box-shadow:var(--sb-shadow);
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:24px;
    align-items:center;
}

.sb-fg-cta h2{
    font-family:"Playfair Display",serif;
    font-size:1.5rem;
    margin:0 0 6px;
    color:var(--sb-green);
}
.sb-fg-cta p{
    margin:0 0 4px;
}
.sb-fg-cta-meta{
    font-size:.9rem;
    opacity:.9;
}

.sb-fg-cta-buttons{
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:right;
    font-size:.9rem;
}
.sb-fg-btn-primary,
.sb-fg-btn-ghost{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:9px 18px;
    border-radius:999px;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:all .2s ease;
    white-space:nowrap;
}
.sb-fg-btn-primary{
    background:var(--sb-green);
    color:#fff;
}
.sb-fg-btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 18px rgba(0,0,0,0.16);
}
.sb-fg-btn-ghost{
    background:transparent;
    border-color:rgba(0,0,0,0.16);
    color:var(--sb-text);
}
.sb-fg-btn-ghost:hover{
    background:rgba(0,0,0,0.04);
}

/* ============================================================
   FAQ
============================================================ */

.sb-fg-faq{
    margin:50px 0 0;
}
.sb-fg-faq h2{
    font-family:"Playfair Display",serif;
    font-size:1.4rem;
    margin:0 0 12px;
    color:var(--sb-green);
}
.sb-fg-faq-item{
    margin-bottom:14px;
    background:#fff;
    border-radius:var(--sb-radius);
    padding:14px 16px 12px;
    box-shadow:var(--sb-shadow);
    font-size:.95rem;
}
.sb-fg-faq-item strong{
    display:block;
    margin-bottom:4px;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width:980px){
    .sb-fg-grid,
    .sb-fg-two-col,
    .sb-fg-cta{
        grid-template-columns:1fr;
    }
    .sb-fg-cta-buttons{
        text-align:left;
        align-items:flex-start;
    }
    .sb-fg-collage-3{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .sb-fg-editorial,
    .sb-fg-editorial.reverse{
        grid-template-columns:1fr;
    }
    .sb-fg-fullwidth-img .sb-fg-img-placeholder{
        height:320px;
    }
}

@media (max-width:720px){
    .sb-ui.sb-funeral-guide-scope{
        padding:40px 16px 60px;
    }
    .sb-fg-header h1{
        font-size:2rem;
    }
    .sb-fg-collage-3{
        grid-template-columns:1fr 1fr;
    }
    .sb-fg-fullwidth-img .sb-fg-img-placeholder{
        height:260px;
    }
}

@media (max-width:480px){
    .sb-fg-collage-3,
    .sb-fg-collage-2{
        grid-template-columns:1fr;
    }
}

/* ============================================================
   SUNNYBANK — FUNERAL GUIDE
   CUSTOM TRIBUTE COLLAGE (Exclusive Styling)
   Applies ONLY inside the .sb-fg-collage-3 area
============================================================ */

.sb-ui.sb-funeral-guide-scope .sb-fg-collage-3 .sb-fg-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sb-ui.sb-funeral-guide-scope .sb-fg-collage-3 img {
    width: 70%;
    height: 220px;
    object-fit: cover;
    border-radius: 28px;

    -webkit-mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 38%,
        rgba(0,0,0,0) 92%
    );
    mask-image: radial-gradient(
        ellipse at center,
        rgba(0,0,0,1) 38%,
        rgba(0,0,0,0) 92%
    );

    box-shadow:
        0 25px 45px rgba(0,0,0,0.15),
        0 0 0 18px rgba(250,249,247,0.96);

    background: #FAF9F7;
    transition: transform .25s ease, box-shadow .25s ease;
}

.sb-ui.sb-funeral-guide-scope .sb-fg-collage-3 img:hover {
    transform: translateY(-4px);
    box-shadow:
        0 35px 65px rgba(0,0,0,0.18),
        0 0 0 22px rgba(250,249,247,1);
}

/* ============================================================
   SUNNYBANK — Funeral Guide Divider (Full-Width Floral Line)
============================================================ */

.sb-ui.sb-funeral-guide-scope .sb-fg-divider {
    width: 100%;
    height: 40px;
    margin: 60px auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 420px auto;
    opacity: 0.75;

    background-image: url("data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' width='420' height='40'>
<g fill='none' stroke='%23C9B8A9' stroke-width='2' stroke-linecap='round'>
<path d='M0 20 C40 10, 60 30, 100 20' />
<circle cx='50' cy='20' r='3' fill='%23C9B8A9' />
<circle cx='80' cy='20' r='3' fill='%23C9B8A9' />
<circle cx='210' cy='20' r='4' fill='%234A6655' />
<circle cx='210' cy='20' r='10' stroke='%23C9B8A9' stroke-width='2'/>
<path d='M200 20 L190 20' />
<path d='M220 20 L230 20' />
<path d='M320 20 C360 10, 380 30, 420 20' />
<circle cx='340' cy='20' r='3' fill='%23C9B8A9' />
<circle cx='370' cy='20' r='3' fill='%23C9B8A9' />
</g>
</svg>");
}

@media (max-width: 768px) {
    .sb-ui.sb-funeral-guide-scope .sb-fg-collage-3 img {
        width: 85%;
        height: 200px;
        border-radius: 24px;
    }
}

/* ============================================================
   FIX — Editorial Image should match placeholder exactly
   (ONLY applies to the tied-sheaves editorial image)
============================================================ */

.sb-ui.sb-funeral-guide-scope .sb-fg-editorial-img img {
    width: 100%;
    height: 380px;     /* exact placeholder size */
    object-fit: cover;
    border-radius: var(--sb-radius);
    display: block;
}
/* ============================================================
   FIX — Full-width images: force 200px height + full width
   (Does NOT affect collage or editorial images)
============================================================ */

.sb-ui.sb-funeral-guide-scope .sb-fg-fullwidth-img {
    width: 100%;
    height: 200px;           /* container height */
    overflow: hidden;        /* crop overflow */
    border-radius: var(--sb-radius);
}

.sb-ui.sb-funeral-guide-scope .sb-fg-fullwidth-img img.sb-fg-img {
    width: 100%;
    height: 100%;            /* stretch to container height */
    object-fit: cover;       /* crop gracefully */
    display: block;
}
/* ============================================================
   FIX — FULLWIDTH HERO IMAGES (not collage, not editorial)
   Force 100% width + fixed height + crop
============================================================ */

.sb-ui.sb-funeral-guide-scope .sb-fg-fullwidth-img {
    width: 100%;
    height: 200px;                 /* FINAL: your target height */
    border-radius: var(--sb-radius);
    overflow: hidden;              /* crop extras */
    box-shadow: var(--sb-shadow);
}

.sb-ui.sb-funeral-guide-scope .sb-fg-fullwidth-img img.sb-fg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* crop cleanly */
    display: block;
}



/* ============================================================
   FIX — EDITORIAL IMAGES (the side-by-side ones)
   Keep their original placeholder layout height
============================================================ */

.sb-ui.sb-funeral-guide-scope .sb-fg-editorial-img {
    width: 100%;
    height: 380px;                 /* matches original placeholder */
    border-radius: var(--sb-radius);
    overflow: hidden;
    box-shadow: var(--sb-shadow);
}

.sb-ui.sb-funeral-guide-scope .sb-fg-editorial-img img.sb-fg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* ============================================================
   DO NOT TOUCH COLLAGE IMAGES (leave them as-is)
============================================================ */

.sb-ui.sb-funeral-guide-scope .sb-fg-collage-3 img.sb-fg-img,
.sb-ui.sb-funeral-guide-scope .sb-fg-collage-custom img.sb-fg-img {
    height: 260px;                 /* original size */
    width: 100%;
    object-fit: cover;
    border-radius: var(--sb-radius);
}
/* ============================================================
   UNIVERSAL IMAGE RESET — stops WP theme from breaking sizing
============================================================ */
.sb-ui.sb-funeral-guide-scope img.sb-fg-img {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
}



/* ============================================================
   FULLWIDTH HERO — ALWAYS SHOW, ALWAYS STRETCH
============================================================ */
.sb-ui.sb-funeral-guide-scope .sb-fg-fullwidth-img {
    width: 100%;
    height: 200px;                /* your required height */
    overflow: hidden;
    border-radius: var(--sb-radius);
    position: relative;
}

.sb-ui.sb-funeral-guide-scope .sb-fg-fullwidth-img img.sb-fg-img {
    height: 100% !important;      /* FIX: force display */
    width: 100% !important;
    object-fit: cover;
    object-position: center;
}



/* ============================================================
   EDITORIAL IMAGES (side-by-side feature image)
============================================================ */
.sb-ui.sb-funeral-guide-scope .sb-fg-editorial-img {
    width: 100%;
    height: 380px; 
    overflow: hidden;
    border-radius: var(--sb-radius);
    position: relative;
}

.sb-ui.sb-funeral-guide-scope .sb-fg-editorial-img img.sb-fg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}



/* ============================================================
   COLLAGE IMAGES — DO NOT TOUCH (leave as-is)
============================================================ */
.sb-ui.sb-funeral-guide-scope .sb-fg-collage-3 img.sb-fg-img,
.sb-ui.sb-funeral-guide-scope .sb-fg-collage-custom img.sb-fg-img {
    height: 260px !important;
    width: 100% !important;
    object-fit: cover;
    border-radius: var(--sb-radius);
}