/* Sorted Article - .sab (Article Body block content) and .sjc (Journal Categories pills).
   Brand: Navy #58658B, Gold #D5B270, Text #2C2C2C, Brown #A67C52. Mobile-first, checked at 375px.
   Fonts follow the kit globals (HL Body Copy a63bd1c, HL H2 e692fa4) with Lato / Cormorant Garamond fallbacks.
*/

.sab{
	--sab-maxw: 760px;
	--sab-wide: 1100px;
	--sab-gap: 32px;
	--sab-cols: 3;
	display:flex;
	flex-direction:column;
	gap:var(--sab-gap);
	max-width:var(--sab-wide);
	margin:0 auto;
}

.sab-empty{
	max-width:var(--sab-maxw);
	margin:0 auto;
	padding:40px;
	text-align:center;
	border:1px dashed #c9c2b5;
	border-radius:4px;
	color:#8a8275;
	background:#f6f1e8;
	font:13px/1.5 -apple-system,system-ui,sans-serif;
}

/* Narrow column: text, buttons, dividers, image captions. */
.sab-text,
.sab-btn-wrap,
.sab-divider{
	max-width:var(--sab-maxw);
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

/* Wide column: images, galleries, property grids. */
.sab-image,
.sab-props,
.sab .sg-grid{
	max-width:var(--sab-wide);
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

/* Mosaic galleries repeat in sixes (one 2x2 feature + small tiles, 3 columns). Any other
   count would leave a hole in the last row, so the last tile stretches to fill it. */
@media (min-width:768px){
	.sab .sg-mosaic .sg-tile:last-child:nth-child(6n+4){ grid-column:1 / -1; }
	.sab .sg-mosaic .sg-tile:last-child:nth-child(6n+5){ grid-column:span 2; }
	.sab .sg-mosaic .sg-tile:last-child:nth-child(6n+1):not(:first-child){ grid-column:1 / -1; grid-row:span 2; }
	.sab .sg-mosaic .sg-tile:last-child:nth-child(6n+2){ grid-row:span 2; }
	.sab .sg-mosaic .sg-tile:only-child{ grid-column:1 / -1; grid-row:span 2; }
}

/* ===================== Body copy ===================== */

.sab-text{
	font-family: var(--e-global-typography-a63bd1c-font-family, 'Lato'), sans-serif;
	font-size:17px;
	line-height:1.75;
	color:#2C2C2C;
}

.sab-text > *:first-child{ margin-top:0; }
.sab-text > *:last-child{ margin-bottom:0; }

.sab-text p{ margin:0 0 1.4em; }

.sab-text h2{
	font-family: var(--e-global-typography-e692fa4-font-family, 'Cormorant Garamond'), serif;
	font-size:36px;
	font-weight:500;
	line-height:1.2;
	color:#58658B;
	margin:1.6em 0 .6em;
}

.sab-text h3{
	font-family: var(--e-global-typography-e692fa4-font-family, 'Cormorant Garamond'), serif;
	font-size:26px;
	font-weight:500;
	line-height:1.3;
	color:#58658B;
	margin:1.4em 0 .5em;
}

.sab-text a{
	color:#A67C52;
	text-decoration:underline;
	text-underline-offset:3px;
}
.sab-text a:hover{ color:#58658B; }

.sab-text ul{
	margin:0 0 1.4em;
	padding-left:1.2em;
	list-style:none;
}
.sab-text ul li{ position:relative; margin-bottom:.5em; }
.sab-text ul li::before{
	content:"";
	position:absolute;
	left:-1.2em;
	top:.65em;
	width:6px;
	height:6px;
	border-radius:50%;
	background:#D5B270;
}

.sab-text ol{
	margin:0 0 1.4em;
	padding-left:1.4em;
}
.sab-text ol li{ margin-bottom:.5em; }

.sab-text blockquote{
	margin:1.6em 0;
	padding-left:1.2em;
	border-left:1px solid #D5B270;
	font-family: var(--e-global-typography-e692fa4-font-family, 'Cormorant Garamond'), serif;
	font-style:italic;
	font-size:26px;
	line-height:1.4;
	color:#58658B;
}
.sab-text blockquote p{ margin:0; }

.sab-text strong{ font-weight:700; }
.sab-text em{ font-style:italic; }

/* ===================== Image blocks ===================== */

.sab-image{ margin:0; }
.sab-image img{ display:block; width:100%; height:auto; }
.sab-image figcaption{
	max-width:var(--sab-maxw);
	margin:10px auto 0;
	font-family:'Lato', sans-serif;
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#8a8275;
	text-align:center;
}

/* ===================== Divider ===================== */

.sab-divider{
	border:0;
	border-top:1px solid #D5B270;
	width:100%;
}

/* ===================== Buttons ===================== */

.sab-btn-wrap{ text-align:center; }

.sab-btn{
	display:inline-block;
	font-family:'Lato', sans-serif;
	font-size:12px;
	font-weight:600;
	letter-spacing:.22em;
	text-transform:uppercase;
	text-decoration:none;
	padding:16px 34px;
	border-radius:2px;
	transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sab-btn--gold{ background:#D5B270; color:#FFFFFF; }
.sab-btn--gold:hover{ background:#c2a05e; color:#FFFFFF; }
.sab-btn--navy{ background:#58658B; color:#FFFFFF; }
.sab-btn--navy:hover{ background:#485474; color:#FFFFFF; }
.sab-btn--outline{ background:transparent; color:#58658B; border:1px solid #D5B270; }
.sab-btn--outline:hover{ background:#D5B270; color:#FFFFFF; border-color:#D5B270; }

/* ===================== Properties grid ===================== */

.sab-props{
	display:grid;
	grid-template-columns:repeat(var(--sab-cols),minmax(0,1fr));
	gap:24px;
}

.sab-prop-fallback{
	display:block;
	text-decoration:none;
	color:#2C2C2C;
	border:1px solid #D5B270;
}
.sab-prop-fallback img{ display:block; width:100%; height:auto; }
.sab-prop-fallback span{
	display:block;
	padding:14px 16px;
	font-family:'Cormorant Garamond', serif;
	font-size:18px;
	color:#58658B;
}

@media (max-width:1024px){
	.sab-props{ --sab-cols: 2; }
}

@media (max-width:767px){
	.sab-props{ --sab-cols: 1; }
	.sab-text{ font-size:16px; }
	.sab-text h2{ font-size:28px; }
	.sab-text h3{ font-size:22px; }
	.sab-text blockquote{ font-size:21px; }
}

/* ===================== Journal Categories pills (.sjc) ===================== */

.sjc{
	--sjc-border:#D5B270;
	--sjc-text:#58658B;
	--sjc-active-bg:#58658B;
	--sjc-active-text:#FFFFFF;
	--sjc-gap:10px;
	display:flex;
	flex-wrap:nowrap;
	justify-content:flex-start;
	align-items:center;
	gap:var(--sjc-gap);
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	-ms-overflow-style:none;
	padding:2px 2px 6px;
	margin:0;
	list-style:none;
}
.sjc::-webkit-scrollbar{ display:none; height:0; }

.sjc-pill{
	flex:0 0 auto;
	display:inline-block;
	font-family:'Lato', sans-serif;
	font-size:12px;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	text-decoration:none;
	white-space:nowrap;
	color:var(--sjc-text);
	background:transparent;
	border:1px solid var(--sjc-border);
	border-radius:0;
	padding:9px 18px;
	transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sjc-pill:hover{ background:rgba(213,178,112,.12); }
.sjc-pill.is-active{
	background:var(--sjc-active-bg);
	color:var(--sjc-active-text);
	border-color:var(--sjc-active-bg);
}

/* Neighbourhood row: a quieter second tier under the category pills. */
.sjc--hoods .sjc-pill{ font-size:11px; padding:6px 14px; border-color:#E4E1DA; }
.sjc--hoods .sjc-pill.is-active{ border-color:var(--sjc-active-bg); }

@media (prefers-reduced-motion:reduce){
	.sjc-pill{ transition:none; }
}