/*
GOAH single post ("Aktuálně" detail) — masthead, featured image, article
body. Enqueued only when is_singular('post') is true (see functions.php),
so no other page pays for this CSS.

Shares design tokens and shared components (--fs-h2, .goah-eyebrow,
.goah-link-arrow, .goah-section-head, #hlavni-obsah heading overrides…)
with css/site.css. Classes on OUR OWN wrapper elements are prefixed "goah-"
for the same Elementor-collision reason as site.css/front-page.css.
Selectors that target real WordPress/Gutenberg block output (p, h2, h3,
blockquote, figure, figcaption, img, ul/ol, .wp-block-gallery,
.wp-block-image) are deliberately NOT prefixed — that's real core markup
the_content() renders, ours to style but not to rename.
*/

.goah-post-back--top{ padding-block: 1.6rem 0; }
.goah-post-back--top .goah-container{ max-width:1000px; }
/* site.css's base .goah-link-arrow rule sets color with !important (it
   needs to win against front-page.css's card-background overrides), so
   this more-specific muted color needs !important too or the base rule's
   color wins the tie regardless of specificity/source order. */
.goah-post-back--top .goah-link-arrow{ color:rgba(7,5,4,.45) !important; }
.goah-post-back--top .goah-link-arrow:hover{ color:var(--ink) !important; }
.goah-post-back--top .goah-link-arrow svg{ transform:rotate(180deg); }
.goah-post-back--top .goah-link-arrow:hover svg{ transform:rotate(180deg) translateX(4px); }

.goah-post-header{ padding-block: .6rem 2.2rem; }
.goah-post-header .goah-container{ max-width:1000px; }
/* 1.15rem, not a round 1rem — H1's line-height (1.18) is much tighter than
   H2's (1.55), so H1's glyphs sit much closer to the top of their own line
   box. A margin nominally bigger than the standard eyebrow+H2 .6rem still
   rendered as a visually SMALLER gap once measured glyph-to-glyph; this
   value was tuned against the actual rendered text position, not the CSS
   box, to match the standard pairing's real visual gap. */
.goah-post-header .goah-eyebrow{ margin-bottom:1.15rem; }
.goah-post-header h1{ font-size:clamp(2rem, 1.2rem + 3vw, 3.2rem); line-height:1.18; }
.goah-post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.6rem;
  margin-top:1.4rem;
  font-size:.92rem; font-weight:600; color:rgba(7,5,4,.45);
}
.goah-post-meta span{ display:inline-flex; align-items:center; gap:.5em; }
.goah-post-meta svg{ width:16px; height:16px; opacity:.7; }

.goah-post-hero-media{
  max-width:1000px; margin-inline:auto; padding-inline:var(--pad);
  margin-bottom:clamp(2.4rem,5vw,4rem);
}
.goah-post-hero-media img{
  width:100%; aspect-ratio:16/8.2; object-fit:cover;
  border-radius:var(--r-card);
  display:block;
}

.goah-post-body{ padding-bottom:clamp(5rem,9vw,8rem); }
.goah-post-body .goah-container{ max-width:1000px; }
/* font-size/line-height intentionally NOT overridden here — .goah-post-content
   just inherits body's font-size:var(--fs-body)/line-height:1.55, same as
   the rest of the site, rather than its own one-off values. */
.goah-post-content{ color:var(--ink); }
/* clearfix -- an alignleft/alignright image (floated, see below) at the
   very end of the article would otherwise let its float poke out past
   .goah-post-content's own bottom edge, overlapping "Mohlo by vás zajímat". */
.goah-post-content::after{ content:""; display:table; clear:both; }
/* every direct child the_content() can render (p, h2, h3, blockquote,
   figure, ul, ol, .wp-block-gallery…) gets the same 1.4em top gap from
   whatever precedes it — deliberately NOT overridden per-tag (a
   p{margin-top:1.2em} rule used to win here on specificity over this one,
   so a paragraph following a blockquote sat closer to it than the
   blockquote sat to the paragraph before it). */
