/**
 * @file
 * sHTG Download Card component styles.
 *
 * Desktop: image on outer (overhangs card top). Corner SVG on outer at z-index:11
 *          renders above desktop image at z-index:10.
 * Mobile:  desktop image hidden. Mobile image inside card, clipped by its own
 *          wrapper (overflow:hidden + border-radius). Card has no overflow:hidden
 *          so the icon badge can protrude 20px above the card top.
 */

.layout-container {

  /* ==========================================================================
     Outer wrapper — positioning context for icon badge + corner SVG
     ========================================================================== */

  .shtg-download-card__container {
    height: 100%; /* equal heights: propagate the stretched grid cell down to the card */
  }

  .shtg-download-card__outer {
    position: relative;
    height: 100%; /* equal heights */
    padding-top: 15px;  /* room for the ~16px top overhang */
    padding-left: 40px; /* icon badge overhang reserve (icon sits at left:-40) */
  }

  /* ==========================================================================
     Card
     ========================================================================== */

  .shtg-download-card {
    position: relative;
    height: 100%; /* equal heights: fill the stretched grid cell */
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 23px 32px 23px 43px; /* 43px left clears the icon's -40 overlap */
    min-height: 202px;
    border-radius: 32px;
    background: linear-gradient(to bottom, #a27cd5 -75.08%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.5) 53%, #a27cd5 175.08%);
    background-size: 100% 200%;
    background-position: bottom center;
    transition: background-position 0.4s ease;
    overflow: visible; /* let the tilted media overhang the card top edge */
    /* Allow overflow on the top, left and right (negative insets extend the clip
       region outward), but clip flush at the bottom edge (bottom inset 0) so the
       tilted media can't poke below the card. */
    clip-path: inset(-9999px -9999px 0 -9999px);
  }

  /* Gradient border via pseudo-element + mask-composite — works with border-radius */
  .shtg-download-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-brand, linear-gradient(to right, #fa7821, #4f08b0));
    mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  /* ==========================================================================
     Content — flex grow column (text). NO position: the title-link::after
     click overlay must stay anchored to .shtg-download-card so it covers the
     whole card (including the image area), keeping the image clickable.
     ========================================================================== */

  .shtg-download-card__content {
    z-index: 5;
    flex: 1 1 auto;
    min-width: 0; /* allow text to wrap instead of forcing the card wider */
  }

  /* ==========================================================================
     Media column — reserves the image column width (flex). The image itself is
     absolutely positioned INSIDE this column only (not the whole card), so it
     does NOT inflate the card height — the card height stays driven by the text
     content, which keeps the two cards' heights equal. The image is glued to the
     card's bottom edge and its extra height overhangs the top by ~16px.
     Height-driven (width:auto) => intrinsic ratio preserved, never distorts.
     ========================================================================== */

  .shtg-download-card__media {
    flex: 0 0 185px;        /* reserve the image column width */
    align-self: stretch;    /* span the card height (which is content-driven) */
    position: relative;     /* containing block for the absolute image */
    pointer-events: none;   /* clicks pass through to the card-wide link overlay */
  }

  .shtg-download-card__image {
    position: absolute;
    left: 50%;
    bottom: -23px;          /* cancel card padding-bottom -> glue to the bottom edge */
    /* height = card border-box + 16px overhang (62 = padTop 23 + padBot 23 + 16) */
    /*height: calc(100% + 62px);*/
    width: auto;            /* preserve intrinsic ~0.773 ratio -> no distortion */
    transform: translateX(-50%) rotate(3.86deg);
    transform-origin: center;
    border-radius: 4px;

    @media (min-width: 768px) and (max-width: 991px) {
      height: calc(100% + 62px);
    }
  }

  /* ==========================================================================
     Download icon
     ========================================================================== */

  .shtg-download-card__icon-wrap {
    --dl-ring-stroke: #fa7821;
    --dl-icon-fill: url(#dc_paint2_linear);
    position: absolute;
    left: -40px;
    top: 50px;
    transform: translateY(-50%);
    z-index: 5;
    transition: top 0.3s ease;
  }

  .shtg-download-card:hover,
  .shtg-download-card:focus-within {
    background-position: top center;
  }

  .shtg-download-card:hover::before,
  .shtg-download-card:focus-within::before {
    background: linear-gradient(180deg, var(--color-purple, #4f08b0) 3.68%, #21034a 100%);
  }

  .shtg-download-card:hover .shtg-download-card__icon-wrap,
  .shtg-download-card:focus-within .shtg-download-card__icon-wrap {
    --dl-ring-stroke: var(--color-purple, #4f08b0);
    --dl-icon-fill: url(#dc_paint2_linear_hover);
  }

  .shtg-download-card__icon {
    display: block;
    width: 80px;
    height: 80px;
  }

  /* ==========================================================================
     Title
     ========================================================================== */

  .shtg-download-card__title {
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0px;
    color: #4f08b0;
    margin: 0 0 10px;
  }

  .shtg-download-card__title strong {
    font-weight: 700;
    display: block;
    text-transform: uppercase;
  }

  .shtg-download-card__title-link {
    color: inherit;
    text-decoration: none;
  }

  .shtg-download-card__title-link::after {
    content: '';
    position: absolute;
    inset: 0;
    left: -30px; /* extend over icon-wrap which protrudes left of card (icon at -40) */
    z-index: 6; /* above icon-wrap (z-index: 5) */
  }

  .shtg-download-card__title-link:hover {
    text-decoration: none;
    font-weight: 700;
    color: inherit;
  }

  /* ==========================================================================
     Body
     ========================================================================== */

  .shtg-download-card__body,
  .shtg-download-card__body p {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: -0.2px;
    color: #000;
    margin: 0;
  }

  /* ==========================================================================
     Corner SVG — on the outer wrapper at z-index 11, renders above the in-card
     media. Border-radius clips the SVG to the card's bottom-right corner.
     ========================================================================== */

  .shtg-download-card__corner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    overflow: hidden;
    border-radius: 0 0 32px 0;
    line-height: 0;
    pointer-events: none;
    z-index: 11;
  }

  .border-overlay {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-brand, linear-gradient(to right, #FA7821, #4F08B0));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    padding-top: 0px;
    z-index: 1;
  }

  .shtg-download-card__corner svg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ==========================================================================
     Stacked-tablet band (768–991px): cards are already stacked (see :has rule
     below). Cap the card to the Figma desktop width and center it.
     567 = 527 card + 40 icon reserve (__outer is border-box via the theme's
     global reset). Desktop >=992 (2-up) and mobile <=767 are untouched here.
     ========================================================================== */

  /*@media (min-width: 768px) and (max-width: 991px) {*/
  /*  .shtg-download-card__outer {*/
  /*    max-width: 567px;*/
  /*    margin-inline: auto;*/
  /*  }*/
  /*}*/

  /* ==========================================================================
     Scoped stacking — no change to the shared columns component. A columns
     instance that contains a download card stacks to one column below 992px
     (the shared component only stacks at <=640 / <=768). Cross-component
     :has() selector is intentional and matches theme conventions.
     ========================================================================== */

  @media (max-width: 991px) {
    .columns:has(.shtg-download-card__container) {
      grid-template-columns: 1fr;
      row-gap: 1.5rem;
    }
  }

  /* ==========================================================================
     Responsive — mobile
     Figma mobile: icon badge ~36px above card top; image contained on the right,
     smaller, no top-overhang. Card stays flex (no grid).
     ========================================================================== */

  @media (max-width: 767px) {
    .shtg-download-card__outer {
      padding-top: 36px; /* icon protrudes 36px above card top */
      padding-left: 0; /* reset desktop left gutter */
    }

    /* Card: keep flex; tighter mobile gap/padding; room for icon badge above */
    .shtg-download-card {
      gap: 12px;
      padding: 40px 20px 36px; /* icon protrudes above; preserved mobile padding */
      border-radius: 24px;
    }

    /* Icon badge: positioned 36px above card top-left, matching Figma */
    .shtg-download-card__icon-wrap {
      position: absolute;
      top: -36px;
      left: 18px;
      z-index: 5;
      transform: none; /* reset desktop translateY(-50%) */
    }

    .shtg-download-card__title-link::after {
      top: -30px; /* extend over icon-wrap which protrudes above card on mobile */
      left: 0; /* reset desktop left extension */
    }

    .shtg-download-card__icon {
      width: 72px;
      height: 72px;
    }

    /* Mobile media: narrower column; image fixed size, glued to bottom, contained */
    .shtg-download-card__media {
      flex: 0 0 132px;      /* Figma mobile image column */
    }

    .shtg-download-card__image {
      height: auto;         /* fixed size (no scale) -> contained, no top overhang */
      width: 132px;         /* Figma mobile box */
      bottom: -36px;        /* cancel mobile padding-bottom -> glue to the bottom edge */
    }

    /* Typography */
    .shtg-download-card__title {
      font-size: 14px;
      line-height: 18px;
      margin-bottom: 6px;
    }

    .shtg-download-card__body,
    .shtg-download-card__body p {
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.2px;
    }
    .shtg-download-card__body {
      margin-top: 10px;
    }


    /* Corner: smaller, matches 24px mobile border-radius */
    .shtg-download-card__corner {
      width: 110px;
      border-radius: 0 0 24px 0;
    }
  }

}