.layout-cards-ams {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;                 /* allow rows to wrap on small screens */

    margin-left: 6rem;
    margin-right: 1rem;
    width: auto;          /* let it be natural */

    max-width: 100%;            /* never exceed viewport width */
    box-sizing: border-box;
    overflow-x: clip;
}

.layout-cards-ams > * {
    min-width: 0 !important;    /* critical: allow children to shrink */
    flex: 1 1 100%;             /* make each row block take full line by default */
}

.ams-flex-group,
.ams-flex-group-transparent {
    margin: .5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;                 /* your spacing */
    padding: 1.2rem;
    box-sizing: border-box;

    /* Let the inner group fit inside the card */
    width: 100%;
    max-width: 100%;
    min-width: 0;                /* allow inner content to shrink */
}

/* If you want the "white card look" only on .ams-flex-group (not the transparent) */
.ams-flex-group {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.ams-flex-group .ams-flex-element,
.ams-flex-group-transparent .ams-flex-element {
    flex: 1 1 0 !important;  /* equal widths across a row */
    min-width: 250px;        /* prevents too-narrow columns */
    max-width: 100%;
    box-sizing: border-box;
    text-align: center !important;
    min-height: 0;
}

.ams-flex-group-transparent .ams-flex-element-small {
    flex: 1 1 0 !important;  /* equal widths across a row */
    min-width: 100px;        /* prevents too-narrow columns */
    max-width: 100%;
    box-sizing: border-box;
    text-align: center !important;
    min-height: 0;
}

@media (max-width: 900px) {
    .ams-flex-group {
        flex-direction: column;           /* stack cards vertically */
        align-items: stretch;
    }
}

.layout-cards-ams .card-ams {
    background-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 1.2rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
                0 8px 20px rgba(0, 0, 0, 0.06) !important;
    margin: .5rem;
    max-width: 100%;
    /* width: 100%; */          /* PE PROBLEME POUR AUTRES */
    box-sizing: border-box;
    min-width: 0;               /* critical to enable shrinking of inner content */
}

.layout-cards-ams .card-ams-transparent {
    background-color: none;
    /* padding: 1.2rem !important; */
    margin: .5rem;

    max-width: 100%;
    /* width: 100%; */
    box-sizing: border-box;
    min-width: 0;               /* critical to enable shrinking of inner content */
}

.layout-cards-ams .layout-ams-left-column,
.layout-cards-ams .layout-ams-right-column {
    flex: 1 1 300px;   /* baseline width, but can shrink and wrap */
    min-width: 280px;  /* ensure they don't collapse too small */
    box-sizing: border-box;
}

.layout-cards-ams .card-ams,
.layout-cards-ams .card-ams *,
.layout-cards-ams .card-ams-transparent,
.layout-cards-ams .card-ams-transparent *
 {
    word-wrap: break-word;
    overflow-wrap: anywhere;  /* modern browsers */
}

/* === RESPONSIVE STACKING === */
/* When screen width is below 900px (adjust as needed) */
@media (max-width: 900px) {
    .layout-cards-ams {
        flex-direction: column; /* stack vertically */
    }
    .layout-cards-ams .layout-ams-left-column,
    .layout-cards-ams .layout-ams-right-column {
        flex: 1 1 100%;   /* full-width, stacked */
    }
}

.layout-ams-menstruation-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  margin-top: 25px;
  justify-content: center;
}

