/* ===================================== */
/*  REUSEABLE COMPONENT/ELEMENT STYLING  */
/* ===================================== */

/*  ---------- TITLE & TEXT STYLES ---------- */
.title
{
    font-family: var(--font-base);
    color: var(--color-accent-orange);
    font-size: var(--font-size-title);
    font-weight: bold;
    text-decoration: none;
    font-style: normal;
    margin-top: var(--space-none);
    margin-bottom: var(--space-none);
    margin-left: var(--space-none);
}

.subtitle
{
    font-family: var(--font-base);
    color: var(--font-color);
    font-size: var(--font-size-subtitle); 
    font-weight:bold;  
    text-decoration: none;
    font-style: italic;
    margin-top: var(--space-none);
    margin-bottom: var(--space-s);    
}

.subtitle--orange
{
    font-family: var(--font-base);
    color: var(--color-accent-orange);
    font-size: var(--font-size-subtitle); 
    font-weight:bold;  
    text-decoration: none;
    font-style: italic;
    margin-top: var(--space-none);
    margin-bottom: var(--space-s);    
}

.section-heading
{
    font-family: var(--font-base);
    color: var(--font-color);
    font-size: var(--font-size-section-heading);
    font-weight:bold;  
    text-decoration: none;
    font-style: italic;
    margin-top: var(--space-none);
    margin-bottom: var(--space-none);
}

.section-heading--orange
{
    font-family: var(--font-base);
    color: var(--color-accent-orange);
    font-size: var(--font-size-section-heading);
    font-weight:bold;  
    text-decoration: none;
    font-style: italic;
    margin-top: var(--space-none);
    margin-bottom: var(--space-none);
}

/* Paragraph styling is in BASE.CSS */

/*  ---------- LAYOUT HELPERS ---------- */
.page-title-area
{
    margin-top: var(--default-element-spacing); /* Add a bit of space between the header area. */
    margin-left: var(--default-element-spacing); /* Indent the "page title", <h1> area. */
}

/*  ---------- TESTIMONIAL ELEMENTS/CARDS ---------- */
.testimonial-card--left
{
  display: flex; /* Switch to "flexible layout manager" mode. */
  flex-direction: row; /* Photo on the left (i.e. default row ordering). */
  width: 100%;
}

.testimonial-card--right
{
  display: flex; /* Switch to "flexible layout manager" mode. */
  flex-direction: row-reverse; /* Photo on the right (i.e. the reverse order of default row ordering). */
  width: 100%;
}

.testimonial-card__photo-area 
{
  display: flex; /* Switch to "flexible layout manager" mode. */  
  background-color: var(--color-light-gray);
  justify-content: center; /* Center the content along the "main" axis. */
  align-items: center; /* Center the content along the "2nd" axis. */
}

.testimonial-card__photo 
{
  width: 175px;
  height: 175px;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); /* Creates the hexagon cover shape for the photo. */
  margin: var(--default-element-spacing);
}

.testimonial-card--left .testimonial-card__quote-area 
{
  flex: 1; /* Take up remaining space. */
  margin: var(--space-none); /* No margin so the "separator" bar is flush against photo area. */
  border-left: 2px solid var(--color-accent-orange); /* Add the "separator" bar. */
  padding: var(--default-element-spacing);
}

.testimonial-card--right .testimonial-card__quote-area 
{
  flex: 1; /* Take up remaining space. */
  margin: var(--space-none); /* No margin so the "separator" bar is flush against photo area. */
  border-right: 2px solid var(--color-accent-orange); /* Add the "separator" bar. */
  padding: var(--default-element-spacing);
}

.testimonial-card__subject
{
  /* Style text same as "section-heading". */
  font-family: var(--font-base);
  color: var(--color-accent-orange); /* Altered color. */
  font-size: var(--font-size-section-heading);
  font-weight:bold;  
  text-decoration: none;
  font-style: normal; /* Altered style. */ 

  margin-bottom: var(--space-s); /* Add a bit of space after this subject accent. */
}

.testimonial-card__quote
{
  /* Style text same as <p>. */
  font-family: var(--font-base);
  color: var(--font-color);
  font-size: var(--font-size-paragraph);
  font-weight: normal;
  text-decoration: none;
  font-style: normal;

  margin: var(--space-none); /* No margin as container padding will take care of it. */
}

.testimonial-card__attribution
{
  /* Style text same as "section-heading". */
  font-family: var(--font-base);
  color: var(--font-color);
  font-size: var(--font-size-section-heading);
  font-weight:bold;  
  text-decoration: none;
  font-style: italic; 

  margin: var(--space-none); /* No margin as container padding will take care of it. */
}

/*  ---------- RESOURCE DOWNLOAD LINKS ---------- */

.resources-link
{
    display: inline-block;
    margin-bottom: var(--space-s); /* Same as <p> which should match "default text" size/spacing. */
}

/* ================================ */
/*  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. */
{
  .testimonial-card--left
  {
    flex-direction: column; /* On small screens, switch to stack the testimonial items vertically. */
  }

  .testimonial-card--right
  {
    flex-direction: column; /* On small screens, switch to stack the testimonial items vertically. */
  }
}