/* ============================================================================
   Reading types (inc/reading.php; loaded only on them, after site.css): articles published as pages
   (body.sd-article), the 2021 legacy landers (sd-lander), hubs (sd-hub) and dev pages (sd-internal), all
   body.sd-reading. Articles, landers and most hubs open with the title band, so they already wear the long-form
   reading layout (site.css "long-form"). This file adds what their content brings that long-form pages do not.
   Content is never edited to fit: inline styles in it are overridden here, and nothing here adds a word.
   ========================================================================= */

/* ---------------------------------------------------------------- every reading type */
/* the long-form layout keeps a column for "On this page" at its left. Most of these pages have under 3 H2s, so no
   list: the reading column is centered in the container instead (the hero still lines up with the logo) */
@media (min-width: 1061px) {
	.sd-reading.sd-longform .sd-entry:not(:has(> .sd-toc)) {
		grid-template-columns:
			[full-start] max(var(--sd-gutter), calc((100% - var(--sd-max)) / 2))
			[toc-start] minmax(48px, 1fr) [toc-end content-start] minmax(0, var(--sd-read)) [content-end] minmax(48px, 1fr)
			[wide-end] max(var(--sd-gutter), calc((100% - var(--sd-max)) / 2)) [full-end];
	}
}
/* the hero's H1 lines up with the logo as on every long-form page, whatever alignment the content wrote inline */
.sd-reading.sd-longform .sd-entry > .sd-secondary-header-color:first-child h1 { text-align: left !important; }
/* the first section under the hero opens without a divider, also when the page's colorway script sits between them */
.sd-reading.sd-longform .sd-entry > :is(.sd-toc, .sd-secondary-header-color) + script + .sd-row:has(h2) { margin-top: 0; padding-top: 48px; border-top: 0; }
/* an H3 that opens a row is that row's heading: no divider above it (long-form draws one between H3 points) */
.sd-reading.sd-longform .sd-entry .wp-block-group__inner-container > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* D3 for the 2021 copy: justified text (inline, or the old align="JUSTIFY") reads left-aligned like the rest;
   headings stay centered (site.css D3 rule) */
.sd-reading .sd-entry :is([style*="text-align: justify"], [style*="text-align:justify"], [align="justify" i]):not(h1, h2, h3, h4, h5, h6) { text-align: left !important; }
.sd-reading .sd-entry :is(p, li) { overflow-wrap: break-word; } /* a bare URL written as text wraps on a phone */
/* Bridge's Font Awesome check before a lander's H4 (the icon font is not loaded here): a check mark drawn with two
   borders in the accent (a filled shape would read as a light box to the D2 check) */
.sd-reading .sd-entry i.fa-check { display: inline-block; width: .32em; height: .62em; margin: 0 .6em 0 .15em; vertical-align: .08em; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(40deg); }
/* the landers' big Bridge-era heading classes: the column's own heading sizes */
.sd-reading .sd-entry h2.sd-fnt-01 { font: 600 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.12 var(--f-display); letter-spacing: -.02em; }
.sd-reading .sd-entry h3.sd-fnt-01 { font: 600 1.25rem/1.35 var(--f-text); letter-spacing: 0; }
/* a 2021 heading carrying the guides' intro-lead class (sd-fnt-07): drawn as the heading it is, not as a lead */
.sd-reading.sd-longform .sd-entry > .sd-row :is(h2, h3).sd-fnt-07 { max-width: none; margin: 1.6em 0 .6em; padding-left: 0; border-left: 0; font: 600 clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem)/1.12 var(--f-display); letter-spacing: -.02em; color: var(--text); }
.sd-reading .sd-entry h4.sd-fnt-02 { font: 500 12.5px/1.6 var(--f-num); color: var(--mute); white-space: pre-wrap; }
/* the hero H1 at the design's size, whatever size the content wrote inline (one 2021 essay: 48px) */
.sd-reading.sd-longform .sd-entry > .sd-secondary-header-color:first-child h1[style*="font-size"] { font-size: var(--t-h1) !important; }
/* Bridge's sub-heading paragraph (sd-font-02: uppercase, a rule at its left), in the design's mono label */
.sd-reading .sd-entry p.sd-font-02 { margin: 2.2em 0 .8em; padding-left: 12px; border-left: 1px solid var(--accent); font: 500 13px/1.5 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.sd-reading .sd-entry [style*="color: #42789d"] { color: var(--accent) !important; } /* Bridge's blue, written inline */
/* the landers' link pairs ("See full feature set!" / "See pricing!"): quiet buttons side by side; the page's one
   filled button is the CTA band's */
.sd-reading .sd-entry :is(a.sd-btnfeature-l, a.sd-btnfeature-r, a.sd-23btn-primary-r) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px;
	font: 600 15px/1 var(--f-text); text-decoration: none; white-space: nowrap;
	background: transparent; color: var(--text) !important; border: 1px solid var(--line-2);
}
.sd-reading .sd-entry :is(a.sd-btnfeature-l, a.sd-btnfeature-r, a.sd-23btn-primary-r):hover { color: var(--accent) !important; border-color: var(--accent); }
.sd-reading .sd-entry .wp-block-columns:has(a.sd-btnfeature-l, a.sd-btnfeature-r) { display: flex; flex-flow: row wrap; justify-content: center; gap: 12px; margin: 2em 0; }
.sd-reading .sd-entry .wp-block-columns:has(a.sd-btnfeature-l, a.sd-btnfeature-r) > .wp-block-column { flex: none !important; flex-basis: auto !important; width: auto; margin: 0; }
.sd-reading .sd-entry .wp-block-columns:has(a.sd-btnfeature-l, a.sd-btnfeature-r) p { margin: 0; }
/* D5 on these pages too: the in-content trial buttons stay in the HTML, hidden; the theme's CTA band closes the page */
.sd-reading.sd-longform .sd-entry p:has(> a.sd-btn-sm-alt[href*="free-trial"]),
.sd-reading.sd-longform .sd-entry p:has(> a[href*="app.suitedash.com/register"][style*="background"]) { display: none; }

