/**
 * Blogbejegyzés és bejegyzéslista.
 *
 * Az értékek az élesről mértek, 1440px-en, a
 * /milyen-szertartast-valasszak/ és a /hogyan-valassz-eskuvoi-tortat/ lapon.
 *
 * A bejegyzés tipográfiája NEM szorul ide: a theme.json globális értékei
 * pontosan az élesen mért alapot tartják (Lato 16/1,6/−0,1px, Playfair
 * címsorok 36/30/24/20/18/16-on, 1,125-ös sormagassággal, 700-zal). Itt csak
 * az van, ami elrendezés — meg az a két dolog, ami az élesen eltér az
 * alapértelmezéstől: a hős és a linkszín.
 */

/* ---------------------------------------------------------------------------
   Hős

   Az élesen egy 1144×640-es doboz, `background-image` a kiemelt képpel,
   `cover` méretezéssel, `0% 0%` pozícióval — tehát BAL FELSŐ sarokhoz
   igazítva, nem középre. Rajta abszolút pozicionált címsor. Sötétítő réteg
   nincs: a világos felirat közvetlenül a fotón ül.

   Itt `core/cover`-t használunk `useFeaturedImage`-dzsel a nyers háttérkép
   helyett. A látvány ugyanaz (`object-fit: cover` + `object-position: 0% 0%`
   a `focalPoint`-ból), de a kép `<img>`-ként jön, tehát kap `srcset`-et —
   az élesen mindig a teljes méretű eredeti töltődik be, méretváltozat nélkül.
   F6: érdemes lesz 1144×640-es képméretet regisztrálni hozzá.

   ⚠️ AKADÁLYMENTESÍTÉS: a #f9f8f6 felirat kontrasztja a fotótól függ, és
   sötétítő réteg nélkül egy világos képen olvashatatlanná válik. Az élesen is
   így van, ezért másoljuk; az F7-ben érdemes Andreával megbeszélni egy halvány
   sötétítést vagy szövegárnyékot.
   --------------------------------------------------------------------------- */

.ph-bejegyzes-hero {
	/* A magasságot a blokk `minHeight` attribútuma adja soron belüli stílusként. */
	padding: 0;
}

.ph-bejegyzes-hero__cim {
	max-width: 80%;
	margin-inline: auto;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s-62);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ground);
}

/*
 * 768px alatt a hős felirata 46px/50,6px — mérve az élesen, 375px-en. A
 * sormagasság-arány (1,1) és a betűköz (−0,02em) változatlan, ezért csak a
 * méretet állítjuk; a betűköz magától skálázódik −1,24px-ről −0,92px-re.
 */
@media (max-width: 768px) {
	.ph-bejegyzes-hero__cim {
		font-size: var(--wp--preset--font-size--s-46);
	}
}

/* ---------------------------------------------------------------------------
   Bejegyzés törzse

   Az élesen a térközt nem rés adja, hanem MARGÓ: a bekezdések, listák és
   egyéb szövegblokkok 16px felső és alsó margót visznek, a címsorok 0-t. A
   szomszédos margók összeolvadnak, ezért blokkok között mindenütt 16px van —
   de az első elem FÖLÖTT és az utolsó ALATT is marad 16px.

   Ez utóbbi nem elhanyagolható részlet: az élesen a szöveg 176px-re kezdődik a
   hős alatt (160 + 16), és a lap alján is marad 16px. Egy egységes
   „blokkok közötti rés" megoldás a két végét elvétené.

   Ha viszont a bejegyzés címsorral kezdődik — a 42-ből az egyetlen blokkos
   bejegyzés ilyen —, akkor nincs a 16px, és a címsor pontosan 160px-re ül.
   A margómodell ezt magától hozza; egy rés-alapú nem hozná.

   A `display: flow-root` teszi, hogy az első és utolsó margó ne omoljon ki a
   konténerből. Az élesen ugyanezt a `.section` `display: flex`-e éri el.

   A `:root` előtag a WordPress folyamelrendezésének szól: az
   `:where(.is-layout-flow) > :not(:first-child)` szabály (0,1,0) erősségű,
   ugyanannyi, mint egy sima osztályszelektor — akkor csak a forrássorrend
   döntene, ami törékeny.
   --------------------------------------------------------------------------- */

.ph-bejegyzes-tartalom {
	display: flow-root;
}

:root .ph-bejegyzes-tartalom > * {
	margin-block: var(--wp--preset--spacing--t-16);
}

:root .ph-bejegyzes-tartalom > :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 0;
}