.sub-card-ams {
    padding: 16px 18px;
    border-radius: 6px;
    background-color: #F8F9FA;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* --- Card Title --- */
.athlete-profile-card-title {
    /* font-weight: bold !important; */
    font-size: 20px !important;
    margin: 0 !important;
    position: relative !important;
    display: inline-block !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.athlete-profile-card-title::before {
    content: "" !important;
    display: block !important;
    width: 60px !important;
    height: 4px !important;
    background-color: var(--ffbad-red) !important;
    border-radius: 2px !important;
    margin-bottom: 6px !important;
}

/* ============================================================
   NEW — Proportional column wrappers inside a .card-ams
   ------------------------------------------------------------
   Usage: place two (or more) of these as direct children of a
   .card-ams to get a responsive proportional split, e.g.:

       <div class="card-ams">
           <div class="ams-flex-group-30percent" id="A"> … </div>
           <div class="ams-flex-group-70percent" id="B"> … </div>
       </div>

   The card itself must be a flex row container — add
   "ams-flex-row-card" to the card if you need to override the
   default block behaviour (see helper below).

   On screens ≤ 900 px the columns stack vertically.
   ============================================================ */

/* Make a card-ams lay out its direct children as a flex row.
   Add this class alongside card-ams whenever you put percent
   columns inside it.
   NOTE: no flex-wrap here — stacking is handled exclusively by
   the @media query on the percent columns so columns never
   accidentally wrap on wide screens. */
.ams-flex-row-card {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;         /* stay side-by-side until the breakpoint */
    align-items: stretch;
    gap: 0.75rem;
    box-sizing: border-box;
}

/* Shared base for all ams-flex-group-XXpercent */
[class^="ams-flex-group-"][class$="percent"],
[class*=" ams-flex-group-"][class$="percent"] {
    display: flex;
    flex-direction: column;    /* column wrapper: its children stack vertically
                                  unless overridden by ams-flex-content-row */
    gap: 0.75rem;
    box-sizing: border-box;
    min-width: 0;              /* CRITICAL — allows flex children to shrink */
    max-width: 100%;
    justify-content: flex-end;   /* pack everything at bottom */
}

/* Proportional flex-basis values — tweak freely */
.ams-flex-group-20percent { flex: 0 1 20%; }
.ams-flex-group-25percent { flex: 0 1 25%; }
.ams-flex-group-30percent { flex: 0 1 30%; }
.ams-flex-group-33percent { flex: 0 1 33%; }
.ams-flex-group-40percent { flex: 0 1 40%; }
.ams-flex-group-50percent { flex: 0 1 50%; }
.ams-flex-group-60percent { flex: 0 1 60%; }
.ams-flex-group-66percent { flex: 0 1 66%; }
.ams-flex-group-70percent { flex: 0 1 70%; }
.ams-flex-group-75percent { flex: 0 1 75%; }
.ams-flex-group-80percent { flex: 0 1 80%; }
.ams-flex-group-90percent { flex: 0 1 90%; }
.ams-flex-group-100percent { flex: 0 1 100%; }

/* Stack all percent columns on narrow screens */
@media (max-width: 900px) {
    [class^="ams-flex-group-"][class$="percent"],
    [class*=" ams-flex-group-"][class$="percent"] {
        flex: 1 1 100%;        /* full width, stacked */
    }
    
    /* Also switch the row card to column so children stack cleanly */
    .ams-flex-row-card {
        flex-direction: column;
    }
}

@media (max-width: 1350) {
    .ams-flex-group-20percent,
    .ams-flex-group-25percent,
    .ams-flex-group-33percent {
        flex: 1 1 100%;
    }

    /* Also switch the row card to column so children stack cleanly */
    .ams-flex-row-card {
        flex-direction: column;
    }
}


/* ============================================================
   NEW — Inner content layout helpers
   ------------------------------------------------------------
   Use these *inside* an ams-flex-group-XXpercent (or any
   flex-column container) to control how the direct children
   are arranged.

   ams-flex-content-row     → children side-by-side (equal widths)
   ams-flex-content-columns → children stacked vertically
   ============================================================ */

/* ROW: direct children share available width equally and wrap
   when the container is too narrow. */
.ams-flex-content-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
}

.ams-flex-content-row > * {
    flex: 1 1 0;           /* equal widths */
    min-width: 120px;      /* avoid micro-columns; tune per use-case */
    max-width: 100%;
    box-sizing: border-box;
}

/* Stack the row's children on very small screens */
@media (max-width: 700px) {
    .ams-flex-content-row {
        flex-direction: column;
    }
    .ams-flex-content-row > * {
        min-width: 0;
        width: 100%;
    }
}

/* COLUMNS: direct children stacked vertically, each filling
   full width.  Heights follow content unless you set an explicit
   height on the parent and add flex: 1 to the children. */
.ams-flex-content-columns {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    justify-content: flex-end;   /* pack everything at bottom */
}

.ams-flex-content-columns > * {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

/* Centers all children horizontally and aligns them to center */
.ams-flex-content-column-centered {
    display: flex;
    flex-direction: column;
    align-items: center;        /* centers children horizontally */
    justify-content: flex-start;
    gap: 0.75rem;
    min-width: 0;
    box-sizing: border-box;
    width: 100%;
    text-align: center;         /* centers inline text elements */
}

.ams-flex-content-column-centered > * {
    width: 100%;
    max-width: 600px;           /* optional: cap width so it doesn't stretch too wide on large screens */
    box-sizing: border-box;
    min-width: 0;
}