/*
 * Guide pages (template-parts/page-guide.php). The content is ordinary blocks; give
 * them these classes (Block → Advanced → Additional CSS class) to style them:
 *
 *   Group    guide-section            a full-width band; add "is-shaded" for beige
 *   Para     guide-lead               larger introduction text
 *   Columns  guide-split              image beside text; add "is-reversed" to swap sides
 *   Columns  guide-steps              numbered panels (01, 02, 03 are added automatically)
 *   Columns  guide-cards              cards with an image, heading, text and link
 *   List     guide-checklist          ticks instead of bullets
 *   List     guide-downloads          download cards (file type and size are added)
 *   Details  (any, inside a section)  FAQ question and answer
 */

.guide-content{display:flex;flex-direction:column}

/* Bands */
.guide-content .guide-section{padding:64px 20px;margin:0}
.guide-content .guide-section.is-shaded{background-color:var(--beige)}
.guide-content .guide-section>*{width:100%;max-width:1120px;margin-left:auto;margin-right:auto}
.guide-content .guide-section>*+*{margin-top:1.25em}
.guide-content .guide-section>h2,.guide-content .guide-section>h3{margin-top:2em}
.guide-content .guide-section>h2:first-child,.guide-content .guide-section>h3:first-child{margin-top:0}
.guide-content h2{font-size:32px}
.guide-content h3{font-size:24px}
.guide-content p a,.guide-content li a{color:var(--action)}
.guide-content .guide-lead{font-size:20px;line-height:1.6;max-width:820px}
.guide-content .guide-kicker{color:var(--action);text-transform:uppercase;letter-spacing:.04em;font-size:14px;font-weight:500;margin-bottom:-.5em}

/* Image beside text */
/* align-items needs !important to beat core's .wp-block-columns{align-items:normal!important} */
.guide-content .guide-split{display:flex;gap:56px;align-items:center!important}
.guide-content .guide-split+.guide-split{margin-top:72px}
.guide-content .guide-split>.wp-block-column{flex:1 1 0;min-width:0}
.guide-content .guide-split.is-reversed{flex-direction:row-reverse}
.guide-content .guide-split .wp-block-image{margin:0}
.guide-content .guide-split .wp-block-image img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--large-corner)}
.guide-content .guide-split .wp-block-column>*+*{margin-top:1em}
.guide-content .guide-split h2{margin-top:0}

/* Numbered panels */
.guide-content .guide-steps{display:flex;gap:40px;counter-reset:guide-step;background:var(--beige-smoke);border-radius:var(--large-corner);padding:40px}
.guide-content .is-shaded .guide-steps{background:var(--white)}
.guide-content .guide-steps>.wp-block-column{flex:1 1 0;counter-increment:guide-step}
.guide-content .guide-steps>.wp-block-column::before{content:counter(guide-step,decimal-leading-zero);display:block;color:transparent;font-family:var(--fancy);font-size:56px;line-height:1;-webkit-text-stroke:1px var(--action);margin-bottom:16px}
.guide-content .guide-steps h3{color:var(--action);font-family:var(--bde-body-font-family);font-weight:500;font-size:18px;margin:0 0 10px}
.guide-content .guide-steps p{margin:0}

/* Cards */
.guide-content .guide-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.guide-content .guide-cards>.wp-block-column{display:flex;flex-direction:column;background:var(--white);border-radius:var(--large-corner);overflow:hidden;box-shadow:0 1px 3px rgba(54,40,29,.08)}
.guide-content .guide-cards .wp-block-image{margin:0;aspect-ratio:4/5;overflow:hidden}
.guide-content .guide-cards .wp-block-image a{display:block;height:100%}
.guide-content .guide-cards .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 400ms ease}
.guide-content .guide-cards>.wp-block-column:hover .wp-block-image img{transform:scale(1.04)}
.guide-content .guide-cards>.wp-block-column>:not(.wp-block-image){margin-left:20px;margin-right:20px}
.guide-content .guide-cards h3{font-size:20px;margin-top:20px;margin-bottom:8px}
.guide-content .guide-cards p{font-size:15px;margin-bottom:0}
.guide-content .guide-cards p:last-child{margin-top:auto;padding:16px 0 20px}
.guide-content .guide-cards p:last-child a{font-weight:500;text-decoration:none}
.guide-content .guide-cards p:last-child a::after{content:' →'}