.goah-post-content > * + *{ margin-top:1.4em; }
.goah-post-content h2{ font-size:var(--fs-h2); line-height:1.55; margin-top:1.7em; color:var(--purple); }
.goah-post-content h3{ font-size:var(--fs-h3); line-height:1.55; margin-top:1.8em; }
.goah-post-content > p:first-child{ margin-top:0; }
.goah-post-content a{ color:var(--magenta); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.15em; transition:color .15s ease; }
.goah-post-content a:hover{ color:var(--purple); }
/* ===== Buttons ======================================================
   Migrated Elementor button widgets become real wp:buttons/wp:button
   blocks (see Convert-ButtonWidget in convert.ps1) with stock, unstyled
   core markup -- styled here to match the site's .goah-btn look via the
   block's own real classes, not a custom className, so it stays a fully
   valid, natively-editable block (alignment toolbar included, via core's
   own .wp-block-buttons.is-content-justification-* handling). */
/* Always centered, regardless of whatever justification Gutenberg's own
   alignment toolbar sets on this block (that toolbar's options read as
   more about vertical position than the horizontal centering she wants
   here) -- !important so this wins over core's own
   .is-content-justification-* classes rather than depending on her
   remembering to pick "center" in the editor every time. */
.goah-post-content .wp-block-buttons{
  margin-top:1.4em;
  display:flex !important; justify-content:center !important;
}
.goah-post-content .wp-block-button__link{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:800; font-size:.95rem; line-height:1;
  padding:.9em 1.5em;
  border-radius:var(--r-pill);
  background:var(--purple); color:#fff;
  text-decoration:none !important;
  transition:background .18s ease, box-shadow .18s ease;
}
.goah-post-content .wp-block-button__link:hover{ background:var(--magenta); color:#fff; box-shadow:var(--shadow-card); }
/* the whole list sits inset from the paragraph's left edge (not just the
   bullet/number hanging-indent inside each li) — this is what visually
   marks a list as a list rather than a run of paragraphs starting at the
   same point as the body text. Gutenberg's list block needs list-style
   cancelled the same way a hand-written <ul> would. */
.goah-post-content ul, .goah-post-content ol{ list-style:none; padding-left:1.5em; display:flex; flex-direction:column; gap:.5em; margin:0; }
.goah-post-content ul li, .goah-post-content ol li{ position:relative; padding-left:1.4em; }
.goah-post-content ul li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.5em; height:.5em; border-radius:50%; background:var(--magenta);
}
.goah-post-content ol{ counter-reset:post-ol; }
.goah-post-content ol li{ counter-increment:post-ol; }
.goah-post-content ol li::before{
  content:counter(post-ol)"."; position:absolute; left:0; top:0;
  font-weight:800; color:var(--magenta);
}
/* max-width, not a forced width:100% -- a forced width would ignore
   whatever size she picks for an image in the block editor (the Size
   dropdown, or dragging the resize handles) and always stretch it to the
   full column width regardless. max-width still caps an oversized image
   to the column, but a deliberately smaller one stays the size she chose. */
/* max-height (not a fixed height) caps how tall a very tall standalone
   photo can render — width:auto/height:auto plus both max-width AND
   max-height lets the browser shrink the image to fit whichever limit is
   more restrictive while keeping its own proportions, so the whole photo
   always stays visible (never cropped), just capped at a sane size.
   cursor:pointer is the click-to-lightbox affordance (js/single.js) —
   every image in the article body gets it, gallery photos included (the
   more-specific gallery img rule below doesn't touch cursor, so this
   still applies there too); the featured/hero image above is a separate
   .goah-post-hero-media img rule elsewhere, deliberately not clickable. */
.goah-post-content img{
  max-width:100%; max-height:50vh; width:auto; height:auto; border-radius:var(--r-card);
  display:block; margin-inline:auto; cursor:pointer;
}
/* figure/blockquote/gallery are all a touch narrower than the running
   text (90%) and centered — a common editorial convention that keeps
   "inserted media" visually distinct from the paragraph column. Double
   the standard 1.4em sibling gap on both sides, not just the top —
   margin-top wins over the universal .goah-post-content > * + * rule on
   specificity, and margin-bottom collapses with the following element's
   own 1.4em margin-top (the larger of the two wins), so both sides end
   up equal at 2.8em instead of the gap being lopsided. Gutenberg's image
   block already renders a plain <figure><img/><figcaption/></figure> —
   no wrapper class needed for these rules to apply. */
