/* ============================================================
   NOMAD STRIP — Founder's Blog Teaser
   Dark card · clickable · 3-column grid
   ============================================================ */

.nomad-strip {
   position: relative;
   display: grid !important;
   grid-template-columns: auto 1fr auto;
   align-items: center;
   gap: 24px;
   width: 100% !important;
   padding: 18px 22px !important;
   background: #0e2946 !important;
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px !important;
   box-shadow: 0 12px 30px rgba(2, 16, 31, 0.15);
   overflow: hidden;
   text-decoration: none;
   transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
   cursor: pointer;
   margin: 2rem 0 !important;
}

.nomad-strip:hover {
   transform: translateY(-2px);
   border-color: rgba(127, 212, 255, 0.25);
   box-shadow: 0 18px 40px rgba(2, 16, 31, 0.25);
}

/* Shimmer sweep on hover */
.nomad-strip::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg,
         transparent 0%,
         rgba(127, 212, 255, 0.06) 50%,
         transparent 100%);
   pointer-events: none;
   transition: left 0.9s cubic-bezier(0.16, 1, 0.3, 1);
   z-index: 1;
}

.nomad-strip:hover::before {
   left: 100%;
}

/* Blue left-border accent (differentiates from gold assure-strip) */
.nomad-strip::after {
   content: "";
   position: absolute;
   top: 12px;
   bottom: 12px;
   left: 0;
   width: 3px;
   background: linear-gradient(180deg, var(--bee-blue), transparent);
   border-radius: 0 3px 3px 0;
   pointer-events: none;
   z-index: 2;
}

/* ---------- Icon (column 1) ---------- */
.nomad-strip .nomad-strip-icon {
   position: relative;
   z-index: 2;
   display: grid !important;
   place-items: center;
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: rgba(127, 212, 255, 0.10);
   border: 1px solid rgba(127, 212, 255, 0.18);
}

.nomad-strip .nomad-strip-icon i,
.nomad-strip .nomad-strip-icon svg {
   font-size: 16px;
   width: 16px;
   height: 16px;
   color: var(--bee-blue);
   fill: var(--bee-blue);
}

/* ---------- Content (column 2) ---------- */
.nomad-strip .nomad-strip-content {
   position: relative;
   z-index: 2;
   min-width: 0;
   display: grid !important;
   gap: 4px;
}

/* Meta row — eyebrow · dot · scope */
.nomad-strip .nomad-strip-meta {
   display: grid !important;
   padding: 0 !important;
   grid-auto-flow: column;
   grid-auto-columns: max-content;
   align-items: center;
   gap: 10px;
}

.nomad-strip .nomad-strip-eyebrow,
.nomad-strip .nomad-strip-eyebrow p {
   font-size: 14px;
   font-weight: 700;
   color: var(--bee-blue);
   letter-spacing: 1.2px;
   text-transform: uppercase;
   margin: 0;
   line-height: 1;
}

/* Dot separator between eyebrow and scope (CSS-only) */
.nomad-strip .nomad-strip-eyebrow::after {
   content: "";
   display: inline-block;
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   margin-left: 10px;
   vertical-align: middle;
   position: relative;
   top: -1px;
}

.nomad-strip .nomad-strip-scope,
.nomad-strip .nomad-strip-scope p {
   font-size: 12px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.5);
   letter-spacing: 0.5px;
   text-transform: uppercase;
   margin: 0;
   line-height: 1;
}

/* Title */
.nomad-strip .nomad-strip-title,
.nomad-strip .nomad-strip-title .elementor-heading-title {
   font-size: 22px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.92);
   line-height: 1.4;
   margin: 0;
   letter-spacing: -0.1px;
}

.nomad-strip .nomad-strip-title em,
.nomad-strip .nomad-strip-title .elementor-heading-title em {
   font-style: italic;
   font-weight: 600;
   color: #fff;
   background: linear-gradient(135deg, var(--bee-blue) 0%, #fff 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

/* ---------- CTA Pill (column 3) ---------- */
/*.nomad-strip .nomad-strip-cta {*/
/*   position: relative;*/
/*   z-index: 2;*/
/*   display: grid !important;*/
/*   grid-auto-flow: column;*/
/*   grid-auto-columns: max-content;*/
/*   align-items: center;*/
/*   gap: 8px;*/
/*   padding: 12px 14px 12px 16px !important;*/
/*   border-radius: 999px;*/
/*   background: rgba(127, 212, 255, 0.08);*/
/*   border: 1px solid rgba(127, 212, 255, 0.2);*/
/*   transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease;*/
/*}*/

/*.nomad-strip .nomad-strip-cta p,*/
/*.nomad-strip .nomad-strip-cta span,*/
/*.nomad-strip .nomad-strip-cta .e-paragraph-base {*/
/*   font-size: 14px;*/
/*   font-weight: 600;*/
/*   color: var(--bee-blue);*/
/*   letter-spacing: 0.4px;*/
/*   text-transform: uppercase;*/
/*   margin: 0;*/
/*   white-space: nowrap;*/
/*}*/

/* Arrow drawn via CSS (no widget needed) */




/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
   .nomad-strip {
      gap: 18px;
      padding: 16px 18px;
   }

   .nomad-strip .nomad-strip-title,
   .nomad-strip .nomad-strip-title .elementor-heading-title {
      font-size: 14px;
   }
   .nomad-strip .nomad-strip-scope{
       display:none !important;
   }
}

@media (max-width: 700px) {
   .nomad-strip {
      grid-template-columns: auto 1fr;
      grid-template-areas:
         "icon content"
         "cta cta";
      gap: 14px 14px;
      padding: 16px;
   }

   .nomad-strip .nomad-strip-icon {
      grid-area: icon;
   }

   .nomad-strip .nomad-strip-content {
      grid-area: content;
   }

   .nomad-strip .nomad-strip-cta {
      grid-area: cta;
      justify-self: stretch;
      justify-content: center;
   }

   .nomad-strip::after {
      top: 0;
      left: 16px;
      right: 16px;
      bottom: auto;
      width: auto;
      height: 3px;
      background: linear-gradient(90deg, var(--bee-blue), transparent);
      border-radius: 0 0 3px 3px;
   }
}

@media (max-width: 480px) {
   .nomad-strip {
      border-radius: 14px;
      padding: 14px;
   }

   .nomad-strip .nomad-strip-title,
   .nomad-strip .nomad-strip-title .elementor-heading-title {
      font-size: 13px;
      line-height: 1.45;
   }
}