/* =====================================================================
   GOKUDO Newsroom listing page layout. It loads on the page:newsroom
   context, registered in gokudo_pages() (inc/routing.php) and resolved by
   inc/assets.php. The shared banner, footer, and reveal styles are in
   base.css, loaded site-wide.
   ===================================================================== */

/* ============ PAGE HEAD ============ */
/* The page head (breadcrumb, title, count) lives in components.css.
   Newsroom uses the shared values, except for the title size below:
   this listing runs a smaller H1 than cart, checkout, account, and products. */
.pagehead{--ph-title-size:clamp(54px,7.4vw,112px)}

/* ============ FEED ============ */
/* 1 section holds the featured item, the archive list, the empty state, and the pager.
   They are 1 list of posts, so no hairline divides them. Each part that follows another
   part states its own top margin. */
.feed{padding:64px 0 90px;background:var(--bg)}

/* ============ FEATURED DISPATCH ============ */
.featured{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--line);background:var(--surface);
	transition:border-color .35s}
.featured:hover{border-color:var(--ink)}
.featured-media{position:relative;background:var(--surface);overflow:hidden;min-height:480px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line2)}
.featured-media img{width:100%;height:100%;object-fit:contain;object-position:center 52%;padding:40px 30px 50px;mix-blend-mode:multiply}
/* A post without a featured image has no media column. The body takes the full width,
   and so does the excerpt, which drops the measure cap of .sub below. */
.featured.noimg{grid-template-columns:1fr}
.featured.noimg .sub{max-width:none}
.featured-body{padding:clamp(34px,4vw,58px);display:flex;flex-direction:column;justify-content:center}
.featured-body .dateline{display:flex;align-items:center;gap:12px;color:var(--faint);font-family:var(--label);
	font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:26px;flex-wrap:wrap}
.featured-body .dateline .dot{width:5px;height:5px;background:var(--line);border-radius:50%}
.featured-body .dateline .tag{color:var(--blue)}
.featured-body h2{font-family:var(--display);font-weight:900;font-size:clamp(40px,4.6vw,72px);line-height:.9;text-transform:uppercase;letter-spacing:var(--track-lg)}
.featured-body h2 em{font-style:normal;color:var(--blue)}
.featured-body .sub{color:var(--muted);font-size:17px;line-height:1.7;margin:22px 0 30px;max-width:460px}
.read-cta{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
	font-size:12px;letter-spacing:.2em;padding:17px 26px;transition:.24s}

/* ============ DISPATCH LIST ============ */
/* The list follows the featured item with no label, only a short gap. */
.featured + .dlist{margin-top:24px}
.drow{display:grid;grid-template-columns:140px 1fr auto;gap:30px;align-items:center;
	padding:30px 26px;border:1px solid var(--line);border-bottom:none;background:var(--surface)}
.drow:last-of-type{border-bottom:1px solid var(--line)}
.drow .d-thumb{width:140px;height:88px;background:var(--bg2);border:1px solid var(--line2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.drow .d-thumb img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
/* A post without a featured image has no thumbnail column. The title starts at the left
   edge of the row. The date column stays at the right edge, so it aligns with the rows
   that have a thumbnail. */
.drow.noimg{grid-template-columns:1fr auto}
.drow .d-main h3{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.4vw,34px);text-transform:uppercase;line-height:.95;letter-spacing:var(--track-md);margin-bottom:10px;transition:color .24s}
/* Exception: no link mark at rest. The whole row is the link, and the reader knows that
   a row opens a story. The title answers the cursor. */
.drow:hover .d-main h3{color:var(--blue)}
.drow .d-main p{color:var(--muted);font-size:14.5px;line-height:1.6}
/* The date column is the last column of the row. It is as wide as the longest date,
   "28 September 2026" (126.8px at 11px, because the figures share 1 width). The column
   takes its width from this rule, so it is the same in every row, and the title and the
   excerpt get the same width in every row. The date and the category align to the right
   edge of the row. The width has a small margin over the measure, so a 1px difference in
   text rendering cannot wrap the date. Measure the longest date again after a change to
   the face or the tracking. */
.drow .d-when{width:11.6em;text-align:right;white-space:nowrap;font-family:var(--label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.7}
.drow .d-when .tag{display:block;margin-top:8px;color:var(--blue);white-space:normal}

/* ============ REGISTER STRIP ============ */
.register{padding:90px 0;background:var(--bg);border-top:1px solid var(--line)}
.reg-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
	border:1px solid var(--line);padding:48px 52px;background:var(--bg2)}
.reg-in h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,46px);text-transform:uppercase;letter-spacing:var(--track-md);line-height:.95}
.reg-in h3 em{font-style:normal;color:var(--blue)}
.reg-in p{color:var(--muted);font-size:16px;margin-top:12px;max-width:440px;line-height:1.6}
.reg-in form{display:flex;border:1px solid var(--line);min-width:320px;background:var(--surface)}
.reg-in input{flex:1;background:transparent;border:none;color:var(--ink);padding:18px;font-family:var(--label);font-size:12px;letter-spacing:.1em;outline:none}
.reg-in input::placeholder{color:var(--faint)}
/* The same subscribe-form.php renders under .news-in and .artcta-in, and the three read
   alike. */
.reg-in button{border:none;cursor:pointer;font-size:11px;letter-spacing:.18em;padding:0 24px;transition:.2s}

/* ============ RESPONSIVE (Newsroom only) ============ */
@media(max-width:980px){
	.featured{grid-template-columns:1fr}
	.featured-media{min-height:360px;border-right:none;border-bottom:1px solid var(--line2)}
	/* The row keeps its columns. Only the thumbnail and the gaps get smaller. The
	   thumbnail keeps the 140 × 88 ratio. */
	.drow{grid-template-columns:120px 1fr auto;gap:20px}
	.drow .d-thumb{width:120px;height:75px}
}
@media(max-width:560px){
	/* The row has no room for a side column, so its items stack in markup order: the
	   thumbnail, the title and the excerpt, then the date and the category on 1 line. */
	.drow,.drow.noimg{grid-template-columns:1fr;row-gap:14px}
	.drow .d-thumb{width:100%;height:160px}
	.drow .d-when{display:flex;flex-wrap:wrap;column-gap:14px;width:auto;text-align:left}
	.drow .d-when .tag{margin-top:0}
	.reg-in{padding:32px 26px}
}

/* ============ PAGER (newsroom pagination) ============ */
.pager{margin-top:90px}
.pager .page-list{list-style:none;display:flex;justify-content:center;align-items:stretch;gap:8px;margin:0;padding:0;flex-wrap:wrap}
.pager .page-list li{display:flex}
.pager .page-numbers{display:flex;align-items:center;min-width:42px;justify-content:center;padding:12px 16px;
	border:1px solid var(--line);color:var(--muted);font-family:var(--label);font-size:11px;letter-spacing:.14em;
	text-transform:uppercase;font-weight:700;transition:.18s;text-decoration:none}
.pager a.page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.pager .page-numbers.current{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.pager .page-numbers.dots{border-color:transparent;color:var(--faint)}
.pager .prev,.pager .next{padding:12px 20px}