/*
Theme Name: Studio Bonn Child
Theme URI: https://studiobonn.local
Description: Child theme for Studio Bonn with native Gutenberg page editing
Author: Studio Bonn
Template: susty-master
Version: 2.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studiobonn-child
*/

/* ----------------------------------------------------------------
   Editor canvas: stack legacy ACF grid tiles vertically so the
   block UI stays usable (frontend keeps the float grid).
----------------------------------------------------------------- */
.block-editor-block-list__layout .glr_col {
	float: none;
	width: 100%;
}

.block-editor-block-list__layout .glr_item {
	float: none;
}

.block-editor-block-list__layout .glr_item img {
	height: auto;
	max-height: 420px;
	object-fit: contain;
}

/* ----------------------------------------------------------------
   sb-grid: native Gutenberg tile grid (no custom classes needed).

   Usage on any page/post (projects included):
   - Full-width tile  -> plain Image block inside the sb-grid group
   - Half/half row    -> Columns block (50/50), one Image per column
   - Quarter row      -> Columns block with class "sb-quarters"
                         (4 columns, or fewer for partial rows)
   - Vertical tile    -> Image block with class "sb-tall"
   - Captions         -> Image block caption (native figcaption)
   - Text tiles       -> Paragraph block
   - Lightbox         -> Image linked to "Media file" (automatic)

   Heights replicate the legacy .glr_item ladders exactly:
     full  hz_4  : 240..520 mobile, 680..1080 desktop
     half  hz_2  : 240..520 mobile, 320..520 desktop
     quart hz_1  : 100..240 mobile, 140..240 desktop
     tall  vt_2  : 520..1080 mobile, 680..1080 desktop
     tall  vt_1  : 240..520 mobile, 320..520 desktop
     tall  vt_4  : natural height (legacy theme has no rule)
   Legacy switches mobile/desktop at 940px; sb-grid mirrors that.
----------------------------------------------------------------- */

/* 20px gutters: images carry their own padding (like .glr_item),
   columns stay unpaddinged so tiles inside them don't double up. */
.sb-grid .wp-block-image {
	padding: 20px;
	margin: 0;
	box-sizing: border-box;
}

.sb-grid .wp-block-column {
	padding: 0;
	box-sizing: border-box;
}

.sb-grid .wp-block-columns {
	margin-bottom: 0;
	gap: 0;
}

/* Text: legacy .glr_text look (14px, 20px inset, padded right). */
.sb-grid p,
.sb-grid .wp-block-column p,
.sb-grid figcaption {
	margin: 0;
	padding: 20px;
	padding-right: calc( 20px + 25% );
	font-size: 14px;
	line-height: 20px;
	color: inherit;
	box-sizing: border-box;
}

/* Text tiles carry the legacy .glr_text height ladder on mobile
   (100..240), auto height on desktop. */
.sb-grid p,
.sb-grid .wp-block-column p {
	min-height: 100px;
}

@media (min-width: 400px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 120px; }
}

@media (min-width: 500px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 140px; }
}

@media (min-width: 580px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 160px; }
}

@media (min-width: 660px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 180px; }
}

@media (min-width: 740px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 200px; }
}

@media (min-width: 820px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 220px; }
}

@media (min-width: 900px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 240px; }
}

@media (min-width: 940px) {
	.sb-grid p,
	.sb-grid .wp-block-column p { min-height: 0; }
}

/* Columns stack below 940px; quarter rows stay 2-up at 50%
   (legacy col_1 mobile = 50%), then go 4-up on desktop. */
@media (max-width: 939.98px) {
	.sb-grid .wp-block-columns {
		display: block;
	}

	.sb-grid .sb-quarters {
		display: flex;
		flex-wrap: wrap;
	}

	.sb-grid .sb-quarters .wp-block-column {
		flex: 0 0 50% !important;
		max-width: 50%;
	}
}

/* Tile image base: full ladder below 940px (hz_2 == hz_4 mobile). */
.sb-grid .wp-block-image img {
	width: 100%;
	height: 240px;
	object-fit: cover;
	display: block;
}

@media (min-width: 400px) {
	.sb-grid .wp-block-image img { height: 280px; }
}

@media (min-width: 500px) {
	.sb-grid .wp-block-image img { height: 320px; }
}

@media (min-width: 580px) {
	.sb-grid .wp-block-image img { height: 360px; }
}

@media (min-width: 660px) {
	.sb-grid .wp-block-image img { height: 400px; }
}

@media (min-width: 740px) {
	.sb-grid .wp-block-image img { height: 440px; }
}

@media (min-width: 820px) {
	.sb-grid .wp-block-image img { height: 480px; }
}

@media (min-width: 900px) {
	.sb-grid .wp-block-image img { height: 520px; }
}

