/* =========================================================
   LANO AUTHORITY ARTICLE SYSTEM
   Scope: .lano-local-guide
   Compatible post IDs: 14635, 14671
   Version: 3.0
   Notes:
   - Shared system for Local Guide, Process, Handmade, Bespoke,
     Leather Guide, Buying Guide and Authority Blog articles.
   - FAQ styles are intentionally excluded because FAQ is rendered
     and styled by the existing FAQ plugin.
========================================================= */

.lano-local-guide {
	--lano-gold: #887839;
	--lano-gold-dark: #6f612d;
	--lano-gold-light: #b4a267;
	--lano-gold-soft: #f6f2e5;
	--lano-gold-pale: #fbf8ef;
	--lano-text: #282828;
	--lano-heading: #24221d;
	--lano-muted: #666;
	--lano-border: #e7e2d5;
	--lano-border-strong: rgba(136, 120, 57, 0.34);
	--lano-bg-soft: #faf9f6;
	--lano-bg-dark: #29271f;
	--lano-white: #fff;
	--lano-radius-sm: 11px;
	--lano-radius: 16px;
	--lano-radius-lg: 22px;
	--lano-shadow-sm: 0 8px 24px rgba(31, 27, 18, 0.05);
	--lano-shadow: 0 14px 40px rgba(31, 27, 18, 0.075);
	--lano-shadow-hover: 0 18px 48px rgba(31, 27, 18, 0.11);
	--lano-content-width: 1180px;

	position: relative;
	color: var(--lano-text);
	font-size: 17px;
	line-height: 1.82;
}

.lano-local-guide,
.lano-local-guide * {
	box-sizing: border-box;
}

.lano-local-guide p {
	margin: 0 0 18px;
}

.lano-local-guide p:last-child {
	margin-bottom: 0;
}

.lano-local-guide strong {
	color: #383328;
}

.lano-local-guide a {
	color: var(--lano-gold-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.lano-local-guide a:hover {
	color: var(--lano-gold);
	text-decoration-color: var(--lano-gold);
}

.lano-local-guide ul,
.lano-local-guide ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.lano-local-guide li {
	margin-bottom: 8px;
}

.lano-local-guide h2 {
	position: relative;
	margin: 0 0 24px;
	padding: 0 0 14px;
	color: var(--lano-heading);
	font-size: clamp(26px, 3vw, 35px);
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.015em;
}

.lano-local-guide h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 74px;
	height: 3px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--lano-gold), var(--lano-gold-light));
}

.lano-local-guide h3 {
	margin: 30px 0 12px;
	color: #302d25;
	font-size: clamp(20px, 2.2vw, 23px);
	font-weight: 700;
	line-height: 1.42;
}

.lano-local-guide h4 {
	margin: 24px 0 10px;
	color: #363128;
	font-size: 18px;
	line-height: 1.45;
}

/* ---------------------------------------------------------
   INTRO / HERO
--------------------------------------------------------- */

.lano-guide-intro {
	position: relative;
	overflow: hidden;
	margin: 0 0 34px;
	padding: clamp(26px, 5vw, 50px);
	border: 1px solid var(--lano-border);
	border-radius: var(--lano-radius-lg);
	background:
		radial-gradient(circle at top right, rgba(136, 120, 57, 0.14), transparent 34%),
		linear-gradient(135deg, rgba(136, 120, 57, 0.08), rgba(255, 255, 255, 0.92)),
		var(--lano-white);
	box-shadow: var(--lano-shadow);
	isolation: isolate;
}

.lano-guide-intro::before,
.lano-guide-intro::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.lano-guide-intro::before {
	top: -105px;
	right: -92px;
	width: 245px;
	height: 245px;
	background: rgba(136, 120, 57, 0.085);
}

.lano-guide-intro::after {
	left: -85px;
	bottom: -105px;
	width: 190px;
	height: 190px;
	background: rgba(136, 120, 57, 0.045);
}

.lano-local-guide h2.lano-guide-kicker {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: 100%;
	margin: 0 0 18px;
	padding: 10px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--lano-gold), var(--lano-gold-dark));
	color: var(--lano-white);
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	box-shadow: 0 7px 18px rgba(111, 97, 45, 0.18);
}

