/* ==========================================================================
   Chowanki — "O mnie" page (/o-mnie/) alternating image/text section.
   Rendered by the [chowanki_about_me] shortcode in functions.php. Only
   enqueued on the o-mnie page (see is_page('o-mnie') in
   chowanki_enqueue_about_assets()), so selectors here don't need extra
   page-scoping of their own.
   ========================================================================== */

.chowanki-about-wrap {
  max-width: 1000px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.chowanki-about-row {
  display: flex;
  align-items: center;
  gap: 40px;
}

.chowanki-about-media,
.chowanki-about-content {
  flex: 1 1 0;
  min-width: 260px;
}

.chowanki-about-placeholder {
  aspect-ratio: 4 / 5;
  border: 2px dashed #09ab9c;
  border-radius: 16px;
  background: #f4faf9;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.chowanki-about-placeholder span {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  color: #09ab9c;
  font-size: 15px;
}

.chowanki-about-content p {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2b2b2b;
}

/* Stack to a single column on smaller screens, media always first so the
   photo still leads visually even on the row where text came first in
   the source (row 2). */
@media (max-width: 680px) {
  .chowanki-about-row {
    flex-direction: column;
    gap: 20px;
  }
  .chowanki-about-row .chowanki-about-media {
    order: -1;
  }
}

/* ==========================================================================
   The rules above target the [chowanki_about_me] shortcode's markup, but
   that shortcode isn't actually used anywhere in the live page — so those
   rules currently have no effect. The real "O mnie" content comes from the
   database-stored generic "Page" template (Site Editor → Templates →
   Pages), which renders two rows of a 2-column grid. Each column — text or
   photo — is its own plain <div class="wp-block-group"> (a "constrained"
   layout group), so the photo is NOT a direct <figure> child of the grid
   row like an earlier version of this file assumed: it's a <figure> nested
   one level deeper inside a wp-block-group wrapper, same as the text
   column. That's why an earlier fix here (targeting a direct-child
   `figure.wp-block-image` selector) never matched anything.

   Confirmed against the real rendered markup (inspected live):
   <div class="wp-block-group is-style-default is-layout-grid
   wp-container-core-group-is-layout-f88494ea wp-block-group-is-layout-grid">
     <div class="wp-block-group ... is-layout-constrained">  <- text OR photo
       <h2>/<p> or <figure class="wp-block-image">
     </div>
     <div class="wp-block-group ... is-layout-constrained">  <- the other one
       ...
     </div>
   </div>
   Row 1 has text then photo; row 2 has photo then text (mirrored for
   visual variety on desktop). On mobile, stack every row with text
   always on top, detecting the photo column with :has() rather than
   relying on source order so it works for both rows.

   Using flex here instead of grid on purpose: WP's own per-instance
   class (wp-container-core-group-is-layout-*) drives grid-template-columns
   for the 2-column desktop layout, and fighting that generated grid track
   sizing with an !important override was unreliable in testing. Forcing
   display:flex outright replaces the grid behavior entirely rather than
   trying to override just one of its properties. Breakpoint matches the
   theme's own mobile breakpoint used everywhere else (chowanki-menu.css,
   chowanki-footer.css). No `main` ancestor prefix — confirmed via a live
   test that the bare `.wp-block-group.is-style-default` selector alone
   reaches this element fine.
   ========================================================================== */
@media (max-width: 760px) {
  .wp-block-group.is-style-default {
    display: flex !important;
    flex-direction: column !important;
    row-gap: 20px;
  }
  .wp-block-group.is-style-default > .wp-block-group:has(> figure.wp-block-image) {
    order: 2;
  }
  /* Deliberately NOT align-items:center on the flex container above — that
     would shrink each column to its content width, which reintroduces the
     narrow-wrap bug the earlier fix solved. Instead keep columns full-width
     (default stretch) and center the CONTENT inside each one: text-align
     for the heading/paragraph (they're right-aligned on desktop via
     has-text-align-right) and margin:auto for the fixed-width photo. */
  .wp-block-group.is-style-default h2.wp-block-heading,
  .wp-block-group.is-style-default p.wp-block-paragraph {
    text-align: center !important;
  }
  .wp-block-group.is-style-default figure.wp-block-image {
    margin-left: auto;
    margin-right: auto;
  }
}