/* IMST header - single baked-in banner, menu overlaid on the artwork.
   Created: 1 July 2026
   Updated: 2 July 2026 (menu overlaid bottom-left on the banner at >=768px; drops to a
   bar below on phones where the banner is too short to hold it)
   File: media/templates/site/cassiopeia/css/user.css */

/* Banner row = the artwork. aspect-ratio locks the box to the image (2000x444 = 4.505:1)
   so the whole banner shows at every width, scales in proportion, never crops. Cassiopeia
   defaults background-attachment to fixed, so it must be forced back to scroll. */
.container-header{ background: none !important; position: relative; }
.container-header .grid-child:not(.container-nav){
  padding: 0 !important;
  aspect-ratio: 2000 / 444;
  background: #303030 url('/images/headers/IMST-Banner.webp') center / cover no-repeat !important;
  background-attachment: scroll !important;
}

/* Real title + tagline stay in the page for SEO and screen readers, hidden off-screen
   because the words live in the image. NOT display:none - that would hide them from SEO too. */
.container-header .navbar-brand{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Menu on phones - its own dark bar below the banner (no room to overlay). */
.container-header .container-nav{ background: #1a1a1a; }

/* Menu at 768px and up - overlaid on the open brick, bottom-left,
   clear of the title, tagline, mic and the "With Wayne Allen" line. */
@media (min-width: 768px){
  .container-header .container-nav{
    position: absolute;
    left: 0; bottom: 0;
    width: auto;
    background: none;
    padding: 0.6rem 1.5rem 0.9rem;
    z-index: 2;
  }
  .container-header .container-nav .mod-menu a{
    text-shadow: 0 1px 3px rgba(0,0,0,.85);   /* keeps the links legible on the brick */
  }
}

/* IMST sidebar card - 3D raised shadow. Added 2026-07-02 */
.sidebar-right.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;              /* keeps the header inside the rounded corners */
  transition: box-shadow .2s ease, transform .2s ease;
}
.sidebar-right.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18), 0 8px 12px rgba(0,0,0,0.10);
}

/* IMST homepage cards - 3D treatment. Added 2026-07-02 */

/* Outer content column: remove the frame so the cards float */
.grid-child.container-component {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Each episode becomes its own raised card */
.blog-item {
  background: #fff;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;               /* contains the floated image + clips corners */
  break-inside: avoid;            /* stops a card splitting across the 2 columns */
  box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.08);
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18), 0 8px 12px rgba(0,0,0,0.10);
}

/* Intro module keeps its background, gains the same lift */
.main-top.card {
  box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.08);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.main-top.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18), 0 8px 12px rgba(0,0,0,0.10);
}

/* Card images: inset them from the card edge and round the corners */
.blog-item .item-image {
  float: none;            /* they render full-width, so drop the float */
  margin: 0.75rem;        /* THE GAP between image and card edge - tweak to taste */
}
.blog-item .item-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;     /* softens the image corners inside the card */
}
/* Round images inside card bodies (sidebar author photo, etc.) */
.card-body img {
  border-radius: 6px;
}

/* Remove underline on episode title links in blog listings */
.blog-item h2 a,
.blog-item h2 a:hover,
.blog-item h2 a:focus,
.com-content-category-blog h2 a,
.com-content-category-blog h2 a:hover,
.com-content-category-blog h2 a:focus {
  text-decoration: none;
}