/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/


/* ============================================================
   GoSnowmobiling — "Choose the right sled" card row
   Section: 55c8c48 > 8c6d0a6 > 277fe95   (page 11, home)

   PASTE INTO: Appearance > Customize > Additional CSS
   (Elementor free has no per-element Custom CSS field.)

   Proportions taken from the reference: portrait cards, tight
   gap, near-square corners, large cream title bottom-left,
   arrow chip bottom-right, maroon line weaving front/behind.
   ============================================================ */


/* ------------------------------------------------------------
   1. THE ROW
   Every dimension below is driven by these variables.
   --sled-gap feeds both the real column gap and the line's
   layer-switch points, so they can never drift apart.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-277fe95 {
  --sled-height: 420px;     /* card height — the "exactly like this" number */
  --sled-gap: 14px;         /* space between cards                         */
  --sled-count: 4;          /* cards in the row                            */
  --sled-radius: 0;         /* fully square — no rounding anywhere         */
  --sled-pad: 26px;         /* inner padding                               */
  --sled-ink: #EDE8DC;      /* cream title colour, not pure white          */

  position: relative;
  display: flex;
  gap: var(--sled-gap);
  align-items: stretch;
}


/* ------------------------------------------------------------
   2. THE CARD
   Fixed height, image as a full-bleed layer, text pinned to
   the bottom. min-width:0 is what stops the description text
   spilling past the card edge.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-277fe95 > .e-con {
  position: relative;
  z-index: 1;                     /* above the line's back layer */
  flex: 1 1 0;
  min-width: 0;
  height: var(--sled-height);
  border: 0;
  border-radius: var(--sled-radius);
  overflow: hidden;
  background: #1d2a33;            /* holds the shape while images load */

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sled-pad);
}

.elementor-11 .elementor-element-277fe95 > .e-con > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;                /* overrides Elementor's img reset */
  object-fit: cover;
  object-position: center 40%;    /* keeps the rider in frame when cropped */
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* bottom scrim — light, as in the reference */
.elementor-11 .elementor-element-277fe95 > .e-con::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .58) 0%,
    rgba(0, 0, 0, .28) 30%,
    rgba(0, 0, 0, .04) 58%,
    transparent 78%);
}

/* arrow chip, bottom-right */
.elementor-11 .elementor-element-277fe95 > .e-con::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: var(--sled-pad);
  bottom: var(--sled-pad);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0;
  background-color: rgba(0, 0, 0, .42);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 14'%3E%3Cpath d='M1.5 1.5 L7 7 L1.5 12.5' fill='none' stroke='%23EDE8DC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  pointer-events: none;
}


/* ------------------------------------------------------------
   2b. KILL ALL BORDERS / ROUNDING
   Elementor 4.x containers read their border from custom
   properties, so a plain `border: 0` gets re-applied by the
   base .e-con rule. The variables have to be zeroed too.

   NOTE: each card carries `--border-radius: 20px 20px 20px 20px`
   from a rule scoped as `.elementor-11 .elementor-element.
   elementor-element-16a5366`, which is (0,3,0). The reset below
   therefore includes `.elementor-element` in the selector so it
   matches that weight — without it the 20px stayed live and the
   corners kept rounding. Longhands and logical properties are
   listed explicitly because a shorthand alone can be re-expanded
   by Elementor's own longhand declarations.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element.elementor-element-277fe95,
.elementor-11 .elementor-element.elementor-element-277fe95 > .e-con {
  --border-style: none;
  --border-width: 0;
  --border-top-width: 0;
  --border-right-width: 0;
  --border-bottom-width: 0;
  --border-left-width: 0;
  --border-radius: 0px 0px 0px 0px;
  --border-block-start-width: 0;
  --border-block-end-width: 0;
  --border-inline-start-width: 0;
  --border-inline-end-width: 0;
}

.elementor-11 .elementor-element.elementor-element-277fe95,
.elementor-11 .elementor-element.elementor-element-277fe95 > .e-con,
.elementor-11 .elementor-element.elementor-element-277fe95 > .e-con > img,
.elementor-11 .elementor-element.elementor-element-277fe95 > .e-con > * {
  border: 0 none !important;
  outline: 0;
  box-shadow: none !important;

  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
}

/* ------------------------------------------------------------
   2c. SECTION RULES (#C4C4C4)
   Elementor puts a 1px solid #C4C4C4 border on the top and
   bottom edges of section 55c8c48 (class .e-55c8c48-716abfd).
   Delete whichever of these you don't want; keep both to
   remove the grey rules above and below the row entirely.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-55c8c48 {
  border-block-start-width: 0 !important;   /* rule above the row */
  border-block-end-width: 0 !important;     /* rule below the row */
  border-style: none !important;

  /* section is width:100%, so this keeps the row off the viewport edges.
     Elementor sets `padding:0` here, hence !important. */
  padding-inline-start: 15px !important;
  padding-inline-end: 15px !important;
}