.goah-post-content figure.wp-block-image{ width:90%; margin-inline:auto; margin-top:2.8em; margin-bottom:2.8em; }
/* Gutenberg's align toolbar (left/center/right/wide/full) on an image
   block adds one of these classes to the same <figure> — more specific
   than the plain rule above (extra class), so each wins over the default
   90%-centered treatment without needing !important. Left/right float
   with room for text to wrap alongside; wide/full break out past the
   ~1000px article column, to the site's normal 1320px container and to
   the full viewport respectively. */
.goah-post-content figure.wp-block-image.alignleft,
.goah-post-content figure.wp-block-image.alignright{
  width:min(45%, 420px); margin-top:.4em; margin-bottom:.4em;
}
.goah-post-content figure.wp-block-image.alignleft{ float:left; margin-right:2em; }
.goah-post-content figure.wp-block-image.alignright{ float:right; margin-left:2em; }
.goah-post-content figure.wp-block-image.aligncenter{ width:90%; margin-inline:auto; }
.goah-post-content figure.wp-block-image.alignwide{
  width:100%; max-width:1320px; margin-inline:auto;
}
.goah-post-content figure.wp-block-image.alignfull{
  width:100vw; max-width:100vw; margin-left:50%; transform:translateX(-50%);
}
.goah-post-content figure.wp-block-image.alignfull img{ border-radius:0; }
/* font-style/font-weight/line-height are explicit here for the same
   reason as the table fix above — Hello Elementor's reset.css sets
   figcaption{font-style:italic;font-weight:400;line-height:1.4}
   site-wide, and our rule only overrode color/font-size, leaving
   captions rendering in italic by accident rather than by design. */
.goah-post-content figcaption{
  margin-top:.6em; font-size:.85rem; color:rgba(7,5,4,.55); text-align:center;
  font-style:normal; font-weight:500; line-height:1.4;
}

/* ===== Table =======================================================
   A handful of migrated posts had a raw <table> typed directly into the
   Elementor text editor (schedules, price lists) — convert.ps1 turns
   those into a real wp:table block. Same 90%-centered-media treatment as
   figure/blockquote/gallery above, styled as a plain bordered card rather
   than default browser table chrome. No box-shadow — kept consistent
   with figure/blockquote/gallery above, none of which use one either
   (an earlier version of this had one; removed per design review).
   Border, radius and the rounded-corner clipping all live on the real
   Gutenberg <figure class="wp-block-table"> WRAPPER, not on <table>
   itself — every wp:table block gets this figure automatically, whether
   hand-built in the editor or produced by convert.ps1, so no markup
   changes were needed to target it. A <table> element (especially with
   border-collapse:separate, which this needs for the header background)
   doesn't reliably clip its own cell backgrounds to a border-radius
   across browsers — it can leave faint square corners peeking out behind
   the rounded curve; a plain element like <figure> clips reliably.
   overflow-x:auto on the same figure does double duty: it's also what
   makes a too-wide table (many columns, on a phone) scroll horizontally
   instead of breaking the page's own layout. */