/*
 * ⚠️ Az élesen a bejegyzésekben a link #0074db — élénkkék, aláhúzás nélkül,
 * hover nélkül. Ez az Oxygen alapértelmezése, nem tervezői döntés: a lap
 * összes többi linkje `accent` zöld. A mandátum a másolás, ezért átvesszük,
 * de ez az egyik olyan pont, amit érdemes Andreával tisztázni (F7) — a
 * `var(--wp--preset--color--accent)` egy sorban visszaállítható.
 */
.ph-bejegyzes-tartalom a {
	color: #0074db;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Bejegyzés: dátum, hasábszélesség, lapozó (1.1.0)

   A SORHOSSZ volt a legnagyobb gond: 1144px-en 147 karakter fért egy sorba, a
   kényelmes 60–75 helyett. A hasáb most 700px (~90 karakter) — a szem még
   könnyen visszatalál a sor elejére, de a lap nem hat üresnek.

   A 700px-et a post-content `constrained` elrendezése adja, nem ez a fájl:
   így egy szélesre állított kép vagy idézet továbbra is ki tud lógni belőle,
   ha Andrea úgy szerkeszti. A hasáb maga középre kerül.

   A burkoló (.ph-bejegyzes-torzs) azért kell, hogy a `.ph-main` 160px-es
   szekcióritmusa a dátumot, a szöveget és a lapozót EGYÜTT kezelje — külön
   gyerekként mindhárom közé 160px került volna.
   --------------------------------------------------------------------------- */

.ph-bejegyzes-torzs {
	display: grid;
	gap: var(--wp--preset--spacing--t-40);
}

.ph-bejegyzes-torzs > * {
	margin-block: 0;
}

/*
 * A dátum a szöveghasáb fölött, ugyanarra a 700px-re igazítva — enélkül a
 * teljes 1144-en ülne, és elszakadna attól, amihez tartozik.
 */
.ph-bejegyzes-torzs__datum {
	max-width: 700px;
	margin-inline: auto;
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s-14);
	line-height: 1.3;
	letter-spacing: 0.1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   Előző / következő bejegyzés

   Az 1.0.0-ban a bejegyzés egyszerűen elfogyott: se dátum, se visszaút, se
   folytatás. A 42 bejegyzésre egyedül a főoldali csúszkából lehetett eljutni,
   tehát aki elolvasott egyet, zsákutcába ért.

   Az osztály neve NEM `ph-bejegyzes-lapozo`: azt a listaoldalak
   oldalszám-lapozója használja (index/archive/search). Az ütközés miatt a
   lapozó megkapta a 700px-es korlátot, a felső vonalat és a kétosztatú
   rácsot — mérve, az archívumon, javítás előtt.

   A két hivatkozás a hasáb két szélére kerül. Ha valamelyik hiányzik (az első
   és az utolsó bejegyzésnél), a WordPress nem rendeli ki — ezért `flex` és
   `space-between` helyett rács `1fr 1fr`, különben az egyetlen megmaradt link
   átugrana a másik oldalra.
   --------------------------------------------------------------------------- */

.ph-bejegyzes-nav {
	max-width: 700px;
	width: 100%;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--t-32);
	padding-block-start: var(--wp--preset--spacing--t-32);
	border-block-start: 1px solid var(--wp--preset--color--line);
}

.ph-bejegyzes-nav .post-navigation-link-previous {
	grid-column: 1;
}

.ph-bejegyzes-nav .post-navigation-link-next {
	grid-column: 2;
	text-align: end;
}

.ph-bejegyzes-nav a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.ph-bejegyzes-nav a:hover,
.ph-bejegyzes-nav a:focus-visible {
	text-decoration: underline;
}

/*
 * A „Előző bejegyzés" / „Következő bejegyzés" felirat apró és olívazöld, a
 * bejegyzés címe alatta Playfair — ugyanaz a hierarchia, mint a kártyákon.
 */
.ph-bejegyzes-nav .post-navigation-link-previous a,
.ph-bejegyzes-nav .post-navigation-link-next a {
	display: grid;
	gap: var(--wp--preset--spacing--t-8);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s-20);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.ph-bejegyzes-nav .post-navigation-link__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s-14);
	line-height: 1.3;
	letter-spacing: 0.1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

@media (max-width: 768px) {
	.ph-bejegyzes-nav {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--t-32);
	}

	.ph-bejegyzes-nav .post-navigation-link-next {
		grid-column: 1;
		text-align: start;
	}
}

