/**
 * Flexible image row layouts for portfolio pages
 */

/* ============================================================================
   ROW OF IMAGES - FLEX LAYOUT
   ============================================================================
   
   Flexible image row system for displaying multiple images side by side.
   Supports equal columns, uneven heights, and responsive behavior.
   
   Basic structure:
   <div class="row-of-images-flex-wrapper">
     <div class="row-of-images-flex">
       <a href="large.jpg"><img src="thumb.jpg" alt="" /></a>
       <a href="large.jpg"><img src="thumb.jpg" alt="" /></a>
     </div>
   </div>

   */

/* Base structure */
.row-of-images-flex,
.row-of-images-flex-wrapper {
  box-sizing: border-box;
}

.row-of-images-flex-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.row-of-images-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
}

.row-of-images-flex a img {
  flex-grow: 1;
  width: 100%;
}

/* ============================================================================
   THREE EQUAL COLUMNS (33.33% each)
   ============================================================================
   
   Example:
   <div class="row-of-images-flex-wrapper">
     <div class="row-of-images-flex row-of-three-images" style="max-width: 638px;">
       <a href="image1.jpg"><img src="image1.jpg" alt="" /></a>
       <a href="image2.jpg"><img src="image2.jpg" alt="" /></a>
       <a href="image3.jpg"><img src="image3.jpg" alt="" /></a>
     </div>
   </div>

*/

.row-of-three-images a {
  flex: 1 1 33.33%;
}

/* ============================================================================
   UNEVEN COLUMNS (different image widths)
   ============================================================================
   
   Example:
   <div class="row-of-images-flex-wrapper">
     <div class="row-of-images-flex row-of-images-flex-uneven-columns" style="max-width: 650px;">
       <a href="image1-304x200.jpg"><img src="image1-304x200.jpg" alt="" /></a>
       <a href="image2-304x400.jpg"><img src="image2-304x400.jpg" alt="" /></a>
       <a href="image3-304x400.jpg"><img src="image3-304x400.jpg" alt="" /></a>
     </div>
   </div>

*/

.row-of-images-flex-uneven-columns {
  align-items: stretch;
}

.row-of-images-flex-uneven-columns a {
  display: flex;
  align-items: stretch;
}

.row-of-images-flex-uneven-columns a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================================
   SMALL GAPS VARIANT
   ============================================================================
   
   Adds small gaps between images. 
   
   Use .small-gaps for narrow max-width, .small-gaps-wide for wider.
   
   Example:
   <div class="row-of-images-flex-wrapper">
     <div class="row-of-images-flex small-gaps small-gaps-wide">
       <a href="image1.jpg"><img src="image1.jpg" alt="" /></a>
       <a href="image2.jpg"><img src="image2.jpg" alt="" /></a>
       <a href="image3.jpg"><img src="image3.jpg" alt="" /></a>
       <a href="image4.jpg"><img src="image4.jpg" alt="" /></a>
     </div>
   </div>
*/

/* Mobile: 4px gaps, 92% width */
@media (max-width: 767.98px) {
  .row-of-images-flex-uneven-columns a img {
    width: 96%;
    height: 96%;
  }
  
  .row-of-images-flex.small-gaps {
    gap: 4px;
    max-width: 92%;
  }
  
  .row-of-images-flex.small-gaps-wide {
    max-width: 100%;
  }
}

/* Tablet and up: 8px gaps, fixed max-widths */
@media (min-width: 768px) {
  .row-of-images-flex.small-gaps {
    gap: 8px;
    max-width: 633px;
  }
  
  .row-of-images-flex.small-gaps-wide {
    max-width: 650px;
  }
}


/* Text styles */

p.tt-first-paragraph {
    margin-top: 55px;
}
p.tt-ingress {
    font-size: 19px;
    line-height: 34px;
}
p.tt-primary-text,  p.tt-primary-text-center,
body.single #page .content-area #main article .entry-content p.tt-primary-text,
body.single #page .content-area #main article .entry-content p.tt-primary-text-center {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 1.5rem;
}
p.tt-secondary-text, p.tt-secondary-text-center {
    font-size: 16px;
    line-height: 28px;
}
p.tt-primary-text-center, p.tt-secondary-text-center {
    text-align: center;
}
p.tt-primary-text-h4 {
    font-size: 18px;
}
p.tt-description-below-image {
    margin-top: 3rem;
}
@media (min-width: 768px) {
    p.tt-ingress {
        font-size: 19px;
        line-height: 34px;
    }
}


/* Dark UI Info Box styles */

.tt-dark-ui-info-box {
    border-radius: 20px;
    background: #023C8E;
    padding-left: 10%;
    padding-right: 10%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.tt-dark-ui-info-box h5 {
    color: #FFF;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    width: 100%;
}

.tt-dark-ui-info-box .tt-secondary-text-center {
    color: #FFF;
    text-align: center;
}

body.single #page .content-area #main article .tt-dark-ui-info-box p.tt-secondary-text-center {
    margin: 0px;
}

@media (max-width: 767.98px) {
    .tt-dark-ui-info-box {
        margin-top: 2rem;
    }
}

@media (max-width: 1199.98px) {
    body.single #page .content-area #main article .tt-dark-ui-info-box h5 {
        margin-top: 3rem;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body.single #page .content-area #main article .tt-dark-ui-info-box h5 {
        margin-top: 3rem;
    }
}