/* ---------------------------------------------------------------- articles (the 2026 essays)
   Their own parts, written inline for a white page: "Related reading" cards, callouts, and a closing band
   ("Ready to ...?", one line, a white trial pill). Redrawn dark here (D2), the words and links untouched. */
/* "Related reading": the card grid (the module wall's tiles) */
.sd-reading .sd-entry .sd-related-reading { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 !important; max-width: none !important; margin: 24px 0 0 !important; padding: 0 1px 1px 0; }
.sd-reading .sd-entry .sd-related-card { margin: 0 -1px -1px 0; }
.sd-reading .sd-entry .sd-related-card > a {
	display: flex !important; flex-direction: column; gap: 10px; height: 100%; padding: 18px 18px 16px !important;
	background: transparent !important; border: 1px solid var(--line) !important; border-radius: 0 !important;
	color: var(--text) !important; text-decoration: none !important; position: relative; transition: border-color .15s, background-color .15s;
}
.sd-reading .sd-entry .sd-related-card > a:hover { border-color: var(--accent) !important; background: var(--panel) !important; z-index: 1; }
.sd-reading .sd-entry .sd-related-card > a > span { margin: 0 !important; }
.sd-reading .sd-entry .sd-related-card > a > span:first-child { font: 500 11.5px/1.4 var(--f-num) !important; letter-spacing: .04em !important; color: var(--faint) !important; }
.sd-reading .sd-entry .sd-related-card > a > span:nth-child(2) { flex: 1; font: 600 15px/1.35 var(--f-text) !important; color: var(--text) !important; }
.sd-reading .sd-entry .sd-related-card > a:hover > span:nth-child(2) { color: var(--accent) !important; }
.sd-reading .sd-entry .sd-related-card > a > span:last-child { font: 400 12.5px/1.2 var(--f-num) !important; color: var(--accent) !important; }
/* callouts ("By the way", "TLDR"): a panel with the accent rule, as the author box on guides */
.sd-reading .sd-entry .sd-blog-callout { margin: 2em 0 !important; padding: 16px 20px !important; background: var(--panel) !important; border: 1px solid var(--line) !important; border-left: 1px solid var(--accent) !important; border-radius: 0 !important; }
.sd-reading .sd-entry .sd-blog-callout p { margin: 0 !important; color: var(--c-copy) !important; line-height: 1.6 !important; }
.sd-reading .sd-entry .sd-blog-callout strong { color: var(--text); }
/* the closing band (a second title band): read as the essay's last section, not a second hero. Its trial pill is
   hidden (D5, above) and the theme's CTA band follows, so the page still closes on one band. */
.sd-article .sd-entry > .sd-secondary-header-color ~ .sd-secondary-header-color {
	grid-column: content; display: block; margin-top: 32px; padding: 56px 0 0; border-top: 1px solid var(--line); border-bottom: 0; background: none;
}
.sd-article .sd-entry > .sd-secondary-header-color ~ .sd-secondary-header-color h2 { margin-top: 0; color: var(--text) !important; }
.sd-article .sd-entry > .sd-secondary-header-color ~ .sd-secondary-header-color p { color: var(--c-copy) !important; margin-bottom: 0 !important; }
/* one essay wraps it in a navy box with an inline !important ground: covered by an image layer, margins reset */
.sd-article .sd-entry [style*="background-color:#003D70"] { margin: 0 !important; padding: 0 !important; background-image: linear-gradient(var(--bg), var(--bg)); }

/* ---------------------------------------------------------------- hubs: the card grid (inc/reading.php adds .sd-card-grid)
   The module wall's design (site.css "the module wall"): square tiles joined by hairlines, the whole tile is the
   link, accent border on hover. Tile rows (/journeys/) span the container; a list of child pages (/user-stories/)
   stays in the reading column; the post grid (/sd-blog/) spans the container. */
