/**
 * Bionela v médiách page — design layer.
 *
 * The page shell (breadcrumb, leaf headline, lead, content card, eco h2, teal
 * CTA band, feature strip) is the shared long-form layer: pages/ekomaterialy.css
 * is enqueued alongside this file. Only what this page adds lives here, scoped
 * under .vmediach so the generic names (.mp-*) never leak.
 *
 * Scope class is .vmediach, not .media: the scope sits on <main>, and `.media`
 * is a name third-party sheets (Bootstrap-derived plugin CSS) commonly style —
 * an unrelated rule could then bleed *into* this page. Every sibling scope in
 * the theme is a distinctive nickname for the same reason (.sysdod, .vyhzast,
 * .obio, .faq-hub, .e404).
 *
 * Like Systémové dodávky the page drops the shell's .eko-layout grid and its
 * sticky .eko-nav — it is one flat list of press mentions with no sections to
 * index, so .eko-content stands alone inside .wrap and only needs the top margin
 * the grid used to give it.
 */

/* ---- Standalone content card (no .eko-layout parent) --------------------- */
.vmediach .eko-content { margin-top: var(--space-7); }

/* ---- Press list ----------------------------------------------------------
   Hairline-separated rows rather than nested cards: .eko-content is already the
   white card, so a card-in-a-card would double the chrome. The rule is the
   legal pages' h2 top-rule idiom. */
.vmediach .mp-item {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--line-soft);
}
.vmediach .mp-item:first-child {
  padding-top: 0;
  border-top: none;
}
/* The last row keeps its bottom padding on purpose: the shell zeroes the last
   .eko-sec's margin and .eko-cta only adds --space-2, so this is what holds the
   press list off the CTA band. */

/* ---- Press mention row ---------------------------------------------------
   The .mat-block / .sp-partner rhythm: copy in the wide track, media in a fixed
   320px one. The legacy row put the outlet logo left (1/3) and the cover banner
   right (2/3); the copy column keeps the logo, so the left/right orientation
   carries over while the copy — not the photo — gets the room it needs.

   No .media-left variant exists here because the legacy rows do not alternate:
   all five put the logo left. Nothing to flip, so the documented
   `order`-vs-`grid-template-columns` trap never comes up. */
.vmediach .mp-item.has-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-7);
  align-items: center;
}

/* ---- Outlet logo ---------------------------------------------------------
   Mixed-ratio artwork (three different outlets), so each logo is contained in a
   fixed box — never cropped, never stretched: the .vz-brands / .sp-logos
   recipe. */
.vmediach .mp-outlet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 52px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-4);
}
.vmediach .mp-outlet-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Article title ------------------------------------------------------- */
.vmediach .mp-title {
  margin: 0 0 var(--space-4);
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.35;
}

/* ---- "Prejsť na článok" button ------------------------------------------
   Ghost button: .ghost-btn lives in home.css (front page only), so the page
   ships its own copy — same recipe as .sp-partner's outbound .sp-btn, which is
   the same job (one outbound link per block). */
.vmediach .mp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  background: var(--bg);
  color: var(--teal);
  font-size: 14px;
  font-weight: 700;
  transition: background .12s, border-color .12s;
}
.vmediach .mp-btn:hover {
  background: var(--teal-50);
  border-color: var(--teal-line);
  text-decoration: none;
}
.vmediach .mp-btn svg { width: 15px; height: 15px; }

/* ---- Cover photo ---------------------------------------------------------
   Real editorial photos, not cut-outs, so `cover` is right here (unlike the
   logo box above). Ratio is the legacy [promo_banner] img_size, 645x380.

   `height: auto` is load-bearing, not decoration: wp_get_attachment_image()
   prints a height attribute, the reset only sets `img { max-width: 100% }`, so
   without this both axes are definite and aspect-ratio is silently ignored. */
.vmediach .mp-media {
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.vmediach .mp-media-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 645 / 380;
  object-fit: cover;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .vmediach .eko-content { margin-top: var(--space-5); }
  .vmediach .mp-item {
    padding: var(--space-7) 0;
  }
  /* Stacked, in source order: logo, title, button, then the cover closes the
     row. No `order` flip — see the note on .mp-item.has-media. */
  .vmediach .mp-item.has-media {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 600px) {
  .vmediach .mp-item { padding: var(--space-6) 0; }
  .vmediach .mp-title { font-size: 17px; }
  .vmediach .mp-outlet { width: 128px; height: 46px; }
}