/* HOME PAGE*/
/* Adapt Homepage cover and heading to Mobile Screen (Screens under 768px) */
@media (max-width: 768px) {

	/* Add some padding to menu */
	.wp-block-navigation__responsive-container-content {
		padding-left: 30px !important;
		padding-right: 30px !important;
		align-items: flex-start !important;
	}
	
	.wp-block-navigation__responsive-container-content .wp-block-margin-bottom: 15px !important;
	
  /* 1. Scale down the Cover background */
  .wp-block-cover.alignfull {
    min-height: 50vh !important; /* Reduces full-screen 100vh height to half on mobile */
  }

  /* 2. Fix text overflow */
  .wp-block-cover__inner-container p {
    font-size: 1.8rem !important; /* Shrinks the 3.5rem desktop size */
    padding-left: 15px !important;  /* Reduces wide desktop padding */
    padding-right: 15px !important;
    word-wrap: break-word !important; /* Prevents long words from going off screen */
    overflow-wrap: anywhere !important;
    text-align: center;
  }

  /* 3. Adjust the background image scaling */
  .wp-block-cover__image-background {
    object-fit: cover;
    object-position: center center; /* Keeps the main artwork centered */
  }
}

/* Yeah sorry I ceebs to combine */

/* Don’t forget to label the images with the correct class!!!*/

/* --- COMMITTEE PAGE --- */

/* 1. Force row container to STAY a row on mobile */
.profile-container, 
.profile-container > .wp-block-buttons, 
.profile-container > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: row !important; /* Force side-by-side */
    flex-wrap: nowrap !important;   /* Prevent wrapping to new lines */
    justify-content: left !important;
    align-items: flex-start !important;
    gap: 10px !important;           /* Space between da members */
}

/* 2. Individual member blocks */
.profile-container > * {
    flex: 1 1 auto !important;      /* Allow items to shrink to fit */
    text-align: left !important;
    min-width: 0;                   /* Crucial: allows flex items to shrink below content size */
}

/* 3. Profile Image Resizing */
.profile-container img {
    border-radius: 50%;
    transition: width 0.3s ease;
    height: auto !important;
    display: block;
	margin: 0 0 10px 0;
        /* Align image to left above text */
}

/* Desktop sizing */
@media (min-width: 601px) {
    .profile-container img {
        width: 300px; 
    }
    .profile-container p {
        font-size: 18px !important;
    }
}

/* Mobile sizing */
@media (max-width: 600px) {
    .profile-container img {
        width: 90% !important;
    }
    /* Text inside the row */
    .profile-container p, 
    .profile-container span,
    .profile-container .wp-block-paragraph { 
        font-size: 5px !important; /* Forces smaller text */
        line-height: 1.2 !important;
        margin: 0 !important;
    }
}