/* ============================================================
   Dấu Chân Tự Do — Journal article layout (single.php)

   Loaded on single posts only (inc/enqueue.php, is_single() guard), so page
   templates and tour details are untouched by anything here.

   Everything inside .article itself — type scale, blockquote, tables, the
   md-to-wp CTA — lives in main.css because .article is reused by the product
   story block. This file only adds the two-column shell and the sticky rail.
   ============================================================ */

/* ---- two-column shell ---------------------------------------------------- */
.article-layout{
	display:grid;
	grid-template-columns:minmax(0,1fr) 320px;
	gap:56px;
	align-items:start;
}

/* main.css caps .article at 760px and centres it. Inside the grid the column
   already sets the measure, so the cap would only push the text away from the
   rail and leave a gutter that reads as a broken layout. */
.article-layout > .article{max-width:none;margin:0}

/* Anchor landing offset. .site-header is position:fixed with a 78px bar, so a
   heading jumped to from the contents list would otherwise land at top:0 and sit
   behind the header — you click a contents link and the heading you asked for is
   the one thing you cannot see. 100px matches .article-rail's top offset, giving
   the heading ~22px of clearance. */
.article-layout h2[id]{scroll-margin-top:100px}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
}

/* ---- reading progress --------------------------------------------------- */
/* Fixed to the viewport top. z-index sits above the sticky header (which uses
   the theme's header layer) so the bar is never covered. */
.read-progress{
	position:fixed;
	inset:0 0 auto 0;
	height:3px;
	z-index:120;
	background:transparent;
	pointer-events:none;
}
.read-progress__bar{
	display:block;
	height:100%;
	width:0;
	background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt));
	transition:width 90ms linear;
}

/* ---- sticky rail -------------------------------------------------------- */
/* The sticky is on the COLUMN, not on an individual card — a sticky card drifts
   down as you scroll and collides with whatever sits below it in the same
   column. Same approach as .tour-aside in main.css.
   top:100px clears the sticky site header.

   The height cap is the important part. Unlike .tour-aside, this rail carries
   four cards, and a seven-heading contents list pushed the total past 1000px —
   taller than a 900px viewport. A sticky element taller than the viewport can
   never be scrolled to its bottom: the page scrolls, the element stays pinned,
   so its last card is permanently out of reach. Capping to the viewport and
   scrolling the rail itself is what makes every card reachable.

   The cap lives on the RAIL, not on the contents list, so there is exactly one
   scroll container. Nesting a second one gives the reader two scrollbars in the
   same 320px column and it becomes guesswork which one their wheel drives. */
.article-rail{
	position:sticky;
	top:100px;
	align-self:start;
	display:grid;
	gap:20px;
	max-height:calc(100vh - 124px);
	overflow-y:auto;
	/* Room for the scrollbar so it never sits on top of the card borders. */
	padding-right:4px;
	scrollbar-width:thin;
	scrollbar-color:var(--sand) transparent;
	overscroll-behavior:contain;
}
.article-rail::-webkit-scrollbar{width:6px}
.article-rail::-webkit-scrollbar-track{background:transparent}
.article-rail::-webkit-scrollbar-thumb{background:var(--sand);border-radius:3px}
.article-rail::-webkit-scrollbar-thumb:hover{background:var(--stone)}

.rail-card{
	background:var(--atmo1);
	border:1px solid var(--sand);
	padding:20px;
}
.rail-card .eyebrow{display:block;margin-bottom:14px;color:var(--gold-dk)}

/* ---- contents list ------------------------------------------------------ */
/* No cap or overflow here on purpose — the rail is the single scroll container.
   Labels are shortened server-side by dctd_heading_short_label(), so an entry is
   one or two lines rather than the three a full SEO heading needs at this width.
   The full heading stays on the link's title/aria-label. */
.rail-toc{
	list-style:none;
	margin:0;
	padding:0;
	font-size:14px;
	line-height:1.45;
}
.rail-toc li{margin-bottom:2px}
.rail-toc a{
	display:block;
	padding:7px 0 7px 14px;
	color:var(--taupe);
	text-decoration:none;
	border-left:2px solid var(--sand);
	transition:color var(--t-base),border-color var(--t-base);
}
.rail-toc a:hover,
.rail-toc a:focus-visible{color:var(--ink1);border-left-color:var(--stone)}
.rail-toc a.is-active{color:var(--gold-dk);border-left-color:var(--gold);font-weight:600}

