/*
 * The journal in the Urbanica blog's structure (Ben, 6 Nov 2026), in GLO's look: centred heads, clean cards (a photo,
 * the title, the date and minutes on the plain ground), the product rails' carousel, flat buttons. Mobile first.
 * Parts: template-parts/blog/. Loads after journal.css on the journal's pages (inc/blog.php).
 */

/* The trail over the hero's headline (light on the photo). */
.hero--page .glo-crumbs { margin: 0 0 18px; }
.hero--page .glo-crumbs ol { justify-content: flex-start; }
.hero--page .glo-crumbs a, .hero--page .glo-crumbs span, .hero--page .glo-crumbs li::after { color: rgba(255, 255, 255, .86); }
.hero--page .glo-crumbs a:hover { color: #fff; }

/* The jump row: GLO's square photo tiles, one line, centred when it fits, sideways scroll when it does not. */
.bjump { background: var(--paper); padding: 32px 0 0; }
.bjump__row { display: flex; gap: 14px; justify-content: safe center; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 6px; }
.bjump__row::-webkit-scrollbar { display: none; }
.bjump__tile { flex: 0 0 96px; display: grid; justify-items: center; gap: 8px; scroll-snap-align: start; text-align: center; color: var(--navy); }
.bjump__img { display: block; width: 96px; aspect-ratio: 1; border-radius: var(--r-1); overflow: hidden; background: var(--canvas); outline: 2px solid transparent; outline-offset: 3px; transition: outline-color var(--fast); }
.bjump__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bjump__tile:hover .bjump__img img { transform: scale(1.06); }
.bjump__tile:hover .bjump__img, .bjump__tile.is-on .bjump__img { outline-color: var(--navy); }
.bjump__name { font: 600 13px/1.25 var(--f-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bjump__tile.is-on .bjump__name { font-weight: 700; }
@media (min-width: 900px) {
	.bjump { padding-top: 40px; }
	.bjump__row { gap: 18px; }
	.bjump__tile { flex-basis: 112px; }
	.bjump__img { width: 112px; }
}

/* A card: square photo, title, date and minutes. A product's own photo shows whole on white. */
.bcard { min-width: 0; }
.bcard__link { display: grid; gap: 12px; color: var(--navy); }
.bcard__img { position: relative; display: block; aspect-ratio: 1; border-radius: var(--r-1); overflow: hidden; background: var(--canvas); }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bcard__link:hover .bcard__img img { transform: scale(1.05); }
.bcard--whole .bcard__img { background: #fff; border: 1px solid var(--edge); }
.bcard--whole .bcard__img img { object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.bcard__body { display: grid; gap: 6px; }
.bcard__title { font: 600 16px/1.3 var(--f-body); text-transform: none; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--fast); }
.bcard__link:hover .bcard__title { color: var(--navy-2, var(--navy)); text-decoration: underline; text-underline-offset: 3px; }
.bcard__meta { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; color: var(--muted); }
.bcard__meta > * + *::before { content: "\00b7"; margin-right: 6px; }

/* The title on the photo: the Full Guides row and the category cards. */
.bcard--over .bcard__link { position: relative; gap: 0; }
.bcard--over .bcard__img { aspect-ratio: 4 / 5; }
.bcard--over .bcard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(18, 20, 17, .86) 0%, rgba(18, 20, 17, .45) 42%, rgba(18, 20, 17, 0) 70%); }
.bcard--over .bcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 16px; }
.bcard--over .bcard__title { color: #fff; font-size: 17px; }
.bcard--over .bcard__meta { color: rgba(255, 255, 255, .8); }
.bcard--cat .bcard__title { font: 700 22px/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .02em; -webkit-line-clamp: 2; }
.bcard--over .bcard__link:hover .bcard__title { color: #fff; }

/* Rows: the product rails' carousel; the arrows sit on the photo's middle, not the card's. */
.brail { --btext: 86px; }
.brail:has(.bcard--over) { --btext: 0px; }
.brail .rail__arrow { top: calc((100% - 6px - var(--btext)) / 2 - 23px); }
.bmore { display: flex; justify-content: center; margin-top: 32px; }
.brow--dark .h2 { color: var(--birch); }
.brow--dark .rail__bar { background: rgba(246, 243, 228, .2); }
.brow--dark .rail__bar span { background: var(--birch); }
.brow__sub { font: 700 24px/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.brow--inner .head-row { margin-bottom: 22px; }

/* The grid: All articles, and any row with fewer than four articles (centred). */
.bgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.bgrid--few { justify-content: center; }
@media (min-width: 900px) {
	.bgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 16px; }
	.bgrid--few { grid-template-columns: repeat(var(--n), calc((100% - 48px) / 4)); }
}
@media (max-width: 899px) { .bgrid--few:has(> :only-child) { grid-template-columns: minmax(0, 72%); } }

/* Latest: the newest article large, the next four beside it, both columns ending on the same line. */
.blatest__grid { display: grid; gap: 28px; }
.blatest__link { display: grid; gap: 12px; color: var(--navy); }
.blatest__img, .blatest__thumb { position: relative; display: block; border-radius: var(--r-1); overflow: hidden; background: var(--canvas); }
.blatest__img { aspect-ratio: 16 / 10; }
.blatest__img img, .blatest__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.blatest__img.is-whole, .blatest__thumb.is-whole { background: #fff; border: 1px solid var(--edge); }
.blatest__img.is-whole img, .blatest__thumb.is-whole img { object-fit: contain; padding: 7%; mix-blend-mode: multiply; }
.blatest__link:hover img, .blatest__row:hover img { transform: scale(1.04); }
.blatest__title { font: 800 clamp(24px, 2.2vw, 32px)/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .01em; color: var(--navy); text-wrap: balance; }
.blatest__dek { color: var(--muted); font-size: 16px; }
.blatest__list { display: grid; gap: 16px; }
.blatest__row { display: grid; grid-template-columns: 104px 1fr; gap: 16px; align-items: center; height: 100%; color: var(--navy); }
.blatest__thumb { aspect-ratio: 1; }
.blatest__text { display: grid; gap: 6px; }
.blatest__small { font: 600 16px/1.3 var(--f-body); text-transform: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blatest__row:hover .blatest__small, .blatest__link:hover .blatest__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
@media (min-width: 900px) {
	.blatest__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 40px; }
	.blatest__grid--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
	.blatest__list { grid-template-rows: repeat(4, 1fr); }
	.blatest__row { grid-template-columns: 128px 1fr; }
}

/* Meet the writers: the writer's card, then the row of their newest articles. */
.bwriter + .bwriter { margin-top: 56px; }
.bwriter__card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; max-width: 780px; margin: 0 auto 36px; }
.bwriter__name { font: 700 24px/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.bwriter__role { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--spruce, var(--navy)); }
.bwriter__bio { margin-top: 10px; font-size: 16px; color: var(--muted); text-wrap: pretty; }
@media (max-width: 599px) { .bwriter__card { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.bwriter__name a, .jwho__name a { color: inherit; text-decoration: none; }
.bwriter__name a:hover, .jwho__name a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* A writer's own page: the card as the article's About the author photo panel (birch wash over a photo), the
   container's width. */
.bwriters--one { --wash: color-mix(in srgb, var(--birch) 95%, transparent); --wash-2: color-mix(in srgb, var(--birch) 88%, transparent); --wash-3: color-mix(in srgb, var(--birch) 74%, transparent); }
.bwriters--one .bwriter__card { max-width: none; margin: 0; padding: 28px 22px 30px; gap: 18px; border-radius: var(--r-2); background: linear-gradient(90deg, var(--wash) 0%, var(--wash-2) 55%, var(--wash-3) 100%), var(--jimg, none) center / cover no-repeat, var(--birch); }
.bwriters--one .javatar { width: 104px; height: 104px; }
.bwriters--one .bwriter__name { font-size: 30px; }
.bwriters--one .bwriter__role { font-size: 15px; }
.bwriters--one .bwriter__bio { color: var(--ink); }
@media (min-width: 600px) {
	.bwriters--one .bwriter__card { padding: 40px 48px; gap: 32px; }
	.bwriters--one .javatar { width: 132px; height: 132px; }
	.bwriters--one .bwriter__name { font-size: 40px; }
}
/* A writer's page with a full bio (Aiden, 7 Nov 2026): "bigger images, the text a little more compact". The round photo
   grows and sits level with the name; the bio paragraphs close up. */
.bwriters--one .javatar { width: 168px; height: 168px; }
.bwriters--one .bwriter__bio { margin-top: 6px; font-size: 15px; line-height: 1.5; }
.bwriters--one .bwriter__role + .bwriter__bio { margin-top: 10px; }
@media (min-width: 600px) {
	.bwriters--one .bwriter__card { align-items: start; padding: 36px 44px; gap: 36px; }
	.bwriters--one .javatar { width: 220px; height: 220px; }
}

/* The email band: a photo and the dark panel, the same height side by side. */
.bmail__box { display: grid; border-radius: var(--r-2); overflow: hidden; background: var(--night); }
.bmail__photo { aspect-ratio: 16 / 9; margin: 0; }
.bmail__photo img { width: 100%; height: 100%; object-fit: cover; }
.bmail__panel { display: grid; align-content: center; padding: 32px 24px 36px; color: var(--birch); }
.bmail__title { font: 800 clamp(28px, 2.6vw, 40px)/1 var(--f-head); letter-spacing: .01em; color: var(--birch); text-wrap: balance; }
.bmail__line { margin-top: 14px; color: var(--muted-light); font-size: 16px; max-width: 46ch; }
.bmail__form { margin-top: 22px; }
.bmail__panel .signup__note { margin-top: 10px; color: var(--birch); font-size: 14px; }
.bmail__panel .signup__note:empty { display: none; }
.bmail__legal { margin-top: 12px; font-size: 12px; color: var(--muted-light); max-width: 52ch; }
@media (min-width: 900px) {
	.bmail__box { grid-template-columns: 1fr 1fr; min-height: 360px; }
	.bmail__photo { aspect-ratio: auto; }
	.bmail__panel { padding: 48px 52px; }
}

/* The store as the writer: its logo in the round frame. */
.javatar--logo { background: var(--paper); border: 1px solid var(--edge); }
.javatar--logo img { width: 76%; height: auto; }