.lano-local-guide h2.lano-guide-kicker::after {
	display: none;
	content: none;
}

.lano-guide-lead {
	position: relative;
	max-width: 980px;
	color: #353129;
	font-size: clamp(19px, 2.2vw, 23px);
	line-height: 1.68;
}

/* ---------------------------------------------------------
   SUMMARY / KEY POINTS
--------------------------------------------------------- */

.lano-guide-summary {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 28px;
}

.lano-guide-summary-item {
	min-width: 0;
	padding: 18px;
	border: 1px solid rgba(136, 120, 57, 0.22);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 7px 20px rgba(31, 27, 18, 0.035);
	backdrop-filter: blur(3px);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lano-guide-summary-item:hover {
	transform: translateY(-2px);
	border-color: rgba(136, 120, 57, 0.36);
	box-shadow: var(--lano-shadow-sm);
}

.lano-guide-summary-item strong {
	display: block;
	margin-bottom: 5px;
	color: var(--lano-gold-dark);
	font-size: 16px;
}

.lano-guide-summary-item span {
	display: block;
	color: var(--lano-muted);
	font-size: 14px;
	line-height: 1.58;
}

/* ---------------------------------------------------------
   MAIN ARTICLE SECTION
--------------------------------------------------------- */

.lano-guide-section {
	position: relative;
	margin: 34px 0;
	padding: clamp(25px, 4vw, 42px);
	border: 1px solid var(--lano-border);
	border-radius: var(--lano-radius);
	background: var(--lano-white);
	box-shadow: var(--lano-shadow-sm);
}

.lano-guide-section.is-soft {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.72), rgba(250,249,246,0.96)),
		var(--lano-bg-soft);
}

.lano-guide-section.is-highlight {
	border-color: var(--lano-border-strong);
	background:
		linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251,248,239,0.98)),
		var(--lano-gold-pale);
	box-shadow: 0 12px 34px rgba(111, 97, 45, 0.08);
}

.lano-guide-section > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   PROCESS / TIMELINE ENHANCEMENT
   Automatically enhances numbered H2 sections in process articles.
--------------------------------------------------------- */

.lano-wallet-process .lano-guide-section {
	padding-left: clamp(30px, 5vw, 58px);
}

.lano-wallet-process .lano-guide-section::before {
	content: "";
	position: absolute;
	top: 40px;
	bottom: 40px;
	left: 20px;
	width: 2px;
	border-radius: 999px;
	background: linear-gradient(
		180deg,
		rgba(136, 120, 57, 0.55),
		rgba(136, 120, 57, 0.10)
	);
}

.lano-wallet-process .lano-guide-section > h2:first-child::before {
	content: "";
	position: absolute;
	top: 8px;
	left: calc(clamp(30px, 5vw, 58px) * -1 + 11px);
	width: 18px;
	height: 18px;
	border: 4px solid var(--lano-gold-soft);
	border-radius: 50%;
	background: var(--lano-gold);
	box-shadow: 0 0 0 1px rgba(136, 120, 57, 0.22);
}

.lano-wallet-process .lano-guide-section:first-of-type::before,
.lano-wallet-process .lano-guide-conclusion::before,
.lano-wallet-process .lano-guide-bespoke::before {
	display: none;
}

/* ---------------------------------------------------------
   CARDS
--------------------------------------------------------- */

.lano-guide-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 24px 0 4px;
}

.lano-guide-card {
	min-width: 0;
	padding: 21px;
	border: 1px solid var(--lano-border);
	border-radius: 14px;
	background: var(--lano-white);
	box-shadow: 0 6px 18px rgba(31, 27, 18, 0.035);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lano-guide-card:hover {
	transform: translateY(-3px);
	border-color: rgba(136, 120, 57, 0.34);
	box-shadow: var(--lano-shadow-sm);
}

.lano-guide-card h3 {
	margin-top: 0;
	margin-bottom: 10px;
	color: var(--lano-gold-dark);
	font-size: 19px;
}

.lano-guide-card p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   CHECKLIST
--------------------------------------------------------- */

.lano-guide-checklist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 22px 0 8px;
	padding: 0;
	list-style: none;
}

