:root {
   --layout-grid-gap: 1.75rem;
   
   --layout-width:95%;
   --layout-max-width: 1280px;
   
   --margin-depth: 1.25rem; 
   --padding-depth: 1.25rem;
}

/* DEV-STRUCTURE: Page width and layout rows */
[class*="layout-row"]  div.layout-wrap { *zoom: 1; }
/*[class*="layout-row"]  div.layout-wrap:before,*/
[class*="layout-row"]  div.layout-wrap:after { clear: both; display: table; content: ""; line-height: 0; }
[class*="layout-row"]  div.layout-wrap { margin: 0 auto;width: var(--layout-width);max-width: var(--layout-max-width);}

.layout-title { margin-bottom: 2rem; }

/* DEV-STRUCTURE: Base grid */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--layout-grid-gap)}
.grid-d4 { grid-template-columns: repeat(4, 1fr); overflow: hidden;}
.grid-d6 { grid-template-columns: repeat(6, 1fr); }

/* DEV-STRUCTURE: Desktop grid placements */
@media only screen and (min-width: 901px) {
	[class*="grid-d"] .d1 { grid-column: 1 / span 1; }
	[class*="grid-d"] .d2 { grid-column: 2 / span 1; }
	[class*="grid-d"] .d3 { grid-column: 3 / span 1; }
	[class*="grid-d"] .d4 { grid-column: 4 / span 1; }
	.grid-d6 .d5 { grid-column: 5 / span 1; }
	.grid-d6 .d6 { grid-column: 6 / span 1; }
	
	[class*="grid-d"] .d1-2 { grid-column: 1 / span 2; }
	[class*="grid-d"] .d1-3 { grid-column: 1 / span 3; }
	[class*="grid-d"] .d1-4 { grid-column: 1 / span 4; }
	[class*="grid-d6"] .d1-5 { grid-column: 1 / span 5; }
	[class*="grid-d6"] .d1-6 { grid-column: 1 / span 6; }
	[class*="grid-d"] .d2-3 { grid-column: 2 / span 2; }
	[class*="grid-d"] .d2-4 { grid-column: 2 / span 3; }
	[class*="grid-d6"] .d2-5 { grid-column: 2 / span 4; }
	[class*="grid-d6"] .d2-6 { grid-column: 2 / span 5; }
	[class*="grid-d"] .d3-4 { grid-column: 3 / span 2; }
	[class*="grid-d6"] .d3-5 { grid-column: 3 / span 3; }
	[class*="grid-d6"] .d3-6 { grid-column: 3 / span 4; }
	[class*="grid-d6"] .d4-5 { grid-column: 4 / span 2; }
	[class*="grid-d6"] .d4-6 { grid-column: 4 / span 3; }
	[class*="grid-d6"] .d5-6 { grid-column: 5 / span 2; }
	[class*="grid-d4"] .d-all { grid-column: 1 / span 4; }
	[class*="grid-d6"] .d-all { grid-column: 1 / span 6; }
}

/* DEV-STRUCTURE: Tablet grid and breakpoint */
@media only screen and (min-width: 481px) and (max-width: 900px) {
	.grid-t2 { grid-template-columns: repeat(2, 1fr); }
	.grid-t2 .t1 { grid-column: 1 / span 1; }
	.grid-t2 .t2 { grid-column: 2 / span 1; }
	.grid-t2 .t1-2,
	.grid-t2 .t-all { grid-column: 1 / span 2; }

	.grid-t3 { grid-template-columns: repeat(3, 1fr); }
	.grid-t3 .t1 { grid-column: 1 / span 1; }
	.grid-t3 .t2 { grid-column: 2 / span 1; }
	.grid-t3 .t3 { grid-column: 3 / span 1; }

	.grid-t3 .t1-2 { grid-column: 1 / span 2; }
	.grid-t3 .t1-3 { grid-column: 1 / span 3; }
	.grid-t3 .t2-3 { grid-column: 2 / span 2; }

	.grid-t3 .t-all { grid-column: 1 / span 3; }
}         

/* DEV-STRUCTURE: Mobile grid and breakpoint */
@media only screen and (max-width: 480px) {
	.grid-m1 { grid-template-columns: repeat(1, 1fr); }
	.grid-m1 .m1 { grid-column: 1 / span 1; }
	.grid-m1 .m2 { grid-column: 1 / span 1; }
	.grid-m1 .m1-2,
	.grid-m1 .m-all { grid-column: 1 / span 1; }

	.grid-m2 { grid-template-columns: repeat(2, 1fr); }
	.grid-m2 .m1 { grid-column: 1 / span 1; }
	.grid-m2 .m2 { grid-column: 2 / span 1; }
	.grid-m2 .m1-2,
	.grid-m2 .m-all { grid-column: 1 / span 2; }
}


