/* Template composition layer (owned by the Principal Engineer). Layout only — visual styling
   belongs to components in main.css. Loaded on inner templates via iv_use_assets( [ 'page' ] ).
   Breakpoints: 599 / 899 / 1099. */

/* Case-study card grids */
.iv-card-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
	.iv-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.iv-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.iv-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}
@media (max-width: 599px) {
	.iv-section__actions > .iv-btn { flex: 1 1 100%; justify-content: center; }
}

/* Case-study detail: facts sidebar + narrative */
.iv-case {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
	.iv-case { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
	.iv-case__facts { position: sticky; top: calc(80px + var(--space-md)); }
}
.iv-case__facts dl { display: grid; gap: var(--space-sm); margin: 0; }
.iv-case__facts dt {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-light-muted);
}
.iv-case__facts dd { margin: 0.25rem 0 0; font-weight: 500; }
.iv-case__body { display: grid; gap: var(--space-lg); max-width: 46rem; }
.iv-case__body h2 { font-size: var(--step-3); margin-bottom: var(--space-xs); }
.iv-case__list { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.iv-case__list li::marker { color: var(--color-action); }
.iv-case__note { font-size: 0.9375rem; color: var(--color-text-light-muted); }

/* Long-form text (About, legal pages) */
.iv-prose { max-width: 46rem; }
.iv-prose > * + * { margin-top: var(--space-sm); }

/* Team grid */
.iv-team-grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
	.iv-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Alternate light section (white on the default light background) */
.iv-section--alt { background-color: var(--color-surface-light); }

/* Long-form: headings, lists and links inside prose */
.iv-prose h2 { font-size: var(--step-3); margin-top: var(--space-lg); }
.iv-prose h3 { font-size: var(--step-2); margin-top: var(--space-md); }
.iv-prose ul, .iv-prose ol { padding-left: 1.25rem; display: grid; gap: 0.375rem; }
.iv-prose ul { list-style: disc; }
.iv-prose ol { list-style: decimal; }
.iv-prose a { color: var(--color-action); text-decoration: underline; text-underline-offset: 0.15em; }
.iv-prose a:hover { color: var(--color-action-hover); }
.iv-prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.iv-prose th, .iv-prose td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
.iv-prose__updated { color: var(--color-text-light-muted); font-size: 0.9375rem; }

/* Contact */
.iv-contact { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
	.iv-contact { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-xl); }
	.iv-contact__aside { position: sticky; top: calc(80px + var(--space-md)); }
}
.iv-contact__form { display: grid; gap: var(--space-md); min-width: 0; }
.iv-contact__aside { display: grid; gap: var(--space-sm); }
.iv-contact__aside h2:not(:first-child) { margin-top: var(--space-md); }
.iv-contact__list { display: grid; gap: var(--space-sm); margin: 0; }
.iv-contact__list dt {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-light-muted);
}
.iv-contact__list dd { margin: 0.25rem 0 0; font-weight: 500; overflow-wrap: anywhere; }
.iv-contact__list a { color: var(--color-action); display: inline-flex; min-height: 44px; align-items: center; }
.iv-contact__list a:hover { color: var(--color-action-hover); }
.iv-contact__steps { list-style: decimal; padding-left: 1.25rem; display: grid; gap: 0.5rem; color: var(--color-text-light); }
.iv-contact__alt { display: grid; gap: 0.25rem; color: var(--color-text-light-muted); }

/* About */
.iv-about-place { display: grid; gap: var(--space-sm); justify-items: start; }

/* Resources (blog index) */
.iv-post-list { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .iv-post-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.iv-post-card { display: grid; gap: var(--space-xs); align-content: start; }
.iv-post-card__meta { font-size: 0.875rem; color: var(--color-text-light-muted); }
.iv-post-card__title { font-size: var(--step-2); }
.iv-post-card__title a { color: var(--color-ink); text-decoration: none; }
.iv-post-card__title a:hover { color: var(--color-action); text-decoration: underline; }
.iv-pagination { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.iv-pagination a, .iv-pagination span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.75rem; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm, 6px); color: var(--color-ink); text-decoration: none; }
.iv-pagination .current { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }

/* Free tools: tool section sits directly under the hero */
.iv-tool-section { padding-top: var(--space-lg); }

/* Resources article */
.iv-article .iv-container { max-width: calc(46rem + 2 * var(--space-md)); }
.iv-article__meta { display: flex; gap: 0.5rem; flex-wrap: wrap; color: var(--color-text-light-muted); font-size: 0.9375rem; margin-bottom: var(--space-md); }
.iv-article__figure { margin: 0 0 var(--space-lg); }
.iv-article__image { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }
.iv-article__body { font-size: 1.0625rem; line-height: 1.75; }
.iv-article__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.iv-article__body blockquote { border-left: 3px solid var(--color-action); padding-left: var(--space-sm); color: var(--color-text-light-muted); }
.iv-article__next { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--color-border-light); }
/* PE: "Prefer to pick a time?" booking block at the top of the contact aside. */
.iv-contact__booking { display: grid; gap: var(--space-sm); justify-items: start; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border-light); }
.iv-contact__booking p { margin: 0; color: var(--color-text-light-muted); }
.iv-contact__booking-quick { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-sm); color: var(--color-text-light-muted); }
.iv-contact__booking-quick .iv-link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) { .iv-contact__booking-quick { display: none; } } /* the aside is beside the form */