/* ------------------------------------------------------------
   3. TYPOGRAPHY
   Large, heavy, uppercase, tight leading, bottom-left.
   Title scales with viewport so it stays proportional.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-277fe95 > .e-con > h2,
.elementor-11 .elementor-element-277fe95 > .e-con > p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--sled-ink);
  text-align: left;
}

.elementor-11 .elementor-element-277fe95 > .e-con > h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(22px, 2.1vw, 34px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-right: 42px;            /* clears the arrow chip */
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.elementor-11 .elementor-element-277fe95 > .e-con > p {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(237, 232, 220, .88);
  padding-right: 42px;            /* clears the arrow chip */
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}


/* ------------------------------------------------------------
   4. (the weaving line used to live here — it now runs through
   the "Find What You Need" row instead, see block 12 below)
   ------------------------------------------------------------ */


/* ------------------------------------------------------------
   5. BUTTON HOVER
   #9A0511 is the same red the header nav already uses on hover,
   so the section stays consistent with the rest of the site.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-442e473 .elementor-button {
  background-color: #540B1F;
  color: #fff;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.elementor-11 .elementor-element-442e473 .elementor-button:hover,
.elementor-11 .elementor-element-442e473 .elementor-button:focus-visible {
  background-color: #9A0511;
  color: #fff;
}

.elementor-11 .elementor-element-442e473 .elementor-button:focus-visible {
  outline: 2px solid #540B1F;
  outline-offset: 3px;
}

/* card arrow chip picks up the brand red on card hover */
.elementor-11 .elementor-element-277fe95 > .e-con::after {
  transition: background-color .25s ease;
}

.elementor-11 .elementor-element-277fe95 > .e-con:hover::after {
  background-color: #9A0511;
}


/* ------------------------------------------------------------
   6. RESPONSIVE
   The line only reads on one unbroken row, so it's dropped
   as soon as the cards wrap. 4 cards wrap to a clean 2 x 2.
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .elementor-11 .elementor-element-277fe95 {
    --sled-height: 360px;
    --sled-pad: 20px;
    flex-wrap: wrap;
  }
  .elementor-11 .elementor-element-277fe95 > .e-con {
    flex: 1 1 calc((100% - var(--sled-gap)) / 2);       /* 2 across */
  }
}

@media (max-width: 767px) {
  .elementor-11 .elementor-element-277fe95 {
    --sled-height: 300px;
    --sled-pad: 16px;
  }
  .elementor-11 .elementor-element-277fe95 > .e-con {
    flex: 1 1 calc((100% - var(--sled-gap)) / 2);       /* 2 across */
  }
  .elementor-11 .elementor-element-277fe95 > .e-con::after {
    width: 26px; height: 26px;
  }
  .elementor-11 .elementor-element-277fe95 > .e-con > h2 {
    font-size: 18px; padding-right: 34px;
  }
  .elementor-11 .elementor-element-277fe95 > .e-con > p {
    font-size: 12px; padding-right: 34px;
  }
}


