/*
 * Blog post cards – card appearance + "Więcej" pill-button styling
 * inside the Divi Blog module (.et_pb_blog).
 *
 * Two button variants for the .more-link:
 *   Button 1 (default)      – green gradient → orange on hover
 *   Button 2 (.im-btn-alt)  – orange gradient → green on hover
 *
 * Buttons are right-aligned inside the card.  Padding is controllable
 * via --im-blog-btn-py / --im-blog-btn-px from the admin panel.
 *
 * "by" text before author is hidden with font-size:0 + PHP gettext.
 *
 * Uses CSS custom properties so values can be overridden from the
 * admin panel via inline :root{} styles.
 */

:root {
  /* Card */
  --im-blog-card-bg: #ffffff;
  --im-blog-card-radius: 16px;
  --im-blog-card-shadow: 0 2px 12px rgba(0,0,0,.07);
  --im-blog-card-shadow-hover: 0 6px 24px rgba(0,0,0,.13);
  --im-blog-card-padding-y: 2.4vh;
  --im-blog-card-padding-x: 2.4vw;
  --im-blog-card-transition: box-shadow .25s ease, transform .25s ease;
  /* Button */
  --im-blog-btn-py: 0.9vh;
  --im-blog-btn-px: 1.5vw;
  --im-blog-btn-mt: 1vh;
  --im-blog-btn-mb: 0vh;
  /* Meta */
  --im-blog-meta-gap: 0.5vw;
}

/* ==================================================================
   CARD STYLES
   ================================================================== */

.et_pb_post {
  background-color: var(--im-blog-card-bg) !important;
  border-radius: var(--im-blog-card-radius) !important;
  box-shadow: var(--im-blog-card-shadow) !important;
  padding: var(--im-blog-card-padding-y) var(--im-blog-card-padding-x) !important;
  overflow: hidden;
  transition: var(--im-blog-card-transition);
}

.et_pb_post:hover {
  box-shadow: var(--im-blog-card-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Fullwidth layout: spacing between cards */

.et_pb_posts.et_pb_blog_fullwidth .et_pb_post + .et_pb_post {
  margin-top: 1.25rem;
}

/* Image overflow fix */

.et_pb_post .entry-featured-image-url img {
  border-radius: var(--im-blog-card-radius) var(--im-blog-card-radius) 0 0;
}

/* Card focus-visible for accessibility */

.et_pb_post:focus-within {
  outline: 2px solid var(--imc-green, #9bd818);
  outline-offset: 2px;
}

/* ==================================================================
   HIDE "by" TEXT IN POST META
   ================================================================== */

.et_pb_post .post-meta {
  font-size: 0 !important; /* collapse bare text nodes ("by", " | ") */
}

.et_pb_post .post-meta > *,
.et_pb_post .post-meta a,
.et_pb_post .post-meta .author,
.et_pb_post .post-meta .published,
.et_pb_post .post-meta .entry-categories {
  font-size: 14px !important; /* restore size on child elements */
}

/* Meta spacing between author / date / categories */

.et_pb_post .post-meta .author,
.et_pb_post .post-meta .published {
  margin-right: var(--im-blog-meta-gap);
}

/* ==================================================================
   "WIĘCEJ" BUTTON — RIGHT-ALIGNED PILL CTA
   ================================================================== */

/* Flex column on .post-content pushes .more-link right via align-self */

.et_pb_post .post-content {
  display: flex !important;
  flex-direction: column !important;
}

/* ---- Button 1 (default): green gradient → orange on hover ---- */

.et_pb_post .more-link {
  align-self: flex-end !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.45em;
  margin-top: var(--im-blog-btn-mt);
  margin-bottom: var(--im-blog-btn-mb);
  padding: var(--im-blog-btn-py) var(--im-blog-btn-px) !important;
  border: 0 !important;
  border-radius: 3rem !important;
  background: linear-gradient(135deg, var(--imc-green, #9bd818) 0%, #b7ea53 100%) !important;
  color: var(--imc-on-green, #1a1a1a) !important;
  font-family: var(--imc-font-header, "Quicksand", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 1px;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .2) !important;
  transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease, color 220ms ease;
}

.et_pb_post .more-link::after {
  content: "\2192";
  font-size: .95em;
  transform: translateX(0);
  transition: transform 220ms ease;
}

.et_pb_post .more-link:hover,
.et_pb_post .more-link:focus-visible {
  background: linear-gradient(135deg, var(--imc-orange, #ff9d00) 0%, #ffc04d 100%) !important;
  color: var(--imc-on-orange, #1a1a1a) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(255, 157, 0, .35), 0 8px 20px rgba(17, 24, 39, .15) !important;
}

.et_pb_post .more-link:hover::after,
.et_pb_post .more-link:focus-visible::after {
  transform: translateX(3px);
}

.et_pb_post .more-link:focus-visible {
  outline: 2px solid #111827;
  outline-offset: 3px;
}

/* ---- Button 2 (alt): orange gradient → green on hover ---- */

.et_pb_post .more-link.im-btn-alt {
  background: linear-gradient(135deg, var(--imc-orange, #ff9d00) 0%, #ffc04d 100%) !important;
  color: var(--imc-on-orange, #1a1a1a) !important;
  box-shadow: 0 10px 24px rgba(255, 157, 0, .25) !important;
}

.et_pb_post .more-link.im-btn-alt:hover,
.et_pb_post .more-link.im-btn-alt:focus-visible {
  background: linear-gradient(135deg, var(--imc-green, #9bd818) 0%, #b7ea53 100%) !important;
  color: var(--imc-on-green, #1a1a1a) !important;
  box-shadow: 0 14px 30px rgba(155, 216, 24, .35), 0 8px 20px rgba(17, 24, 39, .15) !important;
}