/* Quarter tiles (hz_1): short ladder at every width. */
.sb-grid .sb-quarters .wp-block-image img {
	height: 100px;
}

@media (min-width: 400px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 120px; }
}

@media (min-width: 500px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 140px; }
}

@media (min-width: 580px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 160px; }
}

@media (min-width: 660px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 180px; }
}

@media (min-width: 740px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 200px; }
}

@media (min-width: 820px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 220px; }
}

@media (min-width: 900px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 240px; }
}

@media (min-width: 940px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 140px; }
}

@media (min-width: 1100px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 160px; }
}

@media (min-width: 1260px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 180px; }
}

@media (min-width: 1420px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 200px; }
}

@media (min-width: 1580px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 220px; }
}

@media (min-width: 1740px) {
	.sb-grid .sb-quarters .wp-block-image img { height: 240px; }
}

/* Half tiles (hz_2): medium ladder from 940px up. */
@media (min-width: 940px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image img { height: 320px; }
}

@media (min-width: 1100px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image img { height: 360px; }
}

@media (min-width: 1260px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image img { height: 400px; }
}

@media (min-width: 1420px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image img { height: 440px; }
}

@media (min-width: 1580px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image img { height: 480px; }
}

@media (min-width: 1740px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image img { height: 520px; }
}

/* Full tiles (hz_4): big ladder from 940px up. Images that are NOT
   inside a columns row are full-width tiles (WP wraps group children
   in an inner container, so :not() excludes column tiles). */
@media (min-width: 940px) {
	.sb-grid .wp-block-image:not(.wp-block-columns .wp-block-image) img { height: 680px; }
}

@media (min-width: 1100px) {
	.sb-grid .wp-block-image:not(.wp-block-columns .wp-block-image) img { height: 760px; }
}

@media (min-width: 1260px) {
	.sb-grid .wp-block-image:not(.wp-block-columns .wp-block-image) img { height: 840px; }
}

@media (min-width: 1420px) {
	.sb-grid .wp-block-image:not(.wp-block-columns .wp-block-image) img { height: 920px; }
}

@media (min-width: 1580px) {
	.sb-grid .wp-block-image:not(.wp-block-columns .wp-block-image) img { height: 1000px; }
}

@media (min-width: 1740px) {
	.sb-grid .wp-block-image:not(.wp-block-columns .wp-block-image) img { height: 1080px; }
}

/* Vertical tiles ("sb-tall" class on the Image block):
   vt_1 (in quarter rows) uses the half ladder;
   vt_2 (in half rows) uses the tall ladder;
   vt_4 (full width) keeps natural height, like legacy. */
.sb-grid .wp-block-image.sb-tall:not(.wp-block-columns .wp-block-image) img {
	height: auto;
}

.sb-grid .sb-quarters .wp-block-image.sb-tall img {
	height: 240px;
}

@media (min-width: 400px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 280px; }
}

@media (min-width: 500px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 320px; }
}

@media (min-width: 580px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 360px; }
}

@media (min-width: 660px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 400px; }
}

@media (min-width: 740px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 440px; }
}

@media (min-width: 820px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 480px; }
}

@media (min-width: 900px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 520px; }
}

@media (min-width: 940px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 320px; }
}

@media (min-width: 1100px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 360px; }
}

@media (min-width: 1260px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 400px; }
}

@media (min-width: 1420px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 440px; }
}

@media (min-width: 1580px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 480px; }
}

@media (min-width: 1740px) {
	.sb-grid .sb-quarters .wp-block-image.sb-tall img { height: 520px; }
}

@media (min-width: 940px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 680px; }
}

@media (min-width: 1100px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 760px; }
}

@media (min-width: 1260px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 840px; }
}

@media (min-width: 1420px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 920px; }
}

@media (min-width: 1580px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 1000px; }
}

@media (min-width: 1740px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 1080px; }
}

/* Tall tiles keep the mobile shared ladder below 940px (vt_2):
   520..1080. */
@media (max-width: 939.98px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 520px; }
}

@media (max-width: 939.98px) and (min-width: 400px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 600px; }
}

@media (max-width: 939.98px) and (min-width: 500px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 680px; }
}

@media (max-width: 939.98px) and (min-width: 580px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 760px; }
}

@media (max-width: 939.98px) and (min-width: 660px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 840px; }
}

@media (max-width: 939.98px) and (min-width: 740px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 920px; }
}

@media (max-width: 939.98px) and (min-width: 820px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 1000px; }
}

@media (max-width: 939.98px) and (min-width: 900px) {
	.sb-grid .wp-block-columns:not(.sb-quarters) .wp-block-image.sb-tall img { height: 1080px; }
}

/* Intro text tile: legacy text_2 replica — 50% columns row with
   .glr_text height ladder (100..240), auto height on desktop. */
.sb-grid .sb-intro .wp-block-column {
	padding: 20px;
}