/* ============================================================
   ============================================================
   "FIND WHAT YOU NEED" card row
   Section: f7dee05 > 221acc3   (page 11, home)

   Same card treatment as the sled row above: fixed-height
   portrait cards, image as a full-bleed layer, cream title and
   description pinned bottom-left, arrow bottom-right.

   Difference from the sled row: here the arrow is a real
   Elementor Icon widget (a live link), not a CSS chip — so it
   gets positioned rather than drawn, and it stays clickable.
   No weaving line on this row.
   ============================================================
   ============================================================ */


/* ------------------------------------------------------------
   7. THE ROW
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-221acc3 {
  --find-height: 420px;     /* card height — matches the sled row */
  --find-gap: 14px;         /* space between cards                */
  --find-pad: 26px;         /* inner padding                      */
  --find-ink: #EDE8DC;      /* cream title colour                 */
  --find-focal: 50%;        /* image crop: lower % shows more sky  */
  --find-count: 4;          /* cards in the row                    */
  --find-top: 40%;          /* vertical position of the line       */

  position: relative;
  display: flex;
  gap: var(--find-gap);
  align-items: stretch;

  /* 4 cards = 3 seams. Each b sits in the middle of one gap, so the
     line's layer switches can never drift away from the real gaps. */
  --find-step: calc((100% + var(--find-gap)) / var(--find-count));
  --find-b1: calc(var(--find-step) * 1 - var(--find-gap) / 2);
  --find-b2: calc(var(--find-step) * 2 - var(--find-gap) / 2);
  --find-b3: calc(var(--find-step) * 3 - var(--find-gap) / 2);
}


/* ------------------------------------------------------------
   7b. SECTION PADDING
   Matches block 2c on the sled section: f7dee05 is width:100%
   with `padding:0`, so without this the first card sits flush
   against the viewport edge while the sled row above is inset
   by 15px. Same values, same !important, same reason.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-f7dee05 {
  padding-inline-start: 15px !important;
  padding-inline-end: 15px !important;
}


/* ------------------------------------------------------------
   8. THE CARD
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-221acc3 > .e-con {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  height: var(--find-height);
  border: 0;
  overflow: hidden;
  background: #1d2a33;            /* holds the shape while images load */

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--find-pad);
}

/* image becomes a full-bleed background layer.
   These source images are landscape (4:3 and 16:9) inside a
   portrait card, so `cover` crops the sides — --find-focal
   controls which horizontal band stays in frame. */
.elementor-11 .elementor-element-221acc3 > .e-con > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;                /* overrides Elementor's img reset */
  object-fit: cover;
  object-position: center var(--find-focal);
  display: block;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* bottom scrim */
.elementor-11 .elementor-element-221acc3 > .e-con::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .58) 0%,
    rgba(0, 0, 0, .28) 30%,
    rgba(0, 0, 0, .04) 58%,
    transparent 78%);
}