.sd-hub.sd-longform .sd-entry > :is(.sd-card-grid, .sd-row:has(.sd-post-grid)) { grid-column: toc-start / wide-end; }
.sd-hub.sd-longform .sd-entry > .sd-card-grid { padding-top: 0; }
.sd-hub.sd-longform .sd-entry > :not(.sd-card-grid) + .sd-card-grid { padding-top: 48px; }
.sd-hub .sd-entry > .sd-card-grid + .sd-card-grid { margin-top: -1px; }
.sd-hub .sd-card-grid .wp-block-columns { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0 1px 0 0; }
.sd-hub .sd-card-grid .wp-block-column { flex-basis: auto !important; min-width: 0; margin: 0 !important; }
.sd-hub .sd-card-grid .features-tv { position: relative; height: 100%; margin: 0 -1px -1px 0; padding: 14px 14px 16px; border: 1px solid var(--line); transition: border-color .15s, background-color .15s; }
.sd-hub .sd-card-grid .features-tv:hover { border-color: var(--accent); background: var(--panel); z-index: 1; }
.sd-hub .sd-card-grid .features-tv p { display: flex; flex-direction: column-reverse; gap: 14px; margin: 0; }
.sd-hub .sd-card-grid .features-tv p > br { display: none; }
.sd-hub .sd-card-grid .features-tv span { display: flex; justify-content: space-between; gap: 12px; font: 600 15px/1.3 var(--f-text); color: var(--text); text-align: left !important; }
.sd-hub .sd-card-grid .features-tv span::after { content: "\2192"; font: 400 13px/1.3 var(--f-num); color: var(--faint); }
.sd-hub .sd-card-grid .features-tv:hover span { color: var(--accent); }
.sd-hub .sd-card-grid .features-tv a::after { content: ""; position: absolute; inset: 0; }
.sd-hub .sd-card-grid .features-tv img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border: 1px solid var(--line); background: var(--raise); }
/* a list of child pages: title link, then its line, each item a tile */
.sd-hub .sd-entry ul.sd-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; margin: 24px 0 0; padding: 0 1px 1px 0; list-style: none; }
.sd-hub .sd-entry ul.sd-card-grid > li { position: relative; margin: 0 -1px -1px 0; padding: 18px 18px 20px; border: 1px solid var(--line); color: var(--mute); font-size: 14.5px; line-height: 1.55; transition: border-color .15s, background-color .15s; }
.sd-hub .sd-entry ul.sd-card-grid > li:hover { border-color: var(--accent); background: var(--panel); z-index: 1; }
.sd-hub .sd-entry ul.sd-card-grid > li > a:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font: 600 16px/1.3 var(--f-text); color: var(--text); text-decoration: none; }
.sd-hub .sd-entry ul.sd-card-grid > li > a:first-child::before { content: ""; position: absolute; inset: 0; }
.sd-hub .sd-entry ul.sd-card-grid > li > a:first-child::after { content: "\2192"; font: 400 13px/1.3 var(--f-num); color: var(--faint); }
.sd-hub .sd-entry ul.sd-card-grid > li:hover > a:first-child { color: var(--accent); }
/* the post grid ([latest_post] stand-in, site.css): the same tiles */
.sd-hub .sd-entry .sd-post-grid { gap: 0; padding: 0 1px 1px 0; }
.sd-hub .sd-entry .sd-post-card { position: relative; display: flex; flex-direction: column; margin: 0 -1px -1px 0; padding: 18px 18px 20px; border: 1px solid var(--line); transition: border-color .15s, background-color .15s; }
.sd-hub .sd-entry .sd-post-card:hover { border-color: var(--accent); background: var(--panel); z-index: 1; }
.sd-hub .sd-entry .sd-post-card__img img { margin-bottom: 16px; }
.sd-hub .sd-entry .sd-post-card__title { margin: 0 0 10px; font: 600 16px/1.35 var(--f-text); text-align: left !important; } /* a card title, not a section heading (D3) */
.sd-hub .sd-entry .sd-post-card__title a::after { content: ""; position: absolute; inset: 0; }
.sd-hub .sd-entry .sd-post-card:hover .sd-post-card__title a { color: var(--accent); }
.sd-hub .sd-entry .sd-post-card__excerpt { font-size: 14px; line-height: 1.55; }
@media (max-width: 1060px) {
	.sd-hub.sd-longform .sd-entry > :is(.sd-card-grid, .sd-row:has(.sd-post-grid)) { grid-column: full; padding-inline: var(--sd-gutter); }
}
@media (max-width: 900px) { .sd-hub .sd-card-grid .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sd-hub .sd-card-grid .features-tv span { font-size: 14px; } .sd-hub .sd-card-grid .features-tv span::after { content: none; } } /* two tiles a row on a phone too */

/* ---------------------------------------------------------------- dev pages without a title band: a plain column */
.sd-internal.sd-blocks:not(.sd-longform, .sd-pricing) .sd-entry { max-width: calc(var(--sd-read) + 2 * var(--sd-gutter)); margin-inline: auto; padding: 56px var(--sd-gutter) 88px; }
.sd-internal.sd-blocks:not(.sd-longform, .sd-pricing) .sd-entry img { height: auto; }