.lano-guide-checklist li {
	position: relative;
	margin: 0;
	padding: 15px 16px 15px 46px;
	border: 1px solid var(--lano-border);
	border-radius: 12px;
	background: var(--lano-white);
	line-height: 1.58;
	box-shadow: 0 4px 14px rgba(31, 27, 18, 0.025);
}

.lano-guide-checklist li::before {
	content: "✓";
	position: absolute;
	top: 15px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lano-gold-soft);
	color: var(--lano-gold-dark);
	font-size: 13px;
	font-weight: 800;
}

/* ---------------------------------------------------------
   NOTES / CALLOUTS / INSIGHTS
--------------------------------------------------------- */

.lano-guide-note {
	position: relative;
	margin: 24px 0;
	padding: 21px 22px 21px 24px;
	border: 1px solid rgba(136, 120, 57, 0.20);
	border-left: 4px solid var(--lano-gold);
	border-radius: 0 13px 13px 0;
	background:
		linear-gradient(90deg, rgba(246, 242, 229, 0.96), rgba(255,255,255,0.94));
	box-shadow: 0 5px 18px rgba(111, 97, 45, 0.04);
}

.lano-guide-note strong {
	color: var(--lano-gold-dark);
}

.lano-guide-insight {
	position: relative;
	margin: 26px 0;
	padding: 22px 24px 22px 58px;
	border: 1px solid rgba(136, 120, 57, 0.28);
	border-radius: 14px;
	background: #fffdf7;
}

.lano-guide-insight::before {
	content: "✦";
	position: absolute;
	top: 21px;
	left: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--lano-gold);
	color: var(--lano-white);
	font-size: 13px;
	font-weight: 800;
}

.lano-guide-quote {
	margin: 28px 0;
	padding: 24px 26px;
	border: 0;
	border-radius: 14px;
	background: #f5f2e9;
	color: #39352c;
	font-size: 19px;
	font-style: italic;
	line-height: 1.65;
	box-shadow: inset 4px 0 0 var(--lano-gold);
}

/* ---------------------------------------------------------
   COMPARISON
--------------------------------------------------------- */

.lano-guide-comparison {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 24px 0;
}

.lano-guide-comparison > div {
	min-width: 0;
	padding: 23px;
	border: 1px solid var(--lano-border);
	border-radius: 14px;
	background: var(--lano-white);
	box-shadow: 0 6px 18px rgba(31, 27, 18, 0.035);
}

.lano-guide-comparison h3 {
	margin-top: 0;
	color: var(--lano-gold-dark);
}

/* Optional semantic table */
.lano-guide-table {
	width: 100%;
	margin: 24px 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 1px solid var(--lano-border);
	border-radius: 14px;
	background: var(--lano-white);
	box-shadow: var(--lano-shadow-sm);
}

.lano-guide-table th,
.lano-guide-table td {
	padding: 15px 17px;
	border-right: 1px solid var(--lano-border);
	border-bottom: 1px solid var(--lano-border);
	text-align: left;
	vertical-align: top;
}

.lano-guide-table th {
	background: var(--lano-gold-soft);
	color: var(--lano-gold-dark);
	font-weight: 700;
}

.lano-guide-table tr:last-child td {
	border-bottom: 0;
}

.lano-guide-table th:last-child,
.lano-guide-table td:last-child {
	border-right: 0;
}

/* ---------------------------------------------------------
   INTERNAL LINK / RELATED CONTENT
--------------------------------------------------------- */

.lano-guide-linkbox {
	margin: 25px 0;
	padding: 21px 22px;
	border: 1px dashed rgba(136, 120, 57, 0.58);
	border-radius: 13px;
	background: #fffdf7;
}

.lano-guide-linkbox p:last-child {
	margin-bottom: 0;
}

.lano-guide-product-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.lano-guide-product-list li {
	margin: 0;
	padding: 16px 17px;
	border: 1px solid var(--lano-border);
	border-radius: 12px;
	background: var(--lano-bg-soft);
}

/* ---------------------------------------------------------
   BESPOKE / DARK CTA BLOCK
--------------------------------------------------------- */