/* ------------------------------------------------------------
   8b. KILL ALL BORDERS / ROUNDING
   Same reasoning as block 2b — `.elementor-element` is in the
   selector so the reset matches Elementor's own (0,3,0) rules,
   and every corner longhand is zeroed explicitly.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element.elementor-element-221acc3,
.elementor-11 .elementor-element.elementor-element-221acc3 > .e-con {
  --border-style: none;
  --border-width: 0;
  --border-top-width: 0;
  --border-right-width: 0;
  --border-bottom-width: 0;
  --border-left-width: 0;
  --border-radius: 0px 0px 0px 0px;
  --border-block-start-width: 0;
  --border-block-end-width: 0;
  --border-inline-start-width: 0;
  --border-inline-end-width: 0;
}

.elementor-11 .elementor-element.elementor-element-221acc3,
.elementor-11 .elementor-element.elementor-element-221acc3 > .e-con,
.elementor-11 .elementor-element.elementor-element-221acc3 > .e-con > img,
.elementor-11 .elementor-element.elementor-element-221acc3 > .e-con > * {
  border: 0 none !important;
  outline: 0;
  box-shadow: none !important;

  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-start-start-radius: 0 !important;
  border-start-end-radius: 0 !important;
  border-end-start-radius: 0 !important;
  border-end-end-radius: 0 !important;
}


/* ------------------------------------------------------------
   9. TYPOGRAPHY
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-221acc3 > .e-con > h2,
.elementor-11 .elementor-element-221acc3 > .e-con > p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--find-ink);
  text-align: left;
}

.elementor-11 .elementor-element-221acc3 > .e-con > h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(20px, 1.7vw, 28px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-right: 42px;            /* clears the arrow */
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.elementor-11 .elementor-element-221acc3 > .e-con > p {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(237, 232, 220, .88);
  padding-right: 42px;            /* clears the arrow */
  text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

/* the copy uses <br> to force line breaks that only made sense
   in the old wide layout — ignore them inside these cards */
.elementor-11 .elementor-element-221acc3 > .e-con > p br {
  display: none;
}


/* ------------------------------------------------------------
   10. ARROW (Icon widget, bottom-right)
   Positioned into the same spot the sled row's CSS chip
   occupies, but left as a real link so it stays clickable.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-221acc3 > .e-con > .elementor-widget-icon {
  position: absolute;
  z-index: 3;
  right: var(--find-pad);
  bottom: var(--find-pad);
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon-wrapper {
  text-align: right;
  line-height: 0;
}

.elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background-color: rgba(0, 0, 0, .42);
  transition: background-color .25s ease;
}

.elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon svg {
  width: 18px;
  height: 11px;
  display: block;
}

/* the SVG ships with a hardcoded maroon fill — override it so
   the arrow reads against the photo */
.elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon svg path {
  fill: var(--find-ink);
}

.elementor-11 .elementor-element-221acc3 > .e-con:hover .elementor-icon,
.elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon:focus-visible {
  background-color: #9A0511;
}

.elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon:focus-visible {
  outline: 2px solid #EDE8DC;
  outline-offset: 2px;
}


/* ------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1024px) {
  .elementor-11 .elementor-element-221acc3 {
    --find-height: 360px;
    --find-pad: 20px;
    flex-wrap: wrap;
  }
  .elementor-11 .elementor-element-221acc3 > .e-con {
    flex: 1 1 calc((100% - var(--find-gap)) / 2);       /* 2 across */
  }
}

@media (max-width: 767px) {
  .elementor-11 .elementor-element-221acc3 {
    --find-height: 300px;
    --find-pad: 16px;
  }
  .elementor-11 .elementor-element-221acc3 > .e-con {
    flex: 1 1 calc((100% - var(--find-gap)) / 2);       /* 2 across */
  }
  .elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon {
    width: 26px; height: 26px;
  }
  .elementor-11 .elementor-element-221acc3 > .e-con .elementor-icon svg {
    width: 15px; height: 9px;
  }
  .elementor-11 .elementor-element-221acc3 > .e-con > h2 {
    font-size: 17px; padding-right: 34px;
  }
  .elementor-11 .elementor-element-221acc3 > .e-con > p {
    font-size: 12px; padding-right: 34px;
  }
}


/* ------------------------------------------------------------
   12. THE WEAVING LINE  —  4 COLUMNS
   In front of cards 1 and 3 — behind cards 2 and 4.
   ::before = full line under the cards
   ::after  = same line over the cards, masked to 1 / 3

   Line colours live inside the SVG, not in variables:
   %23540B1F = maroon stroke, %23FFFFFF = halo that lifts it
   off the photos.
   ------------------------------------------------------------ */

