/* payments1.css – mobile-first version 1 */

/* ================================
   PAYMENTS – mobile-first
   Reuses .contact-form-group style
   ================================ */

/* Section container (payments page) */
.section-one {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  align-items: stretch;
  padding: 2rem 1rem;          /* mobile base */
}

/* Keep the tab as before */
.section-one .section-tab {
  display: inline-block;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Stack the flow boxes vertically, centered */
.payment-icon-stack {
  width: 100%;
  max-width: none;       /* new – remove any cap */
  margin-inline: 0;      /* was: auto */
  /*margin-inline: auto;*/
  display: flex;
  flex-direction: column;
  gap: 0.5rem;                /* space between flow boxes */
}

/* --------------------------------
   Flow group boxes
   --------------------------------
   We reuse the visual styling from
   .contact-form-group (border, radius,
   padding, legend style) defined in
   contact.css, and only tweak layout
   for diagrams.
*/
.payment-flow-group {
  /* base is .contact-form-group */
  margin: 0;                   /* remove default fieldset margins */
  grid-template-columns: 1fr;  /* override 2-column grid → single column */
  gap: 1.5rem;                 /* space between legend and diagram */
}

/* Legend (title) stays visually consistent with contact form;
   you can tweak size slightly if you like */
.payment-flow-group legend {
  font-size: 1.5rem;
  font-weight: 550px;
}

/* Diagram wrapper spans full width inside the grid */
.payment-flow-diagram {
  grid-column: 1 / -1;
}

/* Make diagrams responsive */
.payment-flow-diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-journey {
  margin: 2rem auto 0;
  text-align: center;
}

.hero-journey img {
  max-width: 900px;   /* upper limit on big screens */
  width: 100%;        /* responsive within its container */
  height: auto;
  display: block;
  align-items: center;
}

/* General image behaviour */
img {
  max-width: 100%;
  height: auto;       /* This is key for correct zoom/responsiveness */
  align-items: center;
}

/* ================================
   BREAKPOINTS
   ==============================
/* Tablets and up */
@media (min-width: 768px) {
  .section-one {
    padding: 3rem 1.25rem;
  }

  .payment-icon-stack {
    gap: 2rem;
  }
}

/* Desktop – match original spacing/look */
@media (min-width: 1024px) {
  .section-one {
    padding: 4rem 1.5rem;      /* same as your previous desktop rule */
  }

  .section-one .section-tab {
    margin-bottom: 2rem;       /* same as before */
  }
}

/* Description paragraph under each flow */
.flow-description {
    width: 100%;
    max-width: none;
    margin: 0.5rem 0 1.0rem 0;   /* space above & below each description */
    padding: 0 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink, #434343);
    text-align: left;
    font-family: "Roboto";
    
}

/* Mobile-first: keep paragraphs full width */
@media (min-width: 768px) {
    .flow-description {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .flow-description {
        max-width: none;  /* matches your flow box width */
    }
}

/* Same card base as before */
.xp-section {
  background: #f2efe5;
  border-radius: 14px;
  padding: 2rem 2.5rem;
  margin: 2rem 0;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}

/* Blob layout container */
.xp-blob-layout {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Blob image container */
.xp-blob-image {
  position: relative;
  /*width: 40%;
  max-width: 260px;*/
  width: 260px;         /* or any fixed width */
  aspect-ratio: 1 / 1.3;  /* choose a consistent oval ratio */
  margin: 0;
}

/* Colored background blob */
.xp-blob-bg {
  position: absolute;
  inset: 0;
  background: rgba(75, 163, 173, 0.18); /* #4BA3AD with transparency */
  border-radius: 55% 45% 60% 40%;
  transform: translate(-8%, 8%) rotate(-4deg);
  z-index: 1;
}

/* Actual photo inside blob */
.xp-blob-image img {
  position: relative;
  width: 100%;
  /*height: auto;*/
  height: 100%;
  border-radius: 50% 40% 55% 45%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  object-fit: fill;
  display: block;
  z-index: 2;
}

/* Text block */
.xp-blob-text h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.xp-blob-text p {
  margin: 0 0 0.9rem 0;
}

/* Responsive */
@media (max-width: 768px) {
  .xp-section {
    padding: 1.5rem 1.25rem;
  }

  .xp-blob-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .xp-blob-image {
    width: min(40vw, 260px);

  }

  .xp-blob-text h2 {
    font-size: 1.2rem;
  }
}