/* ==========================================================================
 * site.css  -  Ambient Artstyles styling that used to live in Code Injection
 *
 * Loaded on every page after the page's own stylesheet and BEFORE Ghost's
 * {{ghost_head}}, so anything you still add in Code Injection overrides it.
 *
 * Page-only rules are wrapped in :where(.page-SLUG). Ghost adds the class
 * "page-SLUG" to <body> on every page (for example /bio/ gets "page-bio").
 * :where() adds no CSS specificity, so each rule behaves exactly as it did
 * in that page's Code Injection box, but only on that page.
 *
 * To give another page its own look: copy a block, change the slug.
 *
 * Sections
 *   1. Site-wide (was Settings > Code injection > Site header)
 *   2. Audio Gung Fu page  (/audio-gung-fu/)
 *   3. Bio page            (/bio/)
 *   4. In-page pagination for the post grid
 * ========================================================================== */


/* --------------------------------------------------------------------------
 * 1. Site-wide
 * -------------------------------------------------------------------------- */

.m-hero.with-picture .m-hero-title {
  color: #fbfafd;
}

.m-hero-title.bigger {
  text-shadow: 4px 2px 2px #7d1c6b;
}

.m-hero-description {
  text-shadow: 3px 2px 2px #100411;
}


/* --------------------------------------------------------------------------
 * 2. Audio Gung Fu page  (/audio-gung-fu/)
 * -------------------------------------------------------------------------- */

/* Very large screens: shrink images (this includes the banner image) */
@media screen and (min-width: 2000px) {
  .page-template.page-audio-gung-fu img {
    margin-top: 10px;
    width: 75%;
    height: auto;
  }
}

/* This banner image has a strip of stray graphics along its top edge, so the
   crop is set lower than centre. Phones and tablets show the image's full
   height, so the strip still shows there until the image file itself is
   trimmed; after trimming, delete this rule. */
:where(.page-audio-gung-fu) {
  --hero-focus: 50% 70%;
}

body:where(.page-audio-gung-fu) {
  color: #ffefef;
  background: url("https://ambientartstyles.com/content/images/2024/12/Background_I.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

/* Fade-in sections stop at 85% opacity so the background shows through */
:where(.page-audio-gung-fu) [data-aos^="fade"][data-aos^="fade"]:not(.no-aos-animation).aos-animate {
  opacity: 0.85;
}

[data-theme="light"] body:where(.page-audio-gung-fu) {
  --primary-foreground-color: #ee6b6b;
}

/* Accordion (<details>/<summary>). The first two digits of the
   background colour (7F) are its transparency. */
:where(.page-audio-gung-fu) details {
  width: 100%;
  background-color: #8a179c7f;
  padding: 5px;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(10, 10, 10, 0.5);
}

:where(.page-audio-gung-fu) summary {
  background: #775f97;
  color: black;
  height: 40px;
  padding: 0 0 0 10px;
  margin: -2px;
  cursor: pointer;
  border: 2px solid black;
  border-radius: 2px;
  outline: none;
  font-size: 20px;
}

:where(.page-audio-gung-fu) summary:focus,
:where(.page-audio-gung-fu) summary:hover {
  background-color: #a73c8e;
}

/* 88x31-style button wall */
:where(.page-audio-gung-fu) .button-wall2 {
  padding: 2px;
}

:where(.page-audio-gung-fu) .button-wall2 img {
  width: 150px;
  height: 50px;
  border-radius: 5px;
  transition: transform 0.2s;
}

:where(.page-audio-gung-fu) .button-wall2 img:hover {
  transform: scale(1.1);
}

:where(.page-audio-gung-fu) pre {
  background-color: #333;
  color: #fff;
  padding: 0;
  border-radius: 1px;
  overflow-x: auto;
  max-width: 800px;
}

:where(.page-audio-gung-fu) h1 {
  margin: 0 0 10px;
  font-size: 18px;
  text-align: center;
}


/* --------------------------------------------------------------------------
 * 3. Bio page  (/bio/)
 * -------------------------------------------------------------------------- */

body:where(.page-bio) {
  background: url("https://ambientartstyles.com/content/images/2023/01/mic-A3-2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

/* Decorative images placed with HTML cards:
   <div class="container1"><img ...></div>. Their positions are fixed
   pixel offsets, so they only line up on wide desktop screens. */
:where(.page-bio) .container1,
:where(.page-bio) .container2 {
  position: relative;
  max-width: 100%;
}

:where(.page-bio) .container1 img {
  max-width: 25%;
  height: auto;
  position: absolute;
  top: -1350px;
  left: 1100px;
  transform: translate(-50%, -50%);
}

:where(.page-bio) .container2 img {
  max-width: 25%;
  height: auto;
  position: absolute;
  top: -650px;
  right: 875px;
  transform: translate(-50%, -50%);
}

[data-theme="light"] body:where(.page-bio) {
  --primary-foreground-color: #e7d1d1;
}

:where(.page-bio) .l-post-content h3 {
  --titles-color: #d8afaf;
}

/* Five-column grid for embeds */
:where(.page-bio) .grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 5px;
  padding: 1px;
}

:where(.page-bio) .grid-item {
  border: 0 solid #ccc;
  padding: 0;
  text-align: center;
}

:where(.page-bio) iframe {
  width: 100%;
  height: 100%;
  border: none;
}


/* --------------------------------------------------------------------------
 * 4. In-page pagination for the post grid (assets/js/post-feed.js)
 * -------------------------------------------------------------------------- */

.js-ajax-feed {
  transition: min-height 0.3s ease;
}

.js-ajax-feed[aria-busy="true"],
.m-pagination.is-loading {
  cursor: progress;
}

.m-pagination.is-loading .m-icon-button {
  opacity: 0.6;
}

/* Cards swapped in by the script get CSS title truncation, which matches
   what the theme's script does for cards present when the page loads */
.m-article-card.is-ajax-card .m-article-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.m-article-card.no-picture.is-ajax-card .m-article-card__title {
  -webkit-line-clamp: 6;
}