.elementor-11 .elementor-element-221acc3::before,
.elementor-11 .elementor-element-221acc3::after {
  content: "";
  position: absolute;
  top: var(--find-top);
  left: 0;
  width: 100%;
  height: 110px;
  transform: translateY(-50%);
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 110' preserveAspectRatio='none'%3E%3Cpath d='M0.0,49.4 C8.4,53.2 30.7,66.6 46.9,70.6 C63.1,74.6 75.8,78.3 90.7,71.7 C105.6,65.0 114.6,32.1 130.4,33.3 C146.2,34.5 160.4,76.4 179.2,78.4 C197.9,80.3 215.3,44.8 235.2,44.1 C255.1,43.4 273.7,75.8 290.6,74.6 C307.5,73.3 313.2,36.9 329.7,37.1 C346.3,37.2 365.4,76.6 383.2,75.5 C401.0,74.5 411.3,38.1 429.5,31.2 C447.6,24.3 466.4,36.5 484.8,36.9 C503.1,37.3 513.6,28.3 532.1,33.7 C550.6,39.0 567.9,61.3 588.2,66.8 C608.6,72.2 629.0,69.4 646.2,64.1 C663.4,58.8 671.0,34.3 684.7,37.1 C698.4,39.9 707.2,81.4 722.8,79.7 C738.3,78.0 754.7,34.7 771.7,27.7 C788.7,20.8 800.7,32.3 817.9,40.6 C835.1,48.9 850.3,76.5 868.1,74.2 C885.9,72.0 901.8,29.0 917.6,28.0 C933.5,27.1 942.3,61.4 957.0,68.9 C971.7,76.3 992.3,69.6 1000.0,69.7' fill='none' stroke='%23FFFFFF' stroke-opacity='.6' stroke-width='10' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0.0,49.4 C8.4,53.2 30.7,66.6 46.9,70.6 C63.1,74.6 75.8,78.3 90.7,71.7 C105.6,65.0 114.6,32.1 130.4,33.3 C146.2,34.5 160.4,76.4 179.2,78.4 C197.9,80.3 215.3,44.8 235.2,44.1 C255.1,43.4 273.7,75.8 290.6,74.6 C307.5,73.3 313.2,36.9 329.7,37.1 C346.3,37.2 365.4,76.6 383.2,75.5 C401.0,74.5 411.3,38.1 429.5,31.2 C447.6,24.3 466.4,36.5 484.8,36.9 C503.1,37.3 513.6,28.3 532.1,33.7 C550.6,39.0 567.9,61.3 588.2,66.8 C608.6,72.2 629.0,69.4 646.2,64.1 C663.4,58.8 671.0,34.3 684.7,37.1 C698.4,39.9 707.2,81.4 722.8,79.7 C738.3,78.0 754.7,34.7 771.7,27.7 C788.7,20.8 800.7,32.3 817.9,40.6 C835.1,48.9 850.3,76.5 868.1,74.2 C885.9,72.0 901.8,29.0 917.6,28.0 C933.5,27.1 942.3,61.4 957.0,68.9 C971.7,76.3 992.3,69.6 1000.0,69.7' fill='none' stroke='%23540B1F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

.elementor-11 .elementor-element-221acc3::before { z-index: 0; }

.elementor-11 .elementor-element-221acc3::after {
  z-index: 5;
  -webkit-mask-image: linear-gradient(to right,
    #000 0, #000 var(--find-b1),
    transparent var(--find-b1), transparent var(--find-b2),
    #000 var(--find-b2), #000 var(--find-b3),
    transparent var(--find-b3), transparent 100%);
  mask-image: linear-gradient(to right,
    #000 0, #000 var(--find-b1),
    transparent var(--find-b1), transparent var(--find-b2),
    #000 var(--find-b2), #000 var(--find-b3),
    transparent var(--find-b3), transparent 100%);
}

/* the line only reads on one unbroken row */
@media (max-width: 1024px) {
  .elementor-11 .elementor-element-221acc3::before,
  .elementor-11 .elementor-element-221acc3::after { display: none; }
}