/* ======================== */
/*  TUTORING PAGE OVERRIDES */
/* ======================== */

.tutoring-intro-text
{
    padding: var(--default-element-spacing); /* Put padding on all sides as is the "default" style... */
    padding-bottom: 0px; /* But override bottom as next element will already provide adequate spacing. */
}

.tutoring-staff-member 
{
    display: flex; /* Switch to "flexible layout manager" mode. */
    flex-direction: column; /* Container elements will be kept in a column. */
    padding: var(--default-element-spacing);     
    padding-right: 0px; /* Remove/Override padding on the right side as its parent provides. Keep additional left "indent" for desired style. */
}

.tutoring-staff-member__row-of-columns
{
    display: flex; /* Switch to "flexible layout manager" mode. */
    flex-direction: row; /* Container elements will be kept in a row. */
    width: 100%; /* Take up all width space of parent. */
}

.tutoring-staff-member__photo-rate-book-column
{
    display: flex; /* Switch to "flexible layout manager" mode. */
    flex-direction: column; /* Container elements will be kept in a column. */
    justify-content: flex-start; /* "Top justify" (main axis). */
    align-items: center;     /* Centers horizontally (cross axis). */
    margin: var(--default-element-spacing);
}

.tutoring-staff-member__bio-column
{
    display: flex; /* Switch to "flexible layout manager" mode. */
    flex-direction: column; /* Container elements will be kept in a column. */
    margin: var(--default-element-spacing);
}

.tutoring-staff-member__photo
{
    width: 200px; /* Fixed width. */
    height: 300px; /* Fixed height. */
    object-fit: cover; /* Crop & center to fill the frame, preserving aspect ratio. */
    object-position: center; /* Center the crop on the center of the image. */
    border: 1px solid var(--color-black); 
}

/* ================================ */
/*  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: 767px) /* One px below the 768px iPad Mini / tablet standard — phones get mobile, tablets & up keep desktop. */
{
  .tutoring-staff-member__row-of-columns
  {
    flex-direction: column; /* On small screens, switch to stack the bio. columns vertically. */
  }
}