/* ======================= */
/*  CLASSES PAGE OVERRIDES */
/* ======================= */
.classes-intro-section
{
   padding: var(--default-element-spacing);
   padding-bottom: 0px; /* Remove bottom padding as the trailing <p> provides enough. */
}

.classes-classes-section
{
   padding: var(--default-element-spacing);
   padding-right: 0px; /* Remove/Override padding on the right side as its parent already provides enough. Keep additional left "indent" for desired style. */
}

.classes-class
{
   padding: var(--default-element-spacing);
}

.classes-class__description
{
   padding-left: var(--default-element-spacing); /* "Indent" a bit to show hierarchy. */
}

.classes-class__at-a-glance
{
   padding-left: var(--default-element-spacing); /* "Indent" a bit to show hierarchy. */
}

.classes-class__information-and-policies
{
   padding-left: var(--default-element-spacing); /* "Indent" a bit to show hierarchy. */
}

.classes-class__offering-options
{
   padding-left: var(--default-element-spacing); /* "Indent" a bit to show hierarchy. */
}

.classes-class__class-card-container
{
   display: flex; /* Switch to "flexible layout manager" mode. */
   flex-direction: row; /* Container elements will be kept in a row. */
   padding-right: var(--default-element-spacing); /* Keep the "default look" spacing on the right to avoid edge of browser window. */
   gap: var(--space-xs);
}

.classes-class__upcoming-class-survey
{
   padding: var(--default-element-spacing);
   padding-right: var(--space-none); /* Remove right padding as parent already provides enough. */
}

.classes-class__class-card
{  
   flex: 1; /* Grow each card to take up all available width, evenly. */
   display: flex;              /* Switch to "flexible layout manager" mode. */
   flex-direction: column;     /* Stack contents vertically. */
   justify-content: center;    /* Vertical centering (main axis, since column). */
   align-items: center;        /* Horizontal centering (cross axis). */
   text-align: center;   /* Centers the text (not left justified now) and will also apply to wrapped lines/text. */
   background-color: var(--color-light-gray);
   padding: var(--space-xs);
   /* Horizontal margin added by parent "gap" setting. */
   margin-top: var(--space-xs);   
   margin-bottom: var(--space-xs);   
}

/* ================================ */
/*  SMALL-SCREEN / MOBILE OVERRIDES */
/* ================================ */
/* Everything below adjusts this page's layout for small screens (phones).
   Desktop styling above remains the default; these rules only apply when triggered. */

@media (max-width: 1000px) /* Class cards get crammed below this level, early adjust. */
{
  .classes-class__class-card-container
   {
      flex-direction: column; /* On small screens, switch to stack the class cards vertically. */
   }
}

@media (max-width: 767px) /* One px below the 768px iPad Mini / tablet standard — phones get mobile, tablets & up keep desktop. */
{
   
}