/* ---------------------------------------------------------------------------
   Bejegyzéslista

   ⚠️ NINCS ÉLES MEGFELELŐJE. Az éles oldalon nem létezik bejegyzéslista: a
   /blog/ 404-et ad, a „bejegyzések oldala" nincs beállítva, és mind a 42
   bejegyzés kategória nélküli. Bejegyzésre egyedül a főoldali csúszkából
   lehet eljutni.

   A WordPressnek viszont kell működő `index` és `archive` sablon: enélkül egy
   dátumarchívum, egy keresés vagy egy jövőbeli /blog/ oldal csupasz lapot
   adna. Ezért a listát a főoldali blogkártya formanyelvéből építjük —
   ugyanaz a látvány, csúszka helyett ráccsal. Ez a téma egyetlen olyan
   felülete, aminek nincs mért eredetije; ha Andrea később kér blogoldalt,
   innen indul.

   1.1.0: a kártya követi a főoldali kártya átalakítását — Playfair cím,
   3:2-es kép, dátum, gombos CTA. A címstílus közös (`.ph-bejegyzes__cim` a
   szekciok.css-ben), a többit itt kell megismételni.

   A kártyát itt újra le kell írni, nem tudjuk a `.ph-bejegyzes` osztályt
   használni: a `core/post-template` maga adja a `<li>`-ket, osztályt nem
   tehetünk rájuk. A ÉRTÉKEK a szekciok.css `.ph-bejegyzes` blokkjából valók —
   ha az változik, ez is változzon.
   --------------------------------------------------------------------------- */

/*
 * A lista lapcíme. A `.ph-szekciok` lehatárolás szándékosan kihagyja a h1-et
 * (a főoldalon az a hero felirata), a lapcím viszont h1 — a dokumentum-
 * szerkezet miatt annak is kell lennie. Ezért itt írjuk le külön, a tervezett
 * szekciók címsorával azonos értékekkel.
 */
.ph-lista-fejlec,
.wp-block-query-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--s-48);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 768px) {
	.ph-lista-fejlec,
	.wp-block-query-title {
		font-size: var(--wp--preset--font-size--s-36);
	}
}

.ph-bejegyzes-lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--t-32);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ph-bejegyzes-lista > li {
	margin: 0;
	padding: var(--wp--preset--spacing--t-32);
	background-color: var(--wp--preset--color--sage);
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: -8px;
	display: grid;
	gap: 24px;
	align-content: start;
}

.ph-bejegyzes-lista > li > * {
	margin-block: 0;
}

.ph-bejegyzes-lista .wp-block-post-featured-image {
	margin: 0;
}

.ph-bejegyzes-lista .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background-color: var(--wp--preset--color--stone);
}

/*
 * A dátum — ugyanaz, mint a főoldali kártyán. A core/post-date saját
 * osztályt ad, ezért nem tudja átvenni a .ph-bejegyzes__datum szabályt.
 */
.ph-bejegyzes-lista .wp-block-post-date {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--s-14);
	line-height: 1.3;
	letter-spacing: 0.1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	text-align: center;
}

.ph-bejegyzes-lista .wp-block-post-date a {
	color: inherit;
	text-decoration: none;
}

/*
 * A kártyacím a listában hivatkozás — a főoldali csúszkában sima szöveg. A
 * színt és az aláhúzást vissza kell venni, különben a theme.json `a`
 * elemstílusa (accent + aláhúzás) írná felül az Allura címsort.
 */
.ph-bejegyzes-lista .ph-bejegyzes__cim a {
	color: inherit;
	text-decoration: none;
}

.ph-bejegyzes-lista .wp-block-post-excerpt {
	display: grid;
	gap: var(--wp--preset--spacing--t-8);
	line-height: 1.7;
	letter-spacing: 0.08px;
	color: var(--wp--preset--color--ink);
}

.ph-bejegyzes-lista .wp-block-post-excerpt p {
	margin: 0;
}

/*
 * A „Tovább olvasom" gomb, nem aláhúzott link — ugyanaz a gombnyelv, mint a
 * főoldali kártyán (1px `ink` keret, nagybetűs 14px).
 */
/*
 * A gombot a BURKOLÓ bekezdésen kell középre tenni, nem a linken: a WordPress
 * a `<p class="wp-block-post-excerpt__more-text">` elembe csomagolja, tehát a
 * link nem rácselem, és a `justify-self` nem fog rajta. Mérve: a gomb balra
 * igazodott, míg a főoldali kártyán középen van.
 */
.ph-bejegyzes-lista .wp-block-post-excerpt__more-text {
	margin: 0;
	text-align: center;
}

.ph-bejegyzes-lista .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--t-8);
	padding: var(--wp--preset--spacing--t-16) var(--wp--preset--spacing--t-32);
	border: 1px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s-14);
	line-height: 1.3;
	letter-spacing: -0.1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.ph-bejegyzes-lista .wp-block-post-excerpt__more-link:hover,
.ph-bejegyzes-lista .wp-block-post-excerpt__more-link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
}

.ph-bejegyzes-lapozo {
	justify-content: center;
	gap: var(--wp--preset--spacing--t-16);
}

@media (max-width: 768px) {
	.ph-bejegyzes-lista {
		grid-template-columns: 1fr;
	}
}