.lano-guide-bespoke {
	position: relative;
	overflow: hidden;
	margin: 36px 0;
	padding: clamp(28px, 5vw, 46px);
	border: 1px solid rgba(255,255,255,0.04);
	border-radius: 19px;
	background:
		radial-gradient(circle at bottom right, rgba(136, 120, 57, 0.34), transparent 34%),
		linear-gradient(135deg, #302e25, var(--lano-bg-dark));
	color: #f7f5ef;
	box-shadow: 0 16px 42px rgba(31, 27, 18, 0.18);
}

.lano-guide-bespoke::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -100px;
	width: 230px;
	height: 230px;
	border-radius: 50%;
	background: rgba(136, 120, 57, 0.18);
}

.lano-guide-bespoke h2,
.lano-guide-bespoke h3 {
	position: relative;
	z-index: 1;
	color: var(--lano-white);
}

.lano-guide-bespoke h2::after {
	background: #d7c57b;
}

.lano-guide-bespoke p,
.lano-guide-bespoke ul {
	position: relative;
	z-index: 1;
}

.lano-guide-bespoke strong {
	color: #fff;
}

.lano-guide-bespoke a {
	color: #f0d98f;
}

.lano-guide-bespoke a:hover {
	color: #fff0b6;
}

/* Optional buttons */
.lano-guide-actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.lano-guide-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 19px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--lano-gold);
	color: var(--lano-white) !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform 0.2s ease, background 0.2s ease;
}

.lano-guide-button:hover {
	transform: translateY(-1px);
	background: var(--lano-gold-dark);
}

.lano-guide-button.is-outline {
	border-color: rgba(255,255,255,0.34);
	background: transparent;
	color: var(--lano-white) !important;
}

/* ---------------------------------------------------------
   STORE / LOCAL SECTION
--------------------------------------------------------- */

.lano-guide-store {
	margin: 36px 0;
	padding: clamp(27px, 5vw, 46px);
	border: 1px solid var(--lano-border-strong);
	border-radius: 20px;
	background:
		linear-gradient(145deg, rgba(255,255,255,0.98), rgba(247,242,227,0.96));
	box-shadow: var(--lano-shadow);
}

.lano-guide-store-layout {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(24px, 4vw, 42px);
	align-items: center;
	margin-top: 24px;
}

.lano-guide-store-media,
.lano-guide-store-content {
	min-width: 0;
}

.lano-guide-store-media .lano-guide-image,
.lano-guide-store-media .wp-caption {
	margin: 0 auto;
}

.lano-guide-store-content > p:first-child {
	margin-top: 0;
}

.lano-guide-store-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 24px;
}

.lano-guide-address {
	width: 100%;
	padding: 22px;
	border: 1px solid var(--lano-border);
	border-radius: 14px;
	background: var(--lano-white);
	box-shadow: 0 5px 16px rgba(31, 27, 18, 0.03);
}

.lano-guide-address h3 {
	margin-top: 0;
	color: var(--lano-gold-dark);
}

.lano-guide-address p:last-child {
	margin-bottom: 0;
}

.lano-guide-hotline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.lano-guide-hotline a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--lano-gold);
	color: var(--lano-white);
	font-weight: 700;
	text-decoration: none;
}

.lano-guide-hotline a:hover {
	background: var(--lano-gold-dark);
	color: var(--lano-white);
}

/* ---------------------------------------------------------
   CONCLUSION
--------------------------------------------------------- */

.lano-guide-conclusion {
	position: relative;
	margin: 36px 0;
	padding: clamp(26px, 4vw, 40px);
	border: 1px solid rgba(136, 120, 57, 0.16);
	border-radius: var(--lano-radius);
	background:
		linear-gradient(135deg, rgba(245,242,233,0.98), rgba(251,249,243,0.96));
}

.lano-guide-conclusion h2 {
	margin-top: 0;
}

/* ---------------------------------------------------------
   IMAGE SYSTEM
--------------------------------------------------------- */

.lano-guide-image {
	margin: 30px 0;
	text-align: center;
}

