/*
 * Brodnik CSS bundle: article-content.css
 * Reusable rich content: lists, tables, editor images, note links, FAQ and route facts.
 * Extracted from legacy styles.css/custom.css after usage audit.
 */

.article-content{min-width: 0;
	max-width: 100%;}

.article-table{display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	margin: 32px 0 44px;
	border: 1px solid rgba(18, 43, 53, 0.12);
	border-radius: 22px;
	background: #f7f1e8;
	box-shadow: 0 14px 40px rgba(18, 43, 53, 0.06);}

.article-table table{width: 100%;
	min-width: 760px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 17px;
	line-height: 1.45;
	color: #24353b;}

.article-table thead th{position: sticky;
	top: 0;
	z-index: 1;
	padding: 18px 22px;
	background: #eadfce;
	color: #122b35;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	letter-spacing: 0.02em;
	text-transform: uppercase;}

.article-table tbody td{padding: 20px 22px;
	vertical-align: top;
	border-top: 1px solid rgba(18, 43, 53, 0.1);}

.article-table tbody tr{transition: background-color 0.2s ease;}

.article-table tbody tr:hover{background: rgba(196, 132, 58, 0.08);}

.article-table th:first-child,
.article-table td:first-child{width: 28%;
	font-weight: 600;
	color: #122b35;}

.article-table th:nth-child(2),
.article-table td:nth-child(2){width: 16%;}

.article-table th:nth-child(3),
.article-table td:nth-child(3){width: 18%;}

.article-table th:nth-child(4),
.article-table td:nth-child(4){width: 38%;}

.article-table thead th:first-child{border-top-left-radius: 22px;}

.article-table thead th:last-child{border-top-right-radius: 22px;}

.article-table tbody tr:last-child td:first-child{border-bottom-left-radius: 22px;}

.article-table tbody tr:last-child td:last-child{border-bottom-right-radius: 22px;}

.article-content ul{display: grid;
	gap: 10px;
	margin: 20px 0 30px;
	padding: 0;
	list-style: none;}

.article-content ul li{position: relative;
	padding-left: 34px;
	line-height: 1.25;
	color: #2d3940;}

.article-content ul li::before{content: "";
	position: absolute;
	left: 2px;
	top: 10px;
	width: 16px;
	border-top: 2px solid #c4843a;}

.article-content ol{display: grid;
	gap: 6px;
	margin: 20px 0 30px;
	padding: 0;
	list-style: none;
	counter-reset: article-counter;}

.article-content ol li{position: relative;
	min-height: 24px;
	padding-left: 26px;
	line-height: 1.25;
	color: #2d3940;
	counter-increment: article-counter;}

.article-content ol li::before{content: counter(article-counter, decimal-leading-zero) ".";
	position: absolute;
	left: 0;
	top: 6px;
	min-width: 30px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #c4843a;
	letter-spacing: 0.04em;}

.article-content h2{margin: 0 0 24px;
	font-family: var(--font-heading);
	font-size: clamp(24px, 1.9vw, 32px);}

.article-content h2::after{content: "";
	display: block;
	width: 45px;
	height: 2px;
	margin-top: 4px;
	background: #b56f4a;}

.article-note-link{margin: 30px 0 40px;}

.article-note-link__inner{position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 30px;
	align-items: center;
	overflow: hidden;
	padding: 28px 36px;
	border: 1px solid rgba(16, 35, 29, 0.14);
	border-left: 4px solid var(--road-clay, #B66A3C);
	border-radius: 14px;
	background:
			linear-gradient(
					135deg,
					rgba(255, 253, 248, 0.98) 0%,
					rgba(247, 237, 223, 0.96) 100%
			);
	box-shadow: 0 14px 34px rgba(16, 35, 29, 0.07);
	color: var(--raw-forest, #10231D);
	text-decoration: none;
	transition:
			border-color 0.2s ease,
			box-shadow 0.2s ease,
			transform 0.2s ease;}

.article-note-link__inner::after{content: "";
	position: absolute;
	top: -92px;
	right: -72px;
	z-index: -1;
	width: 210px;
	height: 210px;
	border: 1px solid rgba(182, 106, 60, 0.13);
	border-radius: 50%;
	pointer-events: none;}

.article-note-link__inner:hover{border-color: rgba(182, 106, 60, 0.38);
	border-left-color: var(--road-clay, #B66A3C);
	box-shadow: 0 18px 42px rgba(16, 35, 29, 0.11);
	transform: translateY(-2px);}

.article-note-link__inner:focus-visible{outline: 2px solid rgba(182, 106, 60, 0.58);
	outline-offset: 3px;}

.article-note-link__content{position: relative;
	z-index: 1;
	display: block;
	min-width: 0;}

.article-note-link__label{display: inline-flex;
	align-items: center;
	min-height: 26px;
	margin-bottom: 10px;
	padding: 0 10px;
	border: 1px solid rgba(182, 106, 60, 0.2);
	border-radius: 999px;
	background: rgba(182, 106, 60, 0.1);
	color: var(--road-clay, #B66A3C);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;}

.article-note-link__title{display: block;
	margin-bottom: 7px;
	color: var(--raw-forest, #10231D);
	font-family: var(--font-heading, Georgia, serif);
	font-size: clamp(24px, 2vw, 30px);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-decoration: none;}

.article-note-link__text{display: block;
	max-width: 680px;
	color: var(--soft-charcoal, #3B403E);
	font-size: 15px;
	line-height: 1.55;}

.article-note-link__action{position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 112px;
	height: 46px;
	padding: 0 19px;
	border-radius: 10px;
	background: var(--road-clay, #B66A3C);
	box-shadow: 0 10px 24px rgba(182, 106, 60, 0.2);
	color: #fffaf2;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	transition:
			background-color 0.2s ease,
			box-shadow 0.2s ease,
			transform 0.2s ease;}

.article-note-link__action::after{content: "→";
	margin-left: 9px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	transition: transform 0.2s ease;}

.article-note-link__inner:hover .article-note-link__action{background: #9f5732;
	box-shadow: 0 12px 28px rgba(159, 87, 50, 0.26);}

.article-note-link__inner:hover .article-note-link__action::after{transform: translateX(3px);}

.editor-caption{margin-top: 7px;
	color: var(--muted-text);
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.35;
	font-style: normal;}

.route-facts{position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0 34px;
	margin: 24px 0 36px;
	padding: 28px 0 18px 18px;
	border-bottom: 1px solid rgba(18, 43, 53, 0.12);
	border-top: 1px solid rgba(18, 43, 53, 0.12);}

.route-facts::after{content: "";
	position: absolute;
	left: 0px;
	top: 20px;
	bottom: 18px;
	border-left: 2px solid #c4843a;
	opacity: 0.95;}

.route-facts div{min-width: 0;}

.route-facts span{display: block;
	margin-bottom: 7px;
	color: #9a8b78;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;}

.route-facts strong{display: block;
	color: #122b35;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;}

.article-faq{}

.article-faq__head{margin-bottom: 22px;}

.article-faq__title{margin: 0;
	font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--raw-forest, #10231D);}

.article-faq__list{display: grid;
	gap: 12px;}

.article-faq__item{background: var(--card-bg, #FFFDF8);
	border: 1px solid rgba(16, 35, 29, 0.12);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;}

.article-faq__item[open]{border-color: rgba(182, 106, 60, 0.32);
	box-shadow: 0 12px 32px rgba(16, 35, 29, 0.07);}

.article-faq__question{position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 58px 20px 22px;
	color: var(--charcoal, #202322);
	font-family: var(--font-body, "Manrope", Arial, sans-serif);
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.35;
	font-weight: 800;
	cursor: pointer;
	list-style: none;}

.article-faq__question::-webkit-details-marker{display: none;}

.article-faq__question::after{content: "";
	position: absolute;
	right: 22px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--road-clay, #B66A3C);
	border-bottom: 2px solid var(--road-clay, #B66A3C);
	transform: translateY(-65%) rotate(45deg);
	transition: transform 0.2s ease;}

.article-faq__item[open] .article-faq__question::after{transform: translateY(-35%) rotate(225deg);}

.article-faq__question:hover{color: var(--road-clay, #B66A3C);}

.article-faq__answer{padding: 0 22px 22px;}

.article-faq__answer p{margin: 0;
	padding-top: 16px;
	border-top: 1px solid rgba(16, 35, 29, 0.10);
	color: var(--soft-charcoal, #3B403E);
	font-family: var(--font-body, "Manrope", Arial, sans-serif);
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.75;}

@media (max-width: 768px){
.article-table{width: auto;
		max-width: none;
		margin: 24px -16px 36px;
		border-right: 0;
		border-left: 0;
		border-radius: 0;}
.article-table table{width: 760px;
		min-width: 760px;
		font-size: 15px;}
.article-table th,
.article-table td{padding: 14px 12px;}
.article-table th{font-size: 11px;}
.article-table thead th:first-child,
.article-table thead th:last-child{border-radius: 0;}
.article-content ul{gap: 8px;
		margin: 16px 0 24px;}
.article-content ul li{padding-left: 24px;}
.article-content ul li::before{}
.article-content ol{gap: 6px;
		margin: 16px 0 24px;}
.article-content ol li{min-height: 18px;
		padding-left: 30px;
		line-height: 1.5;}
.article-content ol li::before{top: 6px;
		min-width: 26px;
		font-size: 12px;}
.article-table--two-cols{width: 100%;
		max-width: 100%;
		margin: 20px 0 32px;
		overflow: hidden;
		border-radius: 16px;
		border: 1px solid rgba(18, 43, 53, 0.1);
		table-layout: fixed;}
.article-table--two-cols table{width: 100%;
		min-width: 0;
		max-width: none;
		table-layout: fixed;
		font-size: 14px;
		line-height: 1.35;}
.article-table--two-cols th,
.article-table--two-cols td{padding: 12px 10px;}
.article-table--two-cols td{white-space: normal;
		word-break: normal;
		overflow-wrap: break-word;}
.article-table--two-cols th{font-size: 10px;
		line-height: 1.2;
		letter-spacing: 0.06em;
		text-transform: uppercase;}
.article-table--two-cols th:nth-child(1),
.article-table--two-cols td:nth-child(1){width: 38%;}
.article-table--two-cols th:nth-child(2),
.article-table--two-cols td:nth-child(2){width: 62%;}
.article-table--two-cols td:nth-child(1){font-weight: 700;
		color: #122b35;}
.article-note-link{margin: 24px 0 32px;}
.article-note-link__inner{grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		padding: 20px 18px 20px 20px;
		border-left-width: 4px;
		border-radius: 12px;}
.article-note-link__inner::after{top: -104px;
		right: -108px;}
.article-note-link__label{min-height: 24px;
		margin-bottom: 8px;
		padding: 0 8px;
		font-size: 9px;}
.article-note-link__title{margin-bottom: 7px;
		font-size: 23px;
		line-height: 1.1;}
.article-note-link__text{font-size: 14px;
		line-height: 1.5;}
.article-note-link__action{justify-self: start;
		min-width: 102px;
		height: 41px;
		padding: 0 16px;
		font-size: 13px;
		border-radius: 9px;}
.route-facts{grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 22px;
		margin: 20px 0 30px;
		padding: 10px 0 10px 14px;}
.route-facts::after{width: 44px;
		top: 10px;
		bottom: 10px;}
.route-facts span{margin-bottom: 5px;
		font-size: 10px;
		letter-spacing: 0.07em;}
.route-facts strong{font-size: 15px;
		line-height: 1.32;}
}

@media (max-width: 640px){
.article-faq{margin: 40px 0;
		padding: 0;
		border-radius: 0;}
.article-faq__question{padding: 18px 48px 18px 18px;
		font-size: 17px;}
.article-faq__question::after{right: 18px;}
.article-faq__answer{padding: 0 18px 18px;}
.editor-caption{margin-top: 6px;
		font-size: 12px;
		line-height: 1.3;}
}

.article-content .editor-image{max-width: 100%;
	height: auto;}