/* DEV-UTILITY: Grid alignment */
.grid.ai-center { align-items: center;}


/* DEV-STRUCTURE: Flex layouts */
.flex { display: flex; gap: 1.2rem }
.flex.row { flex-direction: row; }
.flex.column { flex-direction: column; }
/* DEV-STRUCTURE: Responsive flex direction */
@media only screen and (max-width: 450px) {
	.flex, .flex-row { flex-direction: column; }
}



/* DEV-STYLE: ST-028
   NAME: Top tools row composition
   FOR: CB-013
   ACTIVE: yes
*/

/* =========================================================
   TOP BAR
   ========================================================= */

.top-bar-content { box-sizing: border-box; padding: 10px 25px 10px 25px; }
.site-tools { display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: end; gap: 20px 35px; min-height: 68px; }
.has-quick-exit .top-bar-content { padding-left: 185px; }

#font-resize-wrap { display: flex; align-items: center; margin: 0; }
.mode-switch-wrap { display: flex; align-items: center; margin: 0; }
.mode-switch { display: flex; align-items: center; gap: 8px; margin: 0; }
.mode-switch select { margin: 0; }

.social-wrap { display: flex; align-items: center; gap: 6px; margin: 0; }
.social-wrap .social { display: flex; align-items: center; justify-content: center; margin: 0; }


/* =========================================================
   MEDIUM SCREENS
   ========================================================= */

@media (max-width: 1050px) {

	.top-bar-content { padding: 0 20px; }
	.site-tools { gap: 10px 22px; padding: 8px 0; }
	.has-quick-exit .top-bar-content { padding-left: 685px; }

}


/* =========================================================
   NARROW SCREENS
   ========================================================= */

@media (max-width: 700px) {

	.top-bar-content { padding: 0 20px; }
	.has-quick-exit .top-bar-content { padding: 68px 20px 0; }

	.site-tools { grid-template-columns: auto auto; grid-template-areas: "resize mode" "social social"; justify-content: start; align-items: center; gap: 14px 30px; min-height: 0; padding: 0 0 16px; }

	#font-resize-wrap { grid-area: resize; }
	.mode-switch-wrap { grid-area: mode; }
	.social-wrap { grid-area: social; }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

	.top-bar-content { padding: 0 15px; }
	.has-quick-exit .top-bar-content { padding-top: 68px; }

	.site-tools { grid-template-columns: 1fr; grid-template-areas: "resize" "mode" "social"; gap: 12px; }

}



