/* === Final Master Stylesheet (Files 1, 2, & 3 Combined) === */
*, *::before, *::after { 
    box-sizing: border-box; 
}
body { 
    background-image: linear-gradient(to top right, #6b8792, #81879d, #d8e0e3, #698590, #a7aab9) !important; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* === Video Wrapper Elements === */
.video-wrapper { 
    position: relative; 
    width: 100%; 
    max-width: 450px; 
    aspect-ratio: 16 / 9; 
    background-color: #000000; 
    border-radius: 15px; 
    box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5); 
    transition: box-shadow 0.3s ease; 
    cursor: pointer; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
        /* Styles for the thumbnail image */
.video-wrapper img.thumbnail { 
    position: absolute; 
    opacity: 1.0; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: opacity 0.3s ease;
/*         border: 3px solid transparent;  Prevents layout shifting on hover */
}
/* 1. Base Player Wrapper Styles (Keep your standard gray shadow) */
@media (hover: hover) { 
  /* This targets the wrapper directly only when it is hovered, bypassing the thumbnail completely */ 
        .video-wrapper:hover { 
        box-shadow: 0 4px 12px rgba(255, 255, 255, 1); 
    } 
 /* 2. DESKTOP HOVER: Perfectly safe, isolated white frame shadow */ 
  /* This targets the wrapper directly only when it is hovered, bypassing the thumbnail completely */
    .thumbnail:hover { 
        transform: scale(1.03); 
        filter: brightness(1.1) contrast(1.05); 
    } 
}
     /* Iframe styling to span the exact same box size */
.video-wrapper iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}
/* === Control Elements === set to show thumbnail at beginning*/
#button4play1, #button4play2, #button4play3, #button4play4 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    visibility: visible; 
    pointer-events: auto; 
    cursor: pointer; 
}

#iframe-container1, #iframe-container2, #iframe-container3, #iframe-container4 { 
    visibility: hidden; 
    pointer-events: none; 
}
/* === Button & Layout Styles === */
.lfhmButtons { 
    position: relative; 
    max-width: 400px; 
    height: 45px; 
    line-height: 39px; 
    background-image: linear-gradient(to bottom right, rgba(57,74,68,1), rgba(199,180,103,1)); 
    padding: 0; 
    border: 3px outset #c7b467; 
    margin: 3% auto -16px auto; 
    /* margin-top: -16px; - combined above in one line */
    text-align: center; 
    left: 0; 
    right: 0; 
}
.lfhmButtonsStacked { 
    display: flex; 
    gap: 2px; 
    justify-content: center; 
    max-width: 400px; 
    height: 85px; 
    line-height: 79px; 
    background-image: linear-gradient(to bottom right, rgba(57,74,68,1), rgba(199,180,103,1)); 
    padding: 0; 
    border: 3px outset #c7b467; 
    margin: 3% auto -16px auto;
       /* margin-top: -16px; - combined above in one line */
    text-align: center; 
    left: 0; 
    right: 0; 
}
.buttonlfhm { 
    font-size: 14px; 
    font-weight: bold; 
    color: white; 
    background-color: #006d8f; 
    border: 2px solid #aaaaaa; 
    padding: 6px 12px; 
    border-radius: 6px; 
    margin-top: 2px; 
}
.buttonlfhm:hover { 
    background-color: #777; 
    border: 2px solid white; 
    box-shadow: 0 -12px 16px 0 rgba(255,255,255,0.3), 0 17px 50px 0 rgba(0,0,0,0.3); 
}
.buttonlfhm:focus {
}
button:focus { 
    background-color: #9a5b4f; 
    outline: none; 
    border: 2px solid #c1aba7; 
    box-shadow: -12px -12px 12px 0 rgba(255,255,255,1), 0 17px 50px 0 rgba(0,0,0,0.3); 
}
/* === Containers & Grids === */
.container { 
    display: grid;
/* code below to center the whole page and not stretch it out too much*/    
    width: 100%; 
    max-width: 1400px; /* Optional: prevents it from getting too wide on large screens */
    margin: 0 auto; 
    grid-template-columns: repeat(12, [col-start] 1fr); 
    gap: 5px; 
}
.content { 
    display: flex; 
    flex-direction: column; 
    flex: 0 1 375px; 
    justify-content: flex-start; 
    align-items: center; 
}
/* .desc1 {
  font-size: 16px;
  text-align: justify;
  margin-left: 1px;
  margin-right: 1px;
  align-items: center;
  box-shadow: 8px 8px 11px -2px rgba(123, 125, 127, 0.42)
} */
.head { 
    text-align: center; 
}
.footer { 
    text-align: center; 
    font-size: 13px; 
    color: darkred; 
}
.video-row-flexcontainer-item {
  font-size: 12px;
 text-align: center;
  flex:100%;
}
.video-row-flexcontainer2-item {
  font-size: 12px;
  text-align: center;
  flex: 100%;
}

