/*
 Theme Name:   Tornadoes Kick
 Theme URI:    https://bricksbuilder.io/
 Description:  This is the duplicate to the bricks-child.
 Author:       Tony Laubach
 Author URI:   https://tonylaubach.net
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

.tl-excerpt-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* CHASE HEADER: hero sizing + consistent media behavior */
/* HERO: true 16:9 box, always */
.chase-header__hero {
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  position: relative;
}

/* CHASE LOG TARGET REGION HEADER */
.chase-left__region {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin: 0;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

.chase-header__below {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

/* Make BOTH the video wrapper and image behave like a "cover" hero */
.chase-hero__media,
.chase-hero__media--image img,
.chase-hero__media--video iframe {
  width: 100%;
  height: 100%;
}

/* Images should crop nicely */
.chase-hero__media--image img {
  object-fit: cover;
  display: block;
}

/* oEmbed iframes should fill and crop like a hero too */
.chase-hero__media--video iframe {
  display: block;
}

/* BELOW HERO: two-column layout */
.chase-header__below {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start; /* if Bricks complains, use flex-start */
}

/* MOBILE: stack SPC under stats (hard guarantee) */
@media (max-width: 900px) {

  /* Force the two-column area to become a vertical stack */
  .chase-single .chase-header__below {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Remove desktop “drop” spacing on mobile */
  .chase-single .chase-header__right {
    padding-top: 0;
    display: flex;
    justify-content: center;
  }

  /* Center the SPC wrapper and keep it from being gigantic */
  .chase-single .chase-spc {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .chase-single .chase-spc img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* If your SPC image is wrapped in a figure, kill default margins */
  .chase-single .chase-header__right figure {
    margin: 0;
  }
}


/* Bricks validator-safe */
.chase-header__below { align-items: flex-start; }

.chase-spc__img,
.chase-spc__img img {
  width: 100%;
  height: auto;
  display: block;
}


/* Align SPC with TARGET REGION */
.chase-header__right {
  padding-top: 0.75rem; /* tweak to match H2 optical baseline */
  display: flex;
  justify-content: flex-end;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
  .chase-header__below {
    grid-template-columns: 1fr;
  }
}