.lano-local-guide .wp-caption,
.lano-local-guide figure {
	max-width: 100% !important;
	margin: 30px auto;
	padding: 10px;
	border: 1px solid var(--lano-border);
	border-radius: 16px;
	background: var(--lano-white);
	box-shadow: var(--lano-shadow-sm);
}

.lano-local-guide .wp-caption img,
.lano-local-guide figure img,
.lano-local-guide > img,
.lano-guide-image img,
.lano-local-guide section > img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 30px auto;
	border-radius: 11px;
	box-shadow: 0 8px 24px rgba(31, 27, 18, 0.07);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.lano-local-guide .wp-caption img:hover,
.lano-local-guide figure img:hover,
.lano-guide-image img:hover,
.lano-local-guide section > img:hover {
	transform: translateY(-2px);
	box-shadow: var(--lano-shadow-hover);
}

.lano-local-guide .wp-caption-text,
.lano-local-guide figcaption {
	margin: 10px 6px 2px;
	color: var(--lano-muted);
	font-size: 14px;
	line-height: 1.55;
	text-align: center;
}

/* Avoid double spacing inside caption frame */
.lano-local-guide .wp-caption img,
.lano-local-guide figure img {
	margin: 0 auto;
}

/* Two-column media/content layout */
.lano-guide-split {
	display: grid;
	grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 42px);
	align-items: center;
}

.lano-guide-split.is-reverse {
	grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
}

.lano-guide-split.is-reverse .lano-guide-split-media {
	order: 2;
}

.lano-guide-split.is-reverse .lano-guide-split-content {
	order: 1;
}

.lano-guide-split-media,
.lano-guide-split-content {
	min-width: 0;
}

.lano-guide-split-media .gallery,
.lano-guide-split-media .wp-caption,
.lano-guide-split-media figure,
.lano-guide-split-media img {
	margin: 0 auto !important;
}

.lano-guide-split-content > :first-child {
	margin-top: 0;
}

.lano-guide-split-content > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------
   ACCESSIBILITY / MOTION
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.lano-local-guide *,
	.lano-local-guide *::before,
	.lano-local-guide *::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 980px) {
	.lano-guide-summary,
	.lano-guide-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lano-guide-store-layout {
		grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
	}
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 820px) {
	.lano-local-guide {
		font-size: 16px;
		line-height: 1.76;
	}

	.lano-guide-summary,
	.lano-guide-cards,
	.lano-guide-checklist,
	.lano-guide-product-list,
	.lano-guide-store-layout,
	.lano-guide-comparison {
		grid-template-columns: 1fr;
	}

	.lano-guide-store-layout {
		align-items: start;
	}

	.lano-guide-section,
	.lano-guide-store,
	.lano-guide-bespoke,
	.lano-guide-conclusion {
		padding: 24px 19px;
	}

	.lano-wallet-process .lano-guide-section {
		padding-left: 28px;
	}

	.lano-wallet-process .lano-guide-section::before,
	.lano-wallet-process .lano-guide-section > h2:first-child::before {
		display: none;
	}

	.lano-guide-hotline a,
	.lano-guide-button {
		width: 100%;
	}

	.lano-guide-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.lano-local-guide h2.lano-guide-kicker {
		padding: 9px 14px;
		font-size: 13px;
		line-height: 1.4;
	}

	.lano-guide-intro {
		padding: 25px 19px;
	}

	.lano-guide-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.lano-guide-insight {
		padding: 20px 18px 20px 52px;
	}

	.lano-guide-split,
	.lano-guide-split.is-reverse {
		grid-template-columns: 1fr;
	}

	.lano-guide-split.is-reverse .lano-guide-split-media,
	.lano-guide-split.is-reverse .lano-guide-split-content {
		order: initial;
	}
}

@media (max-width: 520px) {
	.lano-local-guide h2 {
		font-size: 25px;
	}

	.lano-local-guide h3 {
		font-size: 20px;
	}

	.lano-guide-summary-item,
	.lano-guide-card,
	.lano-guide-comparison > div {
		padding: 17px;
	}

	.lano-guide-note,
	.lano-guide-linkbox,
	.lano-guide-quote {
		padding: 18px;
	}
}