/* ks-native-layout.css — pass 3 (2026-10-12). Look-only rules for sections whose LAYOUT now lives in
   WordPress block settings (Columns / Grid / Row). Each block mirrors the theme rules of the class it
   replaces, minus display/flex/grid/gap, so the editor's layout controls are the only layout source.
   Selector weights match the originals they replace. */

/* About — headshot | story | ski photo (was .about-hero + body.page-id-25 overrides) */
html body .ks-about-hero{max-width:none;width:100%;margin:0 0 40px}
.ks-about-img .wp-block-image{margin:0}
.ks-about-img img{width:100%;border-radius:12px;display:block}
body .ks-about-hero .ks-about-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
body .ks-about-hero .ks-about-text{padding:0}
.ks-about-text h2{margin-top:0}
.ks-about-text h3{font-size:1.25rem}
body .ks-about-hero .ks-about-text p{font-size:1.08rem;line-height:1.85;max-width:none}
body .ks-about-hero .ks-about-text h2{font-size:2.6rem}
@media (max-width:768px){.ks-about-img{text-align:center}.ks-about-img img{max-width:400px}}

/* About — award badges (was .as-award-badge) */
.ks-award-badge{background:var(--as-cream);padding:14px 18px;border-radius:12px;border-left:4px solid var(--first-color);transition:transform .3s ease,box-shadow .3s ease}
.ks-award-badge:hover{transform:translateX(6px);box-shadow:0 4px 15px rgba(0,0,0,.08)}
.ks-award-badge .as-award-icon{font-size:1.4rem;color:var(--as-accent);flex-shrink:0}
/* Service-card icon look. The companion plugin prints the same rule in the front-end <head> only; repeated here so
   the editor canvas shows the icon as on the site (on the site the companion's later copy wins with equal values). */
.as-service-card .as-icon{font-size:2.8rem;color:var(--first-color);margin-bottom:16px;display:inline-block}

/* Services — card grid (was .as-services-grid) */
.ks-services-grid{max-width:1320px;margin:0 auto}
.ks-services-grid .as-service-card{padding:26px 18px}
.ks-services-grid .as-service-card h3{font-size:1.05rem}
.ks-services-grid .as-service-card p{font-size:.88rem;line-height:1.6}

/* Neighborhoods — featured videos (was .featured-videos-grid) */
.ks-videos-grid{max-width:860px;margin:20px auto 40px;padding:0 15px;box-sizing:border-box}
.ks-videos-grid,.ks-videos-grid + div,h3 + .ks-videos-grid{margin-left:auto;margin-right:auto}
.ks-page-body .ks-videos-grid p{font-size:.82rem}
@media (max-width:1000px){.ks-videos-grid{max-width:820px}}
@media (max-width:560px){.ks-videos-grid{max-width:500px}}

/* Services + Contact — form | map (was .as-form-map) */
.ks-form-map{margin-top:30px;margin-bottom:0}

/* FAQ — two-column question grid (was .as-faq-grid) */
.ks-faq-grid{max-width:1200px;margin:0 auto}

/* CTA button rows (About, Reviews, Services, Contact, Neighborhoods; buttons use the "White rounded" / "Glass rounded"
   block styles) are full-width flex rows, not the inline rows ks-theme.css gives other page-body Buttons */
.ks-page-body .wp-block-buttons.as-cta-buttons{display:flex;margin:0}
@media (max-width:768px){.as-cta-buttons>.wp-block-button{width:100%}}

/* Phones: the services cards stack one per row (the grid's own minimum width can't express 5 -> 1) */
@media (max-width:600px){.ks-services-grid{grid-template-columns:1fr}}

/* FAQ page — accordion look of the Details blocks (was printed inline by ks-block-editing.php) */
.ks-faq-grid details.ks-qa{display:block;border:1px solid #e5e5e5;border-radius:8px;margin:0 0 12px;padding:0;overflow:hidden;background:transparent}
.ks-faq-grid details.ks-qa>summary{display:block;list-style:none;box-sizing:border-box;width:100%;padding:16px 20px;margin:0;background:#e9e0d8;border:none;border-radius:0;font-family:Arial;font-size:16px;font-weight:600;line-height:normal;letter-spacing:normal;text-align:left;color:#4c4d4f;cursor:pointer}
.ks-faq-grid details.ks-qa>summary::-webkit-details-marker,.ks-faq-grid details.ks-qa>summary::marker{display:none;content:""}
.ks-faq-grid details.ks-qa>p.ks-qa-answer{margin:0;padding:16px 20px;color:#555;line-height:1.7}
/* A colour chosen on the Details block is the question's colour: WordPress marks the block has-background /
   has-text-color. The bar then goes transparent so the block's own background shows through (summary is slotted
   into details' shadow tree, so 'inherit' would read the slot, not the block); text colour inherits normally.
   Unset, the cream bar + grey text above stay. */
.ks-faq-grid details.ks-qa.has-background>summary{background:transparent}
.ks-faq-grid details.ks-qa.has-text-color>summary,.ks-faq-grid details.ks-qa.has-text-color>p.ks-qa-answer{color:inherit}

/* About — award badge text (icon block + one paragraph: number, line break, small grey label) */
.ks-badge-text{margin:0}
.ks-badge-label{font-size:.85rem;color:#666}

/* Reviews card (synced pattern "Google Reviews Carousel"): stars, reviewer initial, name, source */
.ks-review-stars{font-size:1.3rem;letter-spacing:2px;margin:0 0 12px}
p.ks-review-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;margin:0;padding:0}
.ks-review-name{font-weight:700;color:#4c4d4f;margin:0}
/* p. prefix: the reviewer row is a flex Group, and core resets its children's margins at equal weight */
p.ks-review-source{font-size:.75rem;color:#999;margin:0 0 0 auto}