/* ---- booking CTA ------------------------------------------------------- */
.rail-cta{background:var(--atmo2);border-color:var(--gold-lt)}
.rail-cta p{font-size:14px;line-height:1.7;color:var(--taupe);margin:0 0 16px}

/* Flex column with align-self:stretch rather than width:100% on the button.
   The theme sets border-box in style.css, but style.css is enqueued after
   main.css and a future reorder would silently reintroduce a 100%+padding
   overflow. Stretch is immune to the box model either way. */
.rail-cta{display:flex;flex-direction:column;align-items:stretch}
.rail-btn{
	display:flex;
	align-self:stretch;
	justify-content:center;
	text-align:center;
	white-space:nowrap;
	min-width:0;
}
.rail-phone{
	display:block;
	margin-top:12px;
	text-align:center;
	font-size:13px;
	color:var(--taupe);
	text-decoration:none;
}
.rail-phone strong{color:var(--gold-dk);white-space:nowrap}
.rail-phone:hover strong{color:var(--ink1)}

/* ---- linked tour in the rail ------------------------------------------- */
/* .rel-tours is a responsive multi-column grid in main.css, which collapses
   badly in a 320px column. Force one column here. */
.rail-tours .rel-tours{grid-template-columns:1fr;gap:12px}
.rail-tours .rel-tour{padding:10px}
.rail-tours .rel-tour img{width:64px;height:64px;flex:0 0 64px}
.rail-tours .rel-tour .rt-t{font-size:15px}

/* ---- author card ------------------------------------------------------- */
.rail-author{display:flex;gap:12px;align-items:center}
.ra-av{
	width:42px;
	height:42px;
	flex:0 0 42px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--gold-dk);
	color:var(--cream);
	font-family:var(--display);
	font-weight:var(--w-strong);
	font-size:15px;
	letter-spacing:.02em;
}
.ra-body{display:block;min-width:0}
.ra-name{display:block;font-family:var(--display);font-weight:var(--w-strong);font-size:15px;color:var(--ink1)}
.ra-role{display:block;font-size:12.5px;color:var(--stone);margin-top:2px}

/* ---- tags -------------------------------------------------------------- */
.article-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:0}
.article-tags li{margin:0}
.article-tags a{
	display:inline-block;
	padding:6px 12px;
	font-size:11.5px;
	letter-spacing:.1em;
	text-transform:uppercase;
	font-weight:600;
	color:var(--taupe);
	background:var(--atmo1);
	border:1px solid var(--sand);
	text-decoration:none;
}
.article-tags a:hover{border-color:var(--gold);color:var(--gold-dk)}

/* ---- responsive -------------------------------------------------------- */
/* Matches the 1024px breakpoint .tour-aside uses. Below it the rail sits ABOVE
   the article (order:-1) so the contents list and the CTA are the first things
   seen, and un-sticks because a static column has nothing to stick to. */
/* minmax(0,…) everywhere, never a bare 1fr. A bare 1fr is minmax(auto,1fr), so
   the track grows to the widest item's MIN-CONTENT width — one wide table or a
   long unbroken string then pushes the column past the viewport and the whole
   page scrolls sideways. Measured at 390px: a bare 1fr gave a 436px document. */
@media(max-width:1024px){
	.article-layout{grid-template-columns:minmax(0,1fr);gap:36px}
	.article-rail{
		position:static;
		top:auto;
		order:-1;
		grid-template-columns:minmax(0,1fr) minmax(0,1fr);
		/* Un-stuck, so the cap and the inner scroll must go — a static column
		   scrolls with the page and capping it would hide cards for no reason. */
		max-height:none;
		overflow-y:visible;
		padding-right:0;
	}
	.rail-card--toc{grid-column:1 / -1}
}

@media(max-width:700px){
	.article-rail{grid-template-columns:minmax(0,1fr)}
	.rail-card{padding:18px}
	/* Long Vietnamese headings in the contents list have few break opportunities;
	   without this a single long word can still widen the card. */
	.rail-toc a{overflow-wrap:anywhere}
}

@media(prefers-reduced-motion:reduce){
	.read-progress__bar{transition:none}
}