/*
  File:      about.css
  Author:    Arthur L. Farnsworth
  Purpose:   Cascading stylesheet for Nancy's Liv-N-Rejuvenate site's About Us page
  Created:   29 Sep 2026  From livnrejuvenate.css by splitting off page-specific code
  Revisions: 
  Comments:  Like on the Home page, the default (mobile-first) view is a column-based flexbox container
*/
  #idAUPContentContainer {    /* The parent container */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;          /* EXPERIMENT WITH NOWRAP */
  }
  #idAUPItem1 {               /* Item 1 is the Nancy head shot, name, and credentials */
    align-items: center;      /* Center on cross axis (row) */
    border: none;             /* No border in mobile version */
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    text-align: center;       /* Horizontally center the below-image text */
    width: auto;              /* Auto is default value (browser calculates width) */
  }
  #idAUPItem1 IMG {           /* NCL head shot */
    background-color: yellow;
    border: 4px solid black;  /* Create a "picture frame" */
    padding: 4px;
  }
  #idAUPItem2 {               /* Item 2 is the core values material */
    border: none;
    display: flex;
    flex-direction: column;
    margin-top: 2em;
    width: 90%;
  }
  #idAUPItem3 {               /* Item 3 is the testimonial video */
    display: flex;
    flex-direction: column;   /* Added 9/19/2026 */
    margin-top: 1em;          /*8/22  was 50px;*/
/*    place-items: center;      /* Horizontally center the video */
    /*text-align: center;*/
  }
  #idAUPItem3 VIDEO {
    display: flex;
    margin-left: 2%;
    margin-right: 2%;
    place-items: center;      /* Horizontally center the video */
    width: 96%;
  }
  #idAUPItem4 {               /* Item 4 is the photo gallery */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;          /* 8/24 was nowrap.  No visible change. */
    justify-content: center;  /* Horizontal axis */
    margin-left: 1em;
    row-gap: 1em;
  }
  #idAUPItem4Title {
    border: 1px solid black;
    font-size: 150%;
    font-weight: bold;
    margin: 2em 5%;            /* T&B, L&R */
    padding: 3px 0px;           /* T&B L&R */
    padding: 1em 0em;             /* T&B, L&R */
    text-align: center;
    width: 90%;
  }
  .clsAUPPhotoGalleryPhotos {   /* Specifics for the photos */
    background-color: yellow;
    border: 4px solid black;    /* Create a "picture frame" */
    display: flex;
    max-width: 92%;             /* 8/24 addition */
    padding: 0.25em;
/*    width: 66%;                 /* 8/22 was 15% */
  }
  MAIN H1 {                     /* For the "Our core values" title box */
    border: 1px solid black;
    font-size: 150%;
    font-weight: bold;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 1em;
    padding: 1em 0em;             /* T&B, L&R */
    text-align: center;
    width: 100%;
  }
@media screen and (min-width:760px) {
  #idAUPContentContainer {            /* The parent container on larger screens is a grid which encloses all the main content */
    column-gap: 1em;
    display: grid;                    /* inline-block */
    grid-template-columns: 25% 75%;   /* 8/22 changed from 50/50 */
    height: 40%;                      /* Experiment with optimal height */
    margin-left: 0px;
    margin-top: 0em;                  /* Space down from the NAV section */
    width: 100%;
  }
  #idAUPItem1 {               /* Item 1 is the Nancy head shot, name, and credentials */
    border-style: none;
    border: thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;     /* Image starts on row 1 and spans 1 row */
    margin-left: 1em;
    margin-top: 3em;
    place-items: center;      /* Horizontally center the image */
    text-align: center;       /* Horizontally center the below-image text */
    width: auto;              /* Auto is default value (browser calculates width) */
  }
  #idAUPItem1 IMG {           /* NCL head shot */
    background-color: yellow;
    border: 4px solid black;  /* Create a "picture frame" */
    padding: 4px;
  }
  #idAUPItem2 {               /* Item 2 is the core values material */
    border: thin solid black; /* Set up all four borders here */
    /*border-style: none;*/
    display: grid;            /* Child element of parent grid container */
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;     /* Image starts on row 1 and spans 1 row */
    margin-top: 3em;
    width: 90%;               /* Auto is default value (browser calculates width) */
  }
  #idAUPItem3 {               /* Item 3 is the testimonial video */
    display: grid;
    grid-column: 1 / span 2;  /* 8/22 */
    margin-top: 50px;
    place-items: center;      /* Horizontally center the video */
    text-align: center;
  }
  #idAUPItem3 VIDEO {
    display: grid;
    width: 90%;
  }
  #idAUPItem4 {               /* Item 4 is the photo gallery */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
/*    justify-content: center;  /* Horizontal axis */
    justify-content: space-evenly;
    margin-left: 1em;
  }
  #idAUPItem4Title {
    border: 1px solid black;
    font-size: 150%;
    font-weight: bold;
    margin: 5% 5%;            /* T&B, L&R */
    padding: 1em 0em;         /* T&B L&R */
    text-align: center;
    width: 90%;
  }
  .clsAUPPhotoGalleryPhotos {   /* Specifics for the photos */
    background-color: yellow;
    border: 4px solid black;    /* Create a "picture frame" */
    display: flex;
    padding: 0.25em;
    width: 66%;                 /* 8/22 was 15% */
  }
  MAIN H1 {                     /* For the "Our core values" title box */
    border: 1px solid black;
    font-size: 150%;
    font-weight: bold;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 1em;
    padding: 1em 0em;             /* T&B, L&R */
    text-align: center;
    width: 90%;
  }
}