/* ==========================================================================
   CC Site FX - Latest blog posts and the Singapore card (home page 8073).

   Two places on the home page, one file, because both were touched in the
   same round and both are single sections with no counterpart elsewhere.

   1. Latest blog posts (section 7d229a5b, loop grid 75603d3b, loop template
      1619): the four post cards get the light blue rim.
   2. About CartCraft (card 5569e29b): the wide photo card leans towards the
      pointer and catches a glare.

   The classes themselves are handed out at runtime by inc/ccx-blogabout.php,
   the page data in Elementor stays untouched.
   ========================================================================== */

/* ---------- 1. Blog cards ----------
   The card root of the loop template carries a 16px radius but neither fill
   nor frame, so at rest there was no card to see: image on the left, text on
   the right, both floating on the section background. A rim that lights up
   around nothing reads as a rectangle appearing out of thin air, which is the
   same fault the service slides had before their frame was found.

   The card therefore gets the frame it was missing, in the card language the
   rest of the page already uses: 1px in rgb(44,51,76) on a barely raised
   fill. The section itself sits on #181F32, so the card cannot use that same
   blue - a white tint of about two percent lifts it just enough to read as a
   surface without turning the section into a patchwork.

   Padding goes on .e-con-inner, not on the container: a boxed container in
   Elementor keeps its own padding at zero and hands the value to the inner
   box. Sixteen pixels are enough to keep the picture off the new frame and
   add 32px to the height of each card, which the grid distributes evenly
   because every cell is one row of the same track. */
.elementor-8073 [data-id="75603d3b"] [data-id="1a8cb7f"] {
  border: 1px solid rgb(44, 51, 76);
  background-color: rgba(255, 255, 255, 0.022);
  /* The aura is held closer than the 36px default of the engine: the two
     columns stand 24px apart, and a wide bloom would light the neighbour
     while the pointer is still on this card. */
  --gc-pad: 20px;
}
.elementor-8073 [data-id="75603d3b"] [data-id="1a8cb7f"] > .e-con-inner {
  padding: 16px;
}

/* Category chip: it already was a pill (100px radius, blue tint), it just had
   no edge, while every other pill on the page is drawn with a thin line. One
   line in the same blue at low opacity brings it into that language, nothing
   else about it changes. */
.elementor-8073 [data-id="75603d3b"] .custom-terms span.elementor-post-info__terms-list-item {
  border: 1px solid rgba(107, 167, 250, 0.3);
  border-radius: 999px;
}

/* Phone: the picture fills the whole width and the card turns into a stack,
   so the frame has to breathe a little less. */
@media (max-width: 767px) {
  .elementor-8073 [data-id="75603d3b"] [data-id="1a8cb7f"] > .e-con-inner {
    padding: 12px;
  }
  .elementor-8073 [data-id="75603d3b"] [data-id="1a8cb7f"] {
    --gc-pad: 14px;
  }
}

/* ---------- 2. About CartCraft card ----------
   The card is a photograph, not a navy surface, and the glare of the engine
   is tuned for navy. At the factory value the light band washed out the
   bright zebra stripes on the right half of the picture, so both layers come
   down: the light to 0.12 and the shimmer to 0.07. The lean itself stays as
   it is, the perspective is derived from the card width by the runtime. */
.elementor-8073 [data-id="5569e29b"].ccx-tiltcard {
  --tc-glare: 0.12;
  --tc-holo: 0.07;
}