.goah-post-content .wp-block-table{
  width:90%; margin-inline:auto; margin-top:2.8em; margin-bottom:2.8em;
  border:1px solid var(--line); border-radius:var(--r-card);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
/* The Hello Elementor parent theme's own reset.css carries a full table
   reset (table{font-size:.9em;margin-block-end:15px}, table td,table
   th{border:1px solid <gray>;padding:15px;vertical-align:top}, and a
   semi-transparent gray tint on table tbody>tr:nth-child(odd)>td) that's
   still loaded site-wide. Every property it touches needs an explicit
   override here, even ones that would otherwise just be "the default"
   (font-size, vertical-align, margin, the odd-row background, all four
   border sides) — leaving any of them unset lets that reset's value show
   through instead of ours. The margin-block-end:15px one is easy to miss
   since it doesn't affect the table's own appearance, only the gap
   between the table and the wrapper's rounded bottom edge — it looked
   like the last row's background just stopped short of the corner. */
.goah-post-content table{
  width:100%; min-width:460px; margin:0; font-size:1em;
  border-collapse:separate; border-spacing:0;
}
.goah-post-content table td, .goah-post-content table th{
  padding:1.1em 1.6em; text-align:left; vertical-align:middle;
  border:none; border-bottom:1px solid var(--line);
}
.goah-post-content table tr:last-child td, .goah-post-content table tr:last-child th{ border-bottom:none; }
.goah-post-content table th{
  background:var(--purple); color:#fff; font-weight:800;
  text-transform:uppercase; font-size:.82rem; letter-spacing:.04em;
}
.goah-post-content table tr:nth-child(odd) td{ background:var(--paper); }
.goah-post-content table tr:nth-child(even) td{ background:var(--mist); }
.goah-post-content table td{ color:var(--ink); }
/* Centered/bold/purple first column is OPT-IN only, via "goah-table-rank"
   typed into the table block's own "Additional CSS class(es)" field
   (Block settings → Advanced, a standard Gutenberg field every block has)
   -- NOT applied to every table by default. A table's first column is
   only sometimes a short rank/number value (e.g. a results table); for
   the more common real case migrated from Elementor (a schedule/price
   list where column 1 is often a long label, like a course name) that
   treatment looked like an unintended rendering error, not a design
   choice, so it's no longer the default. Editor adds the class in the
   editor's Advanced panel to opt a specific table into it. Gutenberg puts
   the class on the wrapping <figure class="wp-block-table">, not on
   <table> itself, hence the selector below. */
.goah-post-content .wp-block-table.goah-table-rank th:first-child{ text-align:center; }
.goah-post-content .wp-block-table.goah-table-rank tbody td:first-child{ text-align:center; font-weight:800; color:var(--purple); }

/* ===== Gallery ====================================================
   Gutenberg's core Gallery block renders a flat structure we don't
   control: <figure class="wp-block-gallery ..."><figure class="wp-block-
   image">img</figure>...</figure> — no separate "track" wrapper, and no
   arrow buttons. The render_block_core/gallery filter in functions.php
   wraps this in .goah-post-gallery (for the arrow buttons' positioning)
   ONLY when the gallery has more than 3 images; a gallery of 3 or fewer
   stays Gutenberg's own plain wrapping grid instead — that's what the
   min()-based item width below is for (falls back to a sane size even
   for a .wp-block-gallery with no .goah-post-gallery wrapper at all). */
.goah-post-gallery{ position:relative !important; }
.goah-post-content .wp-block-gallery{
  width:90%; margin-inline:auto; margin-top:2.8em; margin-bottom:2.8em;
  display:flex; gap:1rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
/* WordPress core's own block-library CSS styles .wp-block-gallery.is-layout-flex
   (and its per-image flex-basis) at the same specificity we use above, and
   wins the tie in some cascades — !important here forces our slider layout
   to win regardless of core's own gallery layout rules, same reasoning as
   the Smash Balloon !important overrides elsewhere in this project. */
/* align-items:center, not flex-start -- landscape (4:3) and portrait
   (3:4) slides render at different heights side by side in the same row
   now that neither gets cropped to a shared shape, so centering keeps
   their midpoints lined up instead of every shorter landscape photo
   hugging the row's top edge. !important because WordPress core's own
   block-library CSS has figure.wp-block-gallery.has-nested-images{
   align-items:normal }, which — type selector + two classes — out-
   specifies our two-class selector regardless of source order. */
.goah-post-gallery .wp-block-gallery{
  display:flex !important; flex-wrap:nowrap !important; align-items:center !important;
  width:100%; margin-top:0; margin-bottom:0;
}
.goah-post-content .wp-block-gallery::-webkit-scrollbar{ display:none; }
/* Each slide is a fixed-size box (width via flex-basis, height via
   aspect-ratio below) — landscape and portrait photos get a DIFFERENT box
   shape (the .is-portrait rules), but within its own box every photo is
   never cropped: object-fit:contain scales the whole photo down to fit,
   letterboxing with --mist behind it rather than cutting off any edge.
   This is a deliberate two-part fix over two earlier attempts: (1) a
   single shared 4:3 box with object-fit:cover cropped portrait photos
   and cut off people standing at the edge of wide group shots; (2) a
   "natural width from a fixed height, no box at all" version fixed the
   cropping but let very wide/tall source photos balloon past a
   reasonable slide size, so you couldn't see the whole photo without
   extra scrolling. Fixed boxes + contain gets both: bounded slide size
   AND the complete photo always visible. */
.goah-post-gallery .wp-block-gallery > .wp-block-image{
  flex:0 0 80% !important;
  width:auto !important;
  scroll-snap-align:start;
  margin:0;
}
.goah-post-gallery .wp-block-gallery > .wp-block-image.is-portrait{
  flex:0 0 55% !important;
}
/* !important on object-fit/height/width here specifically: WordPress
   core's own block-library CSS ships a rule targeting
   .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image
   img (our own generated gallery markup used to include that is-cropped
   class, since dropped in convert.ps1 — but posts already imported before
   that fix still carry it in the database). That core selector's
   :not(#individual-image) clause counts as an ID in specificity terms
   even though #individual-image never actually matches anything, which
   makes core's object-fit:cover win over a plain (non-!important)
   override no matter where ours sits in the cascade. !important is the
   only thing that reliably beats it. */
.goah-post-gallery .wp-block-image img{
  width:100% !important; height:100% !important; aspect-ratio:4/3; object-fit:contain !important;
  background:var(--mist);
  border-radius:var(--r-tag);
  display:block;
}
.goah-post-gallery .wp-block-image.is-portrait img{ aspect-ratio:3/4; }
/* <button> picks up plugin/theme resets (Elementor, hello-elementor's own
   reset.css, etc.) that load after ours in some cases — background/color/
   border/padding/font are pinned with !important so this always renders
   as our plain circular icon button regardless of what else targets
   `button` on the page. */
.goah-post-gallery-arrow{
  position:absolute !important; top:50% !important; z-index:2;
  width:40px !important; height:40px !important; border-radius:50% !important;
  display:grid !important; place-items:center;
  background:var(--paper) !important; border:1px solid var(--line) !important; color:var(--ink) !important;
  padding:0 !important; margin:0; font:inherit;
  box-sizing:border-box;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  box-shadow:var(--shadow-card);
}
.goah-post-gallery-arrow:hover{ background:var(--ink) !important; border-color:var(--ink) !important; color:#fff !important; }
.goah-post-gallery-arrow svg{ width:16px; height:16px; }
.goah-post-gallery-arrow-prev{ left:-20px; transform:translateY(-50%) rotate(180deg); }
.goah-post-gallery-arrow-next{ right:-20px; transform:translateY(-50%); }

/* ===== Quote ========================================================
   Gutenberg's core Quote block renders <blockquote class="wp-block-quote">
   with the quote text in a nested <p> (and an optional <cite>) — not flat
   text like a hand-written <blockquote>, so the icon can't be authored
   inline in the markup like the rest of this page's static content. The
   render_block_core/quote filter in functions.php injects it instead. */
.goah-post-content blockquote.wp-block-quote{
  position:relative;
  width:90%; margin-inline:auto; margin-top:2.8em; margin-bottom:2.8em;
  padding:1.8rem 2rem 1.8rem 3.2rem;
  background:var(--mist);
  border-radius:var(--r-card);
  font-size:1.2rem; font-weight:700; line-height:1.5;
  color:var(--purple);
}
.goah-post-content blockquote.wp-block-quote p{ margin:0; }
.goah-post-content blockquote.wp-block-quote p + p{ margin-top:1em; }
.goah-post-content blockquote.wp-block-quote cite{
  display:block; margin-top:.8em; font-size:.85rem; font-weight:600; font-style:normal; color:var(--ink);
}
.goah-post-quote-icon{
  position:absolute; left:1.1rem; top:1.6rem;
  width:22px; height:22px; color:var(--magenta); opacity:.6;
}
.goah-post-content strong{ font-weight:800; }

/* the divider and the padding around the link both live on .goah-container,
   not the outer full-bleed .goah-post-back — a border-top/padding on the
   outer element would span the whole viewport instead of just the 1000px
   article width. */
.goah-post-back .goah-container{ max-width:1000px; border-top:1px solid var(--line); padding-block:1.8rem 3.2rem; }
.goah-post-back .goah-link-arrow{ color:rgba(7,5,4,.45) !important; }
.goah-post-back .goah-link-arrow:hover{ color:var(--ink) !important; }
.goah-post-back .goah-link-arrow svg{ transform:rotate(180deg); }
.goah-post-back .goah-link-arrow:hover svg{ transform:rotate(180deg) translateX(4px); }
/* the top back-link sits right under the fixed header, not after a block
   of content, so it gets no divider — only the bottom instance (sharing
   this same .goah-post-back base class) keeps the line above it. */
.goah-post-back--top .goah-container{ border-top:none; }

/* ===== "Mohlo by vás zajímat" ======================================
   Static placeholder for now — this prototype only converts the post's
   OWN content (title/date/image/quote/images/gallery) to real WP data;
   turning this into an actual related-posts query is separate work. */
.goah-more-posts{ background:var(--mist); padding-block:clamp(3.2rem,6vw,5.5rem); }
.goah-more-posts-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}
.goah-more-post-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
  color:var(--ink);
}
.goah-more-post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-card); }
.goah-more-post-thumb{ aspect-ratio:4/3; }
.goah-more-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.goah-more-post-card-body{ padding:1.3rem 1.4rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.goah-more-post-tag{ font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--magenta); }
.goah-more-post-card h3{ font-size:1.15rem; line-height:1.35; }
.goah-more-post-date{ margin-top:auto; padding-top:.6rem; font-size:.82rem; font-weight:600; color:rgba(7,5,4,.5); }