/* Empty gap rows (replicas of legacy blank tiles): 40px strips. */
.sb-grid .sb-gap .wp-block-column {
	height: 40px;
}

/* ----------------------------------------------------------------
   Editor canvas: keep the grid preview compact while editing.
----------------------------------------------------------------- */
.block-editor-block-list__layout .sb-grid .wp-block-image img {
	height: auto !important;
	max-height: 420px;
	object-fit: contain;
}

.block-editor-block-list__layout .sb-grid p,
.block-editor-block-list__layout .sb-grid figcaption {
	min-height: 0;
	padding: 0;
}

.block-editor-block-list__layout .sb-grid .sb-intro {
	min-height: 0;
}
/* ================================================================
   PER-TILE HEIGHT LADDERS (authoritative — appended last)
   Every converted image tile carries sb-h1 / sb-h2 / sb-h4 /
   sb-tall / sb-auto. These rules override the structural ladders
   above; they mirror the legacy .glr_item ladders exactly.
================================================================= */

/* hz_4 (full): 240..520 mobile, 680..1080 desktop */
.sb-grid figure.wp-block-image.sb-h4 img {
	height: 240px;
}

@media (min-width: 400px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 280px; }
}

@media (min-width: 500px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 320px; }
}

@media (min-width: 580px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 360px; }
}

@media (min-width: 660px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 400px; }
}

@media (min-width: 740px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 440px; }
}

@media (min-width: 820px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 480px; }
}

@media (min-width: 900px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 520px; }
}

@media (min-width: 940px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 680px; }
}

@media (min-width: 1100px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 760px; }
}

@media (min-width: 1260px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 840px; }
}

@media (min-width: 1420px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 920px; }
}

@media (min-width: 1580px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 1000px; }
}

@media (min-width: 1740px) {
	.sb-grid figure.wp-block-image.sb-h4 img { height: 1080px; }
}

/* hz_2 (half): 240..520 mobile, 320..520 desktop */
.sb-grid figure.wp-block-image.sb-h2 img {
	height: 240px;
}

@media (min-width: 400px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 280px; }
}

@media (min-width: 500px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 320px; }
}

@media (min-width: 580px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 360px; }
}

@media (min-width: 660px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 400px; }
}

@media (min-width: 740px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 440px; }
}

@media (min-width: 820px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 480px; }
}

@media (min-width: 900px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 520px; }
}

@media (min-width: 940px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 320px; }
}

@media (min-width: 1100px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 360px; }
}

@media (min-width: 1260px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 400px; }
}

@media (min-width: 1420px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 440px; }
}

@media (min-width: 1580px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 480px; }
}

@media (min-width: 1740px) {
	.sb-grid figure.wp-block-image.sb-h2 img { height: 520px; }
}

/* hz_1 (quarter): 100..240 mobile, 140..240 desktop */
.sb-grid figure.wp-block-image.sb-h1 img {
	height: 100px;
}

@media (min-width: 400px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 120px; }
}

@media (min-width: 500px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 140px; }
}

@media (min-width: 580px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 160px; }
}

@media (min-width: 660px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 180px; }
}

@media (min-width: 740px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 200px; }
}

@media (min-width: 820px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 220px; }
}

@media (min-width: 900px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 240px; }
}

@media (min-width: 940px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 140px; }
}

@media (min-width: 1100px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 160px; }
}

@media (min-width: 1260px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 180px; }
}

@media (min-width: 1420px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 200px; }
}

@media (min-width: 1580px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 220px; }
}

@media (min-width: 1740px) {
	.sb-grid figure.wp-block-image.sb-h1 img { height: 240px; }
}

/* vt_2 (tall half): 520..1080 mobile, 680..1080 desktop */
.sb-grid figure.wp-block-image.sb-tall img {
	height: 520px;
}

@media (min-width: 400px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 600px; }
}

@media (min-width: 500px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 680px; }
}

@media (min-width: 580px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 760px; }
}

@media (min-width: 660px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 840px; }
}

@media (min-width: 740px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 920px; }
}

@media (min-width: 820px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 1000px; }
}

@media (min-width: 900px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 1080px; }
}

@media (min-width: 940px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 680px; }
}

@media (min-width: 1100px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 760px; }
}

@media (min-width: 1260px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 840px; }
}

@media (min-width: 1420px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 920px; }
}

@media (min-width: 1580px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 1000px; }
}

@media (min-width: 1740px) {
	.sb-grid figure.wp-block-image.sb-tall img { height: 1080px; }
}

/* vt_4 (vertical full): natural height */
.sb-grid figure.wp-block-image.sb-auto img {
	height: auto;
}

/* Editor canvas: compact preview */
.block-editor-block-list__layout .sb-grid figure.wp-block-image img {
	height: auto !important;
	max-height: 420px;
	object-fit: contain;
}