/* DEV-STYLE: ST-036
   NAME: Footer card grid
   FOR: SHARED
   VARIANT: .footer-cards-row
   ACTIVE: no
*/
/*.footer-row .grid { grid-template-columns: repeat(1, 1fr); }*/
.footer-cards-row .grid { gap: 1.250em; grid-template-columns: repeat(1, 1fr); }
@media only screen and (min-width: 480px) {
.footer-cards-row .grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (min-width: 1024px) {
.footer-cards-row .grid { grid-template-columns: repeat(4, 1fr); }
}
.footer-cards-row .card { padding: 1.2em 0 0 0 }
.footer-cards-row .card p { margin: 0 0 1em 0 }
.footer-cards-row .card h4 { margin: 1em 0 0 0 }

/* DEV-STYLE-CONTINUATION: ST-034
   NAME: Page footer
   FOR: CB-005
   ACTIVE: yes
*/
.legal-row { margin-top:0}
@media only screen and (min-width: 900px) {
	.legal-row .grid { grid-template-columns: repeat(4, 1fr);}
	.legal-row .grid div:nth-child(1) {grid-column: 1 / span 3;}
	.legal-row .grid div:nth-child(2) {grid-column: 4 / span 1;}
	.legal-row .grid div:nth-child(3) {grid-column: 1 / span 3;}
	.legal-row .grid div:nth-child(1n) { justify-self: start; }
	.legal-row .grid div:nth-child(2n) { justify-self: end; }
}


/* DEV-UTILITY: Clearfix */
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* DEV-UTILITY: Text alignment */
.txt-left { text-align: left }
.txt-right { text-align: right }
.txt-center { text-align: center }

/* DEV-UTILITY: Spacing */


/* margin */
.mrg-t { margin-block-start: var(--margin-depth); }
.mrg-b { margin-block-end: var(--margin-depth); }
.mrg-l { margin-inline-start: var(--margin-depth); }
.mrg-r { margin-inline-end: var(--margin-depth); }
.mrg-x { margin-inline: var(--margin-depth); }
.mrg-y { margin-block: var(--margin-depth); }
.mrg-all { margin: var(--margin-depth); }

/* margin x2 */
.mrg-t-x2 { margin-block-start: calc(var(--margin-depth) * 2); }
.mrg-b-x2 { margin-block-end: calc(var(--margin-depth) * 2); }
.mrg-l-x2 { margin-inline-start: calc(var(--margin-depth) * 2); }
.mrg-r-x2 { margin-inline-end: calc(var(--margin-depth) * 2); }
.mrg-x-x2 { margin-inline: calc(var(--margin-depth) * 2); }
.mrg-y-x2 { margin-block: calc(var(--margin-depth) * 2); }
.mrg-all-x2 { margin: calc(var(--margin-depth) * 2); }

/* padding */
.pad-t { padding-block-start: var(--padding-depth); }
.pad-b { padding-block-end: var(--padding-depth); }
.pad-l { padding-inline-start: var(--padding-depth); }
.pad-r { padding-inline-end: var(--padding-depth); }
.pad-x { padding-inline: var(--padding-depth); }
.pad-y { padding-block: var(--padding-depth); }
.pad-all { padding: var(--padding-depth); }

/* padding x2 */
.pad-t-x2 { padding-block-start: calc(var(--padding-depth) * 2); }
.pad-b-x2 { padding-block-end: calc(var(--padding-depth) * 2); }
.pad-l-x2 { padding-inline-start: calc(var(--padding-depth) * 2); }
.pad-r-x2 { padding-inline-end: calc(var(--padding-depth) * 2); }
.pad-x-x2 { padding-inline: calc(var(--padding-depth) * 2); }
.pad-y-x2 { padding-block: calc(var(--padding-depth) * 2); }
.pad-all-x2 { padding: calc(var(--padding-depth) * 2); }


/* DEV-UTILITY: Text sizing */
.txt-xsmall { font-size: 0.9rem }
.txt-small { font-size: 0.95rem }
.txt-regular { font-size: 1rem }
.txt-large { font-size: 1.05rem}
.txt-xlarge { font-size: 1.1rem}

/* DEV-UTILITY: Accessible visibility */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

/* DEV-UTILITY: List presentation */
ul.inline { list-style-type: none; margin: 0 0 1rem; padding: 0}
ul.inline li { margin-block-end: 0.6rem }
@media only screen and (min-width: 900px) {
	ul.inline { display: flex; gap: 1em }
}

.unstyled { list-style-type: none; padding: 0; margin: 0;}


/* DEV-STRUCTURE: Content grids */

.content-grid { display: grid;	gap: 1.4rem;width: 100%;box-sizing: border-box;}


/* 2 columns → 1 column */
.content-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

@media only screen and (max-width: 900px) {
	.content-grid.cols-2 {grid-template-columns: 1fr;}
}


/* 3 columns → 2 columns → 1 column */
.content-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 1200px) {
    .content-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 768px) {
    .content-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}