/* ===== Photo lightbox (all screen sizes) ==============================
   Clicking/tapping any photo in the article body — gallery slides and
   standalone in-text images alike — opens it fullscreen. Originally
   mobile-only, kept for tablet/desktop too since it turned out useful
   there as well. The featured/hero image stays non-clickable (js/
   single.js only wires this up for .goah-post-content img).
   .goah-is-open is toggled by JS on click. */
.goah-lightbox{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background:rgba(7,5,4,.92);
  padding:1.2rem;
}
.goah-lightbox.goah-is-open{ display:flex; }
.goah-lightbox-img{
  max-width:100%; max-height:100%;
  object-fit:contain;
  border-radius:var(--r-tag);
}
/* Same defensive !important treatment as .goah-post-gallery-arrow above —
   <button> picks up plugin/theme resets (Elementor, hello-elementor's own
   reset.css) that otherwise win: a small border-radius, a non-zero
   padding (which is what was pushing the × icon off-center), and a
   brand-color background/border. */
.goah-lightbox-close{
  position:absolute !important; top:1.2rem !important; right:1.2rem !important;
  width:44px !important; height:44px !important; border-radius:50% !important;
  display:grid !important; place-items:center;
  background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.3) !important; color:#fff !important;
  padding:0 !important; margin:0; font:inherit;
  box-sizing:border-box;
}
.goah-lightbox-close svg{ width:20px; height:20px; }

@media (max-width:860px){
  .goah-post-header h1{ font-size:clamp(1.7rem,1.2rem + 4vw,2.4rem); }
  .goah-post-hero-media img{ aspect-ratio:4/3; }
  /* not enough room to wrap text beside a floated image at this width --
     alignleft/alignright fall back to the same full-width centered
     treatment as an unaligned image instead of a cramped float. */
  .goah-post-content figure.wp-block-image.alignleft,
  .goah-post-content figure.wp-block-image.alignright{
    float:none; width:90%; margin:2.8em auto;
  }
  .goah-post-content blockquote.wp-block-quote{ padding:1.5rem 1.4rem 1.5rem 2.6rem; font-size:1.08rem; }
  .goah-post-gallery .wp-block-gallery > .wp-block-image{ flex:0 0 85%; }
  .goah-post-gallery-arrow{ display:none; }
  .goah-more-posts-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .goah-post-meta{ gap:.6rem 1.1rem; }
}