/* Ticks */
.guide-content ul.guide-checklist{list-style:none;padding:0;margin-left:0}
.guide-content ul.guide-checklist>li{position:relative;padding-left:34px;margin:0 0 14px}
.guide-content ul.guide-checklist>li::before{content:'';position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;border:1px solid var(--action);background:no-repeat center/10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4.5 4.3 8 11 1' fill='none' stroke='%23AB8445' stroke-width='1.6'/%3E%3C/svg%3E")}

/* Downloads */
.guide-content ul.guide-downloads{list-style:none;padding:0;margin-left:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.guide-content ul.guide-downloads>li{margin:0}
.guide-content .guide-downloads__link{display:flex;flex-direction:column;justify-content:center;gap:4px;height:100%;min-height:76px;padding:14px 16px 14px 60px;position:relative;background:var(--white);border:1px solid rgba(171,132,69,.25);border-radius:var(--small-corner);color:var(--bde-body-text-color);text-decoration:none;transition:border-color 200ms ease,box-shadow 200ms ease}
.guide-content .guide-downloads__link:hover{border-color:var(--action);box-shadow:0 2px 8px rgba(54,40,29,.08)}
.guide-content .guide-downloads__link::before{content:'';position:absolute;left:16px;top:50%;width:30px;height:30px;margin-top:-15px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AB8445' stroke-width='1.3'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M12 11v6M9 14l3 3 3-3'/%3E%3C/svg%3E")}
.guide-content .guide-downloads__link--link::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AB8445' stroke-width='1.3'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.7 3.8 5.7 3.8 9s-1.3 6.3-3.8 9c-2.5-2.7-3.8-5.7-3.8-9S9.5 5.7 12 3z'/%3E%3C/svg%3E")}
.guide-content .guide-downloads__title{font-weight:500;line-height:1.3}
.guide-content .guide-downloads__meta{font-size:13px;opacity:.65}
.guide-content .guide-downloads+h3{margin-top:2em}

/* FAQ */
.guide-content .wp-block-details{background:var(--white);border:1px solid rgba(171,132,69,.25);border-radius:var(--small-corner);margin-top:10px;padding:0}
.guide-content h2+.wp-block-details,.guide-content h3+.wp-block-details{margin-top:20px}
.guide-content .wp-block-details summary{list-style:none;cursor:pointer;position:relative;padding:18px 56px 18px 20px;font-family:var(--fancy);font-size:17px;line-height:1.4}
.guide-content .wp-block-details summary::-webkit-details-marker{display:none}
.guide-content .wp-block-details summary::after{content:'';position:absolute;right:20px;top:50%;width:14px;height:14px;margin-top:-7px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23AB8445' stroke-width='1.5'/%3E%3C/svg%3E");transition:transform 250ms ease}
.guide-content .wp-block-details[open] summary::after{transform:rotate(45deg)}
.guide-content .wp-block-details summary:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.guide-content .wp-block-details>:not(summary){margin:0 20px 18px}
.guide-content .wp-block-details[open]{border-color:var(--action)}

/* Call to action */
.guide-cta{background:var(--brown-dark);color:var(--beige);text-align:center}
.guide-cta .inner{align-items:center;gap:14px;max-width:760px}
.guide-cta .guide-cta__title{color:#fff;font-size:30px;margin:0}
.guide-cta p{margin:0;opacity:.85}
.guide-cta__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.guide-cta .button-atom--secondary{color:#fff;border-color:rgba(255,255,255,.6)}

@media (max-width:1023px){
	.guide-content .guide-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.guide-content .guide-split{gap:32px}
}
@media (max-width:767px){
	.guide-content .guide-section{padding:44px 16px}
	.guide-content h2{font-size:26px}
	.guide-content h3{font-size:21px}
	.guide-content .guide-lead{font-size:18px}
	.guide-content .guide-split,.guide-content .guide-split.is-reversed{flex-direction:column;align-items:stretch}
	.guide-content .guide-split .wp-block-image img{aspect-ratio:4/3}
	.guide-content .guide-steps{flex-direction:column;gap:28px;padding:28px 22px}
	.guide-content .guide-cards{grid-template-columns:minmax(0,1fr)}
	.guide-content .guide-cards .wp-block-image{aspect-ratio:16/10}
	.guide-cta .guide-cta__title{font-size:24px}
}
