/* Cutout text */

/* Web development flips */

.image-container-jira {
  background-image: url("../images/jiraTimelineDark.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* mact height */
}

.text {
  font-size: 3vw;
  font-weight: bold;
  background-color: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: white;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
    0px  2px 0 #000,
    2px  0px 0 #000,
    0px -2px 0 #000,
   -2px  0px 0 #000;  /* black outline effect */
  background-clip: text;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.image-container-erd {
  background-image: url("../images/dec3erd1.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

/* Black box with transparent cutout letters */
.text-erd {
  font-size: 3vw;
  font-weight: bold;
  background-color: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: black; /* The color of the text */
  background-clip: text;
  color: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.image-container-validation {
  background-image: url("../images/webFormValid.png"); /* The image used - important! */
  background-size: cover;
  background-position: 25% center;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

/* mobile page flips */

.image-container-alamo {
  background-image: url("../images/ChazAIAlamo.jpg"); /* The image used - important! */
  background-size: cover;
  background-position: 40% center;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-mvc {
  background-image: url("../images/UML5_20_2024.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-sqlite {
  background-image: url("../images/sqlNotes.png"); /* The image used - important! */
  background-size: cover;
  background-position: 100% center;	
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

/* data science page flips */

.image-container-revinue {
  background-image: url("../images/ScreenshotTrends.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-counterfeit {
  background-image: url("../images/counterfeitAssignment.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-prediction {
  background-image: url("../images/regressionModel.png"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

/* Mechanical engineering page flips */

.image-container-autocad {
  background-image: url("../images/Electric Guitar Top.JPG"); /* The image used - important! */
  background-size: cover;
  background-position: 50% center;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-excel {
  background-image: url("../images/waterTower1.jpg"); /* The image used - important! */
  background-size: cover;
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-arduino {
  background-image: url("../images/20240306_024207.jpg"); /* The image used - important! */
  background-size: cover;
  	
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-realestatestats {
  background-image: url("../images/dsHomesAverage.png"); /* The image used - important! */
  background-size: cover;
  	
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-cyber1 {
  background-image: url("../images/VimFunctions.png"); /* The image used - important! */
  background-size: cover;
  	
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-cyber2 {
  background-image: url("../images/owaspZapAdminAdmin.png"); /* The image used - important! */
  background-size: cover;
  	
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

.image-container-cyber3 {
  background-image: url("../images/portfolioValidation.png"); /* The image used - important! */
  background-size: cover;
  	
  position: relative; /* Needed to position the cutout text in the middle of the image */
  height: 346px; /* match height */
}

/* =========================================================
   Responsive flip cards
   - 768px and wider: three cards side by side (col-sm-4),
     each card shrinks to fit its column (max 459px).
   - Under 768px: one swipeable row with a peek of the next card.
   - Mouse: flips on hover. Touch: flips on tap (assets/js/flip.js).
   ========================================================= */

.flip-card {
  width: 100%;
  max-width: 459px;
  margin: 0 auto 30px;
  cursor: pointer;
}

.flip-card:focus-visible {
  outline: 3px solid #50CC16;
  outline-offset: 4px;
}

/* Front titles: wrap across the card, never shrink below 20px */
.flip-card-front .text,
.flip-card-front .text-econ,
.flip-card-front .text-erd {
  width: 90%;
  font-size: clamp(20px, 3vw, 44px);
  line-height: 1.15;
}

/* Back side: long text scrolls instead of being cut off */
.flip-card-back {
  overflow-y: auto;
  padding: 0 12px 12px;
}

/* Touch screens have no hover: flip only on tap */
@media (hover: none) {
  .flip-card:hover .flip-card-inner {
    transform: none;
  }
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Narrower than a laptop: tighten the back-side text so it fits */
@media (max-width: 1199px) {
  .flip-card-back h1 {
    font-size: 22px;
    margin: 14px 0 6px;
  }
  .flip-card-back h2 {
    font-size: 18px;
    margin: 0 0 6px;
  }
  .flip-card-back p {
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
  }
}

/* Phones (and the folded screen): swipeable row */
@media (max-width: 767px) {
  .flip-row {
    display: flex;
    gap: 16px;
    /* full screen width, even inside padded sections */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 16px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }
  .flip-row::before,
  .flip-row::after,
  .flip-row > br {
    display: none;
  }
  .flip-row > [class*="col-"] {
    flex: 0 0 82vw;
    max-width: 380px;
    float: none;
    padding: 0;
    scroll-snap-align: center;
  }
  .flip-row .flip-card {
    margin-bottom: 0;
  }
}