/**
 * @file
 * BGGTS Corner Decorative Elements CSS
 * Independent, single-class styling for corner graphics.
 * Located in: themes/bggts/images/corners/
 */

/* ==========================================================================
   SINGLE-CLASS CORNERS
   Just add ONE class to your element:
     class="top-right"
     class="top-left"
     class="bottom-right"
     class="bottom-left"
   ========================================================================== */

/* 1. Base Setup: Position context & text layering */
.top-right,
.top-left,
.bottom-right,
.bottom-left {
  position: relative;
}

/* Ensure ALL text, headings, cards, and buttons inside sit visibly ABOVE the corner image */
.top-right > *,
.top-left > *,
.bottom-right > *,
.bottom-left > * {
  position: relative;
  z-index: 2;
}

/* 2. Top-Right Corner (Container usage via ::before) */
.top-right::before {
  content: "";
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 280px !important;
  height: 280px !important;
  max-width: 35vw !important;
  max-height: 35vw !important;
  background-image: url('/themes/bggts/images/corners/top-right.png'), url('../images/corners/top-right.png');
  background-repeat: no-repeat !important;
  background-position: top right !important;
  background-size: contain !important;
  pointer-events: none !important; /* Clicks and text selection pass right through */
  z-index: 1 !important;
}

/* If .top-right is an empty element used directly, e.g. <div class="top-right"></div> */
.top-right:empty {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 280px !important;
  height: 280px !important;
  max-width: 35vw !important;
  max-height: 35vw !important;
  background-image: url('/themes/bggts/images/corners/top-right.png'), url('../images/corners/top-right.png') !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 3. Top-Left Corner (Container usage via ::before) */
.top-left::before {
  content: "";
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 280px !important;
  height: 280px !important;
  max-width: 35vw !important;
  max-height: 35vw !important;
  background-image: url('/themes/bggts/images/corners/top-left.png'), url('../images/corners/top-left.png');
  background-repeat: no-repeat !important;
  background-position: top left !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* If .top-left is an empty element used directly */
.top-left:empty {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 280px !important;
  height: 280px !important;
  max-width: 35vw !important;
  max-height: 35vw !important;
  background-image: url('/themes/bggts/images/corners/top-left.png'), url('../images/corners/top-left.png') !important;
  background-repeat: no-repeat !important;
  background-position: top left !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 4. Bottom-Right Corner (Container usage via ::after) */
.bottom-right::after {
  content: "";
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 280px !important;
  height: 380px !important;
  max-width: 35vw !important;
  max-height: 48vw !important;
  background-image: url('/themes/bggts/images/corners/bottom-right.png'), url('../images/corners/bottom-right.png');
  background-repeat: no-repeat !important;
  background-position: bottom right !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* If .bottom-right is an empty element used directly */
.bottom-right:empty {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 280px !important;
  height: 380px !important;
  max-width: 35vw !important;
  max-height: 48vw !important;
  background-image: url('/themes/bggts/images/corners/bottom-right.png'), url('../images/corners/bottom-right.png') !important;
  background-repeat: no-repeat !important;
  background-position: bottom right !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 5. Bottom-Left Corner (Container usage via ::after) */
.bottom-left::after {
  content: "";
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 280px !important;
  height: 380px !important;
  max-width: 35vw !important;
  max-height: 48vw !important;
  background-image: url('/themes/bggts/images/corners/bottom-left.png'), url('../images/corners/bottom-left.png');
  background-repeat: no-repeat !important;
  background-position: bottom left !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* If .bottom-left is an empty element used directly */
.bottom-left:empty {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 280px !important;
  height: 380px !important;
  max-width: 35vw !important;
  max-height: 48vw !important;
  background-image: url('/themes/bggts/images/corners/bottom-left.png'), url('../images/corners/bottom-left.png') !important;
  background-repeat: no-repeat !important;
  background-position: bottom left !important;
  background-size: contain !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Direct <img> elements */
img.top-right,
img.top-left,
img.bottom-right,
img.bottom-left {
  position: absolute !important;
  width: 280px !important;
  height: auto !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
img.top-right { top: 0 !important; right: 0 !important; }
img.top-left { top: 0 !important; left: 0 !important; }
img.bottom-right { bottom: 0 !important; right: 0 !important; }
img.bottom-left { bottom: 0 !important; left: 0 !important; }

/* ==========================================================================
   RESPONSIVE MOBILE SCALING
   ========================================================================== */

@media (max-width: 991px) {
  .top-right::before,
  .top-right:empty,
  .top-left::before,
  .top-left:empty,
  img.top-right,
  img.top-left {
    width: 200px !important;
    height: 200px !important;
    opacity: 0.85;
  }
  .bottom-right::after,
  .bottom-right:empty,
  .bottom-left::after,
  .bottom-left:empty,
  img.bottom-right,
  img.bottom-left {
    width: 200px !important;
    height: 270px !important;
    opacity: 0.85;
  }
}

@media (max-width: 768px) {
  .top-right::before,
  .top-right:empty,
  .top-left::before,
  .top-left:empty,
  img.top-right,
  img.top-left {
    width: 130px !important;
    height: 130px !important;
    opacity: 0.65;
  }
  .bottom-right::after,
  .bottom-right:empty,
  .bottom-left::after,
  .bottom-left:empty,
  img.bottom-right,
  img.bottom-left {
    width: 130px !important;
    height: 180px !important;
    opacity: 0.65;
  }
}