/* =========================================================================
   SRF CARD — shared "image + text card" block styles
   -------------------------------------------------------------------------
   Used by BOTH:
   - template-parts/blocks/blog_section.php   (NEWS block, .srf-* classes)
   - archive-celebrities.php                  (Up Close episodes section)

   Loaded via lucern_block_assets('srf-card') — see inc/section-helpers.php.
   Keep the .srf-* selectors generic; page/block-specific overrides stay in
   the consuming template's inline <style>.
   ========================================================================= */

/* =========================================
   0. Scroll parallax (card + image separate)
   ========================================= */
@media (min-width: 768px) {
  .srf-card {
    transform: translateX(calc(var(--scroll-offset, 0px) * -1));
    transition: transform 0.15s ease-out;
  }

  .srf-image-wrapper {
    transform: translateX(var(--scroll-offset, 0px));
    transition: transform 0.15s ease-out;
  }
}

/* =========================================
   1. GLOBAL / MOBILE STYLES (Default)
   ========================================= */

.srf-beauty-wrapper {
  display: flex;
  flex-direction: column-reverse; /* Slika gore, tekst dole na mobilnom */
  gap: 0;
}

/* Kartica sa tekstom na mobilnom */
.srf-card {
  /* Reset grid pozicija da ne smetaju flex-u */
  grid-area: auto;
  grid-column: auto;
  grid-row: auto;

  padding: var(--size-6);
  padding-bottom: 31px;
  background: var(--clr-neutral-050);

  /* Na mobilnom: Gornje ivice oštre, donje zaobljene */
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: calc(var(--radius-lg) + 6px);
  border-bottom-left-radius: calc(var(--radius-lg) + 6px);

  max-width: 100%; /* Na mobilnom puna sirina */
  margin-left: 0;
  z-index: 2;
  gap: var(--size-8);
}

/* Wrapper za sliku */
.srf-image-wrapper {
  grid-area: auto;
  grid-column: auto;
}

/* Slika na mobilnom */
.srf-image-wrapper img {
  width: 100%;
  height: auto;

  /* Na mobilnom: Gornje ivice zaobljene, donje oštre (da se spoje sa karticom) */
  border-top-right-radius: calc(var(--radius-lg) + 6px);
  border-top-left-radius: calc(var(--radius-lg) + 6px);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

  object-fit: cover;
}


/* =========================================
   2. DESKTOP STYLES (Overrides Mobile)
   ========================================= */

@media (min-width: 768px) {

  .srf-beauty-wrapper {
    display: grid; /* Menjamo Flex u Grid */
    grid-template-columns: 1fr 80px 1fr;
    grid-template-rows: 80px 1fr 80px;
    grid-template-areas:
      ". image"
      "content image"
      "content .";
    gap: 0;
  }

  .srf-card {
    grid-area: content;
    padding: var(--size-11);

    /* VRAĆAMO radius na svim ivicama za Desktop */
    border-radius: calc(var(--radius-lg) + 6px);

    /* Grid pozicioniranje */
    grid-column: 1 / 3;
    grid-row: 2 / -1;

    max-width: 620px;
    margin-left: auto; /* Da gurne karticu desno ili levo po potrebi */
  }

  .srf-image-wrapper {
    grid-area: image;
    grid-column: 2 / -1;
  }

  .srf-image-wrapper img {
    /* VRAĆAMO radius na svim ivicama za Desktop */
    border-radius: calc(var(--radius-lg) + 6px);
    height: 100%; /* Da popuni grid visinu */
  }
}

.srf-title {
    font-weight: 500;
    margin-bottom:0;
    padding:0;
    /* Must be none (not just removing capitalize): .srf-title is an <h2> and
       the site-wide "h1, h2, .h1, .h2 { text-transform: uppercase }" would
       otherwise render the card title ALL CAPS instead of as typed (issue #32). */
    text-transform: none;
}
.srf-title::after,
.srf-title::before {
    content:none;
}

.srf-link:is(:last-child) {
    margin-top:var(--size-9);
}

/* Main blog CTA (last .srf-link in the list, also .btn.btn--primary): block
   layout + fixed min-width so it matches the card's other standalone buttons. */
.srf-link.btn.btn--primary {
    display: block;
    width: fit-content;
    min-width: 272px;
}

@media (max-width: 768px) {
    .srf-link.btn.btn--primary {
        min-width: 172px;
    }
}

.srf-link:not(:last-child) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color:var(--clr-text-primary);
    font: normal normal 600 16px/19px var(--font-heading);
    letter-spacing: 0px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.srf-link:not(:last-child):hover {
    color: var(--clr-primary-500);
}

.srf-link:not(:last-child) svg {
    width: 7px;
    height: 11px;
    flex-shrink: 0;
}

.srf-link:is(:first-child) {
 margin-right: var(--size-3);
}

@media (max-width: 767px) {
  .srf-beauty-wrapper {
    margin-inline: calc(-1 * var(--container-padding, 1rem));
  }

  .srf-card {
    border-radius: 0;
    padding: var(--size-6) var(--container-padding, 1rem);
    padding-bottom: 31px;
  }

  .srf-image-wrapper img {
    border-radius: calc(var(--radius-lg) + 6px) calc(var(--radius-lg) + 6px) 0 0;
  }

  .srf-link:not(:last-child) {
    font: normal normal 600 12px/15px var(--font-heading);
  }
}

/* =========================================
   3. FLIPPED VARIANT — image left, card right
   -----------------------------------------
   Same grid, mirrored areas. Used for alternating episode rows in the
   Up Close section (archive-celebrities.php): row 1 normal, row 2
   flipped, row 3 normal, ... blog_section never applies .srf-flip.
   ========================================= */
@media (min-width: 768px) {
  .srf-beauty-wrapper.srf-flip {
    grid-template-areas:
      "image ."
      "image content"
      ". content";
  }

  .srf-beauty-wrapper.srf-flip .srf-image-wrapper {
    grid-area: image;
    grid-column: 1 / 3;
  }

  .srf-beauty-wrapper.srf-flip .srf-card {
    grid-area: content;
    grid-column: 2 / -1;
    /* Mirror of the normal variant's margin-left: auto — the card hugs
       the image on its left instead of its right. */
    margin-left: 0;
    margin-right: auto;
  }

  /* Parallax directions swapped so card and image still drift toward
     each other on flipped rows. */
  .srf-beauty-wrapper.srf-flip .srf-card {
    transform: translateX(var(--scroll-offset, 0px));
  }

  .srf-beauty-wrapper.srf-flip .srf-image-wrapper {
    transform: translateX(calc(var(--scroll-offset, 0px) * -1));
  }
}

/* =========================================
   4. Reduced motion (matches pricing_section.css convention)
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .srf-card,
  .srf-image-wrapper,
  .srf-beauty-wrapper.srf-flip .srf-card,
  .srf-beauty-wrapper.srf-flip .srf-image-wrapper {
    transform: none;
    transition: none;
  }
}