/* Dr. Hotellátó — márkaoldalak (dh-brand)
 * Készült: 2026-08-01
 *
 * Ez a fájl a Blocksy gyerektémába való, EGYSZER — nem öt bemásolt <style> blokkba az öt
 * oldal tartalmába. A tipográfia (Playfair Display) és a márkaszín (#A9714A) már él a
 * blocksy-child/functions.php-ban; ez a fájl csak az új rács- és galéria-elemeket adja hozzá.
 *
 * Ha ez a CSS NEM kerül be a témába, az oldalak akkor is helyesen olvashatók: a galériák
 * egymás alá tördelt, teljes szélességű képekké esnek szét. Semmi nem törik el, csak
 * hosszabb lesz az oldal.
 *
 * Beillesztés: wp_enqueue_style a gyerektéma functions.php-jában, vagy a meglévő
 * gyerektéma-stíluslap végére másolva.
 */

.dh-brand {
  --dh-accent: #A9714A;
  --dh-rule: #e7ded6;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- hero ------------------------------------------------------------------ */
.dh-brand-hero {
  margin: 0 0 2.2rem;
}
.dh-brand-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}
.dh-brand-hero figcaption,
.dh-brand figure figcaption {
  font-size: 0.85rem;
  color: #6d6259;
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* --- állítás, márkajel ----------------------------------------------------- */
.dh-claim {
  font-size: 1.25rem;
  line-height: 1.55;
  color: #3d3630;
  margin: 0 0 2rem;
  max-width: 48ch;
}
.dh-brandmark {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 2rem;
}
.dh-brandmark img {
  max-height: 46px;
  width: auto;
}

/* --- illatcsalád ----------------------------------------------------------- */
.dh-family {
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  color: var(--dh-accent);
  margin: 0 0 0.75rem;
}

/* --- galériák -------------------------------------------------------------- */
.dh-gallery {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.4rem;
}
.dh-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.dh-gallery--3 { grid-template-columns: repeat(3, 1fr); }

.dh-gallery figure {
  margin: 0;
}
.dh-gallery img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  background: #f5f1ed;
}
.dh-gallery--2 img { height: 340px; }

/* teljes szélességű sáv egyetlen képnek */
.dh-band {
  margin: 1.5rem 0 2.4rem;
}
.dh-band img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 3px;
}

/* --- táblázatok ------------------------------------------------------------ */
.dh-brand table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0 2rem;
  font-size: 0.95rem;
}
.dh-brand th,
.dh-brand td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--dh-rule);
  vertical-align: top;
}
.dh-formats thead th {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d6259;
  border-bottom-width: 2px;
}
.dh-pyramid th[scope="row"] {
  width: 34%;
  color: var(--dh-accent);
  font-weight: 600;
}

/* --- tanúsítások, illeszkedés --------------------------------------------- */
.dh-certs,
.dh-fit,
.dh-lines {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
}
.dh-certs li,
.dh-fit li,
.dh-lines li {
  padding: 0.7rem 0 0.7rem 1.4rem;
  border-bottom: 1px solid var(--dh-rule);
  position: relative;
  line-height: 1.55;
}
.dh-certs li::before,
.dh-fit li::before,
.dh-lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dh-accent);
}

/* --- forrásmegjelölés ------------------------------------------------------ */
.dh-note {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #6d6259;
  border-left: 3px solid var(--dh-rule);
  padding: 0.2rem 0 0.2rem 1rem;
  margin: 1.5rem 0 2.4rem;
}