/* Mobile first */
 .container > * {
  padding: 3px;
  grid-column: col-start / span 12;
}
@media (min-width: 600px) and (orientation: landscape) {
.thumb1 {
    grid-column: col-start / span 4;
    grid-row: 2 /5
  }
  
   .content {
    grid-column: col-start 5 / span 8;
        grid-row: 2 /5
  }
   .desc1 {
    font-size: 10px;
}
   .footer {
    font-size: 10px;
}
}
@media (min-width: 750px) and (orientation: landscape) {
   .footer {
    font-size: 10px;
}
}

@media (min-width: 550px) and (orientation: portrait) {
  .thumb1 {
    grid-column: col-start / span 4;
    grid-row: 2 /5
  }
   .content {
    grid-column: col-start 5 / span 8;
        grid-row: 2 /5
  }
   .desc1 {
   font-size: 12px;
}
}

@media (min-width: 950px) {
.video-row-flexcontainer-item {
  font-size: 15px;
  flex:33%;
}
.video-row-flexcontainer2-item {
  font-size: 15px;
  flex: 15%;
}
}
@media (min-width: 825px) {
  .desc1 {
  text-align: left;
  font-size: 16px;
} 
   .footer {
  font-size: 16px;
}
 .thumb1 {
    grid-column: col-start / span 3;
    grid-row: 2/7
  }
  .content {
    grid-column: col-start 4 / span 6;
    grid-row: 2/7
  }
  .desc1 {
    grid-column: col-start 10 /span 3;
    grid-row: 2 / 7  
  }
  .footer {
    grid-column: col-start / span 12;
    font-size: 16px;
  }
}  

.hideTip { 
    display: none; 
}
/* === Tooltips & Visibility === */
.Tip:hover + .hideTip { 
    display: inline; 
    color: darkred; 
}
#morelfhm { 
    display: none; 
}
.button4more { 
    position: relative; 
    width: 110px; 
    margin: 5% auto; 
    text-align: center; 
    left: 0; 
    right: 0; 
    font-size: 16px; 
    color: white; 
    background-image: linear-gradient(to bottom right, rgba(57,74,68,1), rgba(199,180,103,1)); 
    border-radius: 5px; 
    padding: 4px 8px; 
}
/* === Flex Item Systems === */
.flexcontainerContent { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    align-items: center; 
}
.flexcontainerContent div { 
    align-items: center; 
    margin: 1px; 
    padding: 1px; 
    text-align: center; 
    font-size: 10px; 
}

figure { 
    border: 0 solid lightgray; 
    padding: 0; 
    margin: auto; 
    border-radius: 5px; 
}
figcaption { 
    color: black; 
    padding: 1px; 
    text-align: center; 
}
/* ===gang of 5 pics=== */
.flexcontainertestV { 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: center; 
    align-items: center; 
}
.flexcontainertestV div { 
    align-items: center; 
    margin: 1px; 
    padding: 1px; 
    text-align: center; 
    font-size: 10px; 
}
.video-row-flexcontainer-item,
.video-row-flexcontainer2-item {
  font-size: 12px;
 text-align: center;
  flex:100%;
}
.twofonts { 
    font-size: 12px; 
}
/* === DIVERGENT RULE HANDLERS === */

/* Default description padding for Sections 1 & 2 */
.desc1 { 
    font-size: 16px; 
    text-align: justify; 
    margin-left: 5px; 
    margin-right: 5px; 
    box-shadow: 8px 8px 11px -2px rgba(123, 125, 127, 0.42); 
}

/* Section 3 specific padding modification via CSS parent mapping */
.section3-variant .desc1 { 
    margin-left: 10px; 
    margin-right: 4px; 
}

/* Base flex container item size rule */
.video-row-flexcontainer2-item { 
    font-size: 12px; 
    text-align: center; 
    flex: 100%; 
}

/* Section 3 specific flex layout reduction rule */
.section3-variant .video-row-flexcontainer2-item { 
    font-size: 15px; 
    flex: 15%; 
}
/* https://www.diffchecker.com/HCZoGFYi/ */