/*
Theme Name: LZR
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: Bishal
Author URI: https://devbishal.netlify.app/
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 5.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lzr
*/

html,
body {
  margin: 0;
  padding: 0;
}

.block-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  .trigger-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 288px;
    height: 288px;
    font-family: "IBM Plex Serif", monospace, sans-serif;
    font-size: 48px;
    line-height: 63px;
    font-style: italic;
    flex: 1 0 288px;
    cursor: pointer;
    border: 1px solid #afafaf;
    position: relative;
    overflow: hidden;
  }
  .trigger-block .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: inherit; /* Use the block's background color */
    z-index: 1;
    transition: opacity 0.3s ease; /* Add smooth transition for the hover effect */
  }

  .trigger-block .block-title {
    opacity: 0; /* Initially hide the title */
    transition: opacity 0.3s ease; /* Smooth transition on hover */
  }

  .trigger-block:hover .overlay {
    opacity: 0; /* Fade out the overlay on hover */
  }

  .trigger-block:hover .block-title {
    opacity: 1; /* Show the title when hovering */
  }
}

.modal {
  .block-description {
    font-family: "Unbounded", sans-serif;
    font-size: 16px;
    line-height: 24px;
  }
}

.blocker {
  z-index: 99 !important;
  background-color: rgb(0 0 0 / 89%) !important;
}

@media screen and (max-width: 600px) {
  .block-container {
    .trigger-block {
      flex: 1 0 31%;
      height: 180px !important;
      .block-title {
        h4 {
          margin: 0;
          font-size: 20px;
          line-height: 24px;
        }
      }
    }

    .trigger-block .overlay {
      height: 180px;
    }
  }
}

@media screen and (min-width: 1920px) {
  .block-container {
    .trigger-block {
      flex: 1 0 19%;
    }
  }
}