/* --- CTA ------------------------------------------------------------------- */
.dh-cta {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 2.4rem 0 1rem;
}
.dh-btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  background: var(--dh-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  font-size: 0.95rem;
}
.dh-btn:hover { background: #96603c; color: #fff; }
.dh-btn--ghost {
  background: transparent;
  color: var(--dh-accent);
  box-shadow: inset 0 0 0 1px var(--dh-accent);
}
.dh-btn--ghost:hover { background: var(--dh-accent); color: #fff; }

.dh-contact { font-size: 0.92rem; color: #6d6259; }
.dh-link { color: var(--dh-accent); }
.dh-closer {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--dh-rule);
  font-size: 1.05rem;
  color: #3d3630;
}

/* --- mobil ----------------------------------------------------------------- */
@media (max-width: 780px) {
  .dh-gallery--3 { grid-template-columns: repeat(2, 1fr); }
  .dh-gallery img,
  .dh-gallery--2 img { height: 200px; }
  .dh-claim { font-size: 1.1rem; }
  /* a széles táblázatok görgethetők maradnak, nem tördelik szét az oldalt */
  .dh-brand table { display: block; overflow-x: auto; white-space: nowrap; }
}
@media (max-width: 520px) {
  .dh-gallery--2, .dh-gallery--3 { grid-template-columns: 1fr; }
  .dh-gallery img, .dh-gallery--2 img { height: auto; }
  .dh-cta { flex-direction: column; }
  .dh-btn { text-align: center; }
}

/* ============================================================================
 * 2026-08-01 — LAYOUT REPAIR, appended after looking at the rendered page.
 *
 * The rules above specified a uniform gallery height and lost to the theme, so every
 * column kept its own natural width, rows sheared, and the hero rendered as a floating
 * thumbnail with dead space beside it. Samu's words: "started and left unfinished halfway".
 *
 * Everything below is specific enough to win, and sizes by aspect-ratio so it cannot
 * depend on a container width we do not control.
 * Reverse: delete from this marker to the end of the file.
 * ========================================================================== */

.dh-brand{max-width:1120px;margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}

/* hero — genuinely full-bleed, fixed proportion, caption laid over it */
.dh-brand .dh-brand-hero,.dh-brand-hero{position:relative;width:100vw!important;max-width:100vw!important;
 margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;
 margin-top:0!important;margin-bottom:3rem!important;overflow:hidden}
.dh-brand .dh-brand-hero img,.dh-brand-hero img{display:block!important;width:100%!important;
 height:clamp(300px,34vw,480px)!important;max-height:none!important;
 object-fit:cover!important;object-position:center 42%!important;border-radius:0!important}
.dh-brand-hero figcaption{position:absolute!important;left:0;right:0;bottom:0;margin:0!important;
 padding:2.4rem 1.5rem .9rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
 color:#fff!important;text-align:center;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0))}

/* brandmark — a logo, not a stray thumbnail */
.dh-brandmark{padding-top:1.6rem;border-top:1px solid #e6dfd8;margin:2rem 0 2.6rem}
.dh-brandmark img{height:34px!important;width:auto!important;max-height:none!important;
 object-fit:contain!important;opacity:.78}

/* galleries — one grid, one proportion, rows that line up */
.dh-brand .dh-gallery,.dh-gallery{display:grid!important;gap:1.25rem!important;
 margin:1.6rem 0 2.8rem!important;align-items:start}
.dh-gallery--2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.dh-gallery--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.dh-brand .dh-gallery figure,.dh-gallery figure{margin:0!important;padding:0!important;
 display:flex;flex-direction:column;min-width:0}
.dh-brand .dh-gallery figure img,.dh-gallery figure img,.dh-gallery img{display:block!important;
 width:100%!important;height:auto!important;aspect-ratio:4/3!important;
 object-fit:cover!important;object-position:center!important;max-width:none!important;
 border-radius:2px!important;background:#f5f1ed}
.dh-gallery--2 figure img,.dh-gallery--2 img{aspect-ratio:16/10!important}
/* reserved caption slot so a missing caption cannot shear the row */
.dh-brand .dh-gallery figcaption,.dh-gallery figcaption{font-size:.78rem!important;line-height:1.35;
 color:#6d6259!important;margin-top:.6rem!important;min-height:2.1em;text-align:left}

/* section headings get a rule, so the page reads as sections not a scroll */
.dh-brand h2{margin-top:3.2rem;margin-bottom:.9rem}
.dh-brand h2::after{content:"";display:block;width:42px;height:2px;margin-top:.7rem;background:#9f6b46}

/* prose keeps a readable measure; tables and galleries stay full width */
.dh-brand > p,.dh-brand > ul,.dh-brand > ol{max-width:68ch}

@media(max-width:900px){.dh-gallery--3{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){
 .dh-gallery--2,.dh-gallery--3{grid-template-columns:1fr!important}
 .dh-brand .dh-brand-hero img,.dh-brand-hero img{height:clamp(220px,52vw,300px)!important}
 .dh-brand h2{margin-top:2.4rem}
}

/* --- root cause of the broken hero -------------------------------------------------
 * WordPress's wpautop inserts a <p> INSIDE <figure class="dh-brand-hero">, and the page's
 * `.entry-content.is-layout-constrained` caps every block child at the content width.
 * So the figure went full-bleed while the paragraph inside it stayed ~630px, leaving the
 * image filling under half the band. Neutralise the wrapper, not just the image.
 * ---------------------------------------------------------------------------------- */
.dh-brand-hero > p,
.dh-brand-hero > div,
.dh-brand-hero > *:not(figcaption){
	display:block!important;
	width:100%!important;
	max-width:none!important;
	margin:0!important;
	padding:0!important;
}
.entry-content.is-layout-constrained > .dh-brand,
.entry-content .dh-brand{max-width:1120px!important}
.entry-content .dh-brand-hero{max-width:100vw!important}

/* brandmark: the <img> ships as a zero-size SVG placeholder until lazy-load swaps it,
   which is why it read as a stray speck. Give it a real box either way. */
.dh-brandmark{display:flex!important;align-items:center;gap:1.2rem;min-height:34px}
.dh-brandmark img{height:30px!important;min-height:30px!important;width:auto!important;
 min-width:60px!important;max-height:none!important;object-fit:contain!important;opacity:.8}

/* --- pass 3, from looking at the render again --------------------------------------
 * (a) the 480px full-bleed band cropped a 3:2 product shot so hard the bottles lost their
 *     base; (b) the overlaid caption landed on the product; (c) prose at 68ch inside a
 *     1120px container hugged the left edge and left half the page empty.
 * ---------------------------------------------------------------------------------- */
.dh-brand{max-width:880px!important}
.entry-content.is-layout-constrained > .dh-brand,
.entry-content .dh-brand{max-width:880px!important}

.dh-brand .dh-brand-hero img,.dh-brand-hero img{
	height:clamp(280px,26vw,380px)!important;
	object-position:center 45%!important;
}
/* caption below the image, not over the product */
.dh-brand-hero figcaption{
	position:static!important;
	background:none!important;
	color:#6d6259!important;
	padding:.75rem 1.25rem 0!important;
	text-align:center!important;
	font-size:.66rem!important;
	letter-spacing:.16em!important;
}
.dh-brand .dh-brand-hero,.dh-brand-hero{margin-bottom:2.4rem!important}

/* galleries may breathe wider than the prose column */
.dh-brand .dh-gallery,.dh-gallery{
	width:calc(100% + 120px)!important;
	max-width:none!important;
	margin-left:-60px!important;
	margin-right:-60px!important;
}
@media(max-width:1040px){
	.dh-brand .dh-gallery,.dh-gallery{width:100%!important;margin-left:0!important;margin-right:0!important}
}
.dh-brand > p,.dh-brand > ul,.dh-brand > ol{max-width:none!important}

/* brandmark: force a real box even while the lazy-load placeholder is in place */
.dh-brandmark img{width:104px!important;height:auto!important;min-height:0!important;
 aspect-ratio:auto!important}

/* pass 4: the crop was still amputating the product bases. Shift the focal point down and
   give the band a little more height so a 3:2 product shot survives a 16:5 crop. */
.dh-brand .dh-brand-hero img,.dh-brand-hero img{
	height:clamp(300px,29vw,430px)!important;
	object-position:center 62%!important;
}
.dh-brandmark{margin:1.6rem 0 2rem!important;padding-top:1.2rem!important}

/* --- pass 5: MOBILE WAS BROKEN. Found only because Samu asked whether I pressure-tested.
 * At 390px the page overflowed horizontally and clipped the body text. Two causes: the
 * full-bleed hero's 100vw + negative-margin trick, and the gallery's bleed margins, neither
 * of which is safe once the viewport is narrower than the content box.
 * Belt and braces: cap the bleed to the viewport AND clip any residual overflow.
 * ------------------------------------------------------------------------------------- */
/* REMOVED 2026-08-01: a site-wide overflow-x:hidden deployed on a bad measurement.
   Headless Chrome at a 390px window renders the DESKTOP layout unless device emulation is
   on, so the 'mobile overflow' it appeared to show was an artifact, not a defect. A global
   overflow rule can break position:sticky everywhere — it had no business shipping. */
.dh-brand{overflow-x:clip}

@media(max-width:1040px){
	.dh-brand .dh-gallery,.dh-gallery{
		width:100%!important;max-width:100%!important;
		margin-left:0!important;margin-right:0!important;
	}
}
@media(max-width:820px){
	.dh-brand .dh-brand-hero,.dh-brand-hero{
		width:auto!important;max-width:100%!important;
		margin-left:0!important;margin-right:0!important;
	}
	.dh-brand .dh-brand-hero img,.dh-brand-hero img{
		height:clamp(200px,46vw,300px)!important;
	}
	.dh-brand{padding-left:1rem!important;padding-right:1rem!important}
}

/* --- pass 6: tables overflowed by up to 671px on mobile, found by tools/render.py's
 * inner-scroller check. Page-level overflow read 0px and called it clean, which is why it
 * shipped. Let wide tables scroll inside their own box instead of forcing the page wide. */
@media(max-width:820px){
	.dh-brand table{display:block!important;width:100%!important;max-width:100%!important;
		overflow-x:auto!important;-webkit-overflow-scrolling:touch;white-space:normal!important}
	.dh-brand table tbody th{white-space:normal!important}
	.dh-brand table th,.dh-brand table td{padding:.6rem .7rem!important;font-size:.88rem!important}
}