@media (min-width: 700px) and (max-width: 1200px) {

    /* Only when the grid contains exactly 3 cards */
    .content-grid.cols-3:has(> .card:nth-child(3):last-child) > .card:first-child {
        grid-column: 1 / -1;
    }

    /* Make all 3 cards use the flat/horizontal presentation */
    .content-grid.cols-3:has(> .card:nth-child(3):last-child) > .card a {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .content-grid.cols-3:has(> .card:nth-child(3):last-child) > .card .card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Give the full-width first card a wider text area */
    .content-grid.cols-3:has(> .card:nth-child(3):last-child) > .card:first-child a {
        grid-template-columns: 1fr 1fr;
    }
}


/* --------------------------------------------------
   Individual flat card
-------------------------------------------------- */

.card.flat a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.card.flat .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card.flat .text {
    display: flex;
    flex-direction: column;
}

.card.flat * {
    text-align: left;
}


/* --------------------------------------------------
   3-column grid with responsive flat-card treatment
-------------------------------------------------- */
.content-grid.cols-3.responsive-flat { grid-template-columns: repeat(3, 1fr);}

/* Tablet / small desktop */
@media (min-width: 700px) and (max-width: 1200px) {

    .content-grid.cols-3.responsive-flat {grid-template-columns: repeat(2, 1fr);}

    /* First card spans both columns */
    .content-grid.cols-3.responsive-flat > :first-child {grid-column: 1 / -1;}

    /* Cards 2 and 3 remain one column each */
    .content-grid.cols-3.responsive-flat > :nth-child(2),
    .content-grid.cols-3.responsive-flat > :nth-child(3) {grid-column: auto;}

    /* All cards use the flat treatment */
    .content-grid.cols-3.responsive-flat .card a {display: grid;grid-template-columns: 1fr 1fr;width: 100%;}
    .content-grid.cols-3.responsive-flat .card .card-img img {width: 100%;height: 100%;object-fit: cover;display: block;}
    .content-grid.cols-3.responsive-flat .card .text {display: flex;flex-direction: column;}
    .content-grid.cols-3.responsive-flat .card * {text-align: left;}

    /* Wider first card */
    .content-grid.cols-3.responsive-flat > :first-child .card a {grid-template-columns: 1fr 1fr;}
}


/* Mobile */
@media (max-width: 699px) {

    .content-grid.cols-3.responsive-flat {grid-template-columns: 1fr;}

    .content-grid.cols-3.responsive-flat > * {grid-column: auto;}

    /* Return to standard stacked cards */
    .content-grid.cols-3.responsive-flat .card a {display: block;}

    .content-grid.cols-3.responsive-flat .card .card-img img {width: 100%;height: auto;}
}

/* 4 columns → 2 columns → 1 column */
.content-grid.cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 1200px) {
	.content-grid.cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (max-width: 768px) {
	.content-grid.cols-4 {
		grid-template-columns: 1fr;
	}
}


/* 3 columns → 1 column */
.content-grid.cols-3-mobile-stack {
	grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 768px) {
	.content-grid.cols-3-mobile-stack {
		grid-template-columns: 1fr;
	}
}


/* Featured grid: large item on left */
.content-grid.feature-grid-large-left {
	grid-template-columns: 2.5fr 1fr;
	gap: 20px;
}

.content-grid.feature-grid-large-left .col1,
.content-grid.feature-grid-large-left .col2 {
	display: flex;
	flex-direction: column;
}

.content-grid.feature-grid-large-left .col2 {
	gap: 20px;
	justify-content: space-between;
}

.content-grid.feature-grid-large-left .col1 a {
	flex: 1;
	display: flex;
}

.content-grid.feature-grid-large-left .col1 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Featured grid: large item on right */
.content-grid.feature-grid-large-right {
	grid-template-columns: 1fr 2.5fr;
	gap: 20px;
}

.content-grid.feature-grid-large-right .col1,
.content-grid.feature-grid-large-right .col2 {
	display: flex;
	flex-direction: column;
}

.content-grid.feature-grid-large-right .col1 {
	gap: 20px;
	justify-content: space-between;
}

.content-grid.feature-grid-large-right .col2 a {
	flex: 1;
	display: flex;
}

.content-grid.feature-grid-large-right .col2 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* Featured grids: tablet */
@media only screen and (max-width: 1024px) {

	.content-grid.feature-grid-large-left,
	.content-grid.feature-grid-large-right {
		grid-template-columns: 1fr;
	}

	.content-grid.feature-grid-large-left .col1,
	.content-grid.feature-grid-large-left .col1 a,
	.content-grid.feature-grid-large-left .col1 img,
	.content-grid.feature-grid-large-right .col2,
	.content-grid.feature-grid-large-right .col2 a,
	.content-grid.feature-grid-large-right .col2 img {
		height: auto;
	}

	.content-grid.feature-grid-large-left .col2,
	.content-grid.feature-grid-large-right .col1 {
		flex-direction: row;
		justify-content: space-between;
		gap: 20px;
	}

	.content-grid.feature-grid-large-left .col2 .row,
	.content-grid.feature-grid-large-right .col1 .row {
		flex: 1;
	}
}


/* Featured grids: mobile */
@media only screen and (max-width: 700px) {

	.content-grid.feature-grid-large-left .col2,
	.content-grid.feature-grid-large-right .col1 {
		flex-direction: column;
	}

	.content-grid.feature-grid-large-left .col2 .item2,
	.content-grid.feature-grid-large-left .col2 .item3,
	.content-grid.feature-grid-large-right .col1 .item1,
	.content-grid.feature-grid-large-right .col1 .item2 {
		flex: none;
	}
}