/*
 * Mythica Timeline - Soil.
 *
 * Keeps: black panels, white text, the centre spine, the diamond year marker,
 * full-bleed photographic bands. That look is the site's and it works.
 *
 * Fixes, all of them things Cool Timeline Pro got wrong by default:
 *   - title dominant, date reduced to a quiet mono line above it
 *   - focal point per arc, so bands stop cropping through faces
 *   - scrim behind band labels, so white text isn't a coin flip per photo
 *   - text always left-aligned, never mirrored to match the card's side
 *   - no post cap
 *
 * Fonts are inherited, deliberately. The theme already knows what the Mythica
 * sounds like; this shouldn't second-guess it.
 */

:root {
  --myth-panel: rgba(0, 0, 0, 0.82);
  --myth-ink: rgba(255, 255, 255, 0.92);
  --myth-ink-dim: rgba(255, 255, 255, 0.55);
  --myth-ink-faint: rgba(255, 255, 255, 0.35);
  --myth-line: rgba(255, 255, 255, 0.28);
  --myth-gap: 2.5rem;
}

/* ==========================================================================
   THE INDEX - bands
   ========================================================================== */

.myth-arcs {
  display: block;
  width: 100%;
}

.myth-arcs-title {
  text-align: center;
  color: var(--myth-ink);
  margin: 0 0 1.5rem;
}

.myth-arc-band {
  position: relative;
  display: block;
  width: 100%;
  height: var(--band-h, 380px);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}

.myth-arc-band-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-position is set inline, from the arc term's focal field.
     Without it every band crops at 50% 50% and the composition takes its
     chances - which is how the top of a head ends up outside the frame. */
  transition: transform 0.6s ease;
  z-index: 0;
}

.myth-arc-band:hover .myth-arc-band-img {
  transform: scale(1.03);
}

/* The scrim is what makes white text safe over an unknown photograph.
   Darkest at the centre band where the label sits, clear at the edges so the
   image is never flatly dimmed. */
.myth-arc-band-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.42) 42%,
    rgba(0, 0, 0, 0.42) 58%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.myth-arc-band-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
}

.myth-arc-band-name {
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.myth-arc-band-sub {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ==========================================================================
   ONE ARC - spine, nodes, cards
   ========================================================================== */

.myth-tl {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

/* The diamond. Cool Timeline Pro's one good idea. */
.myth-tl-year {
  display: flex;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.myth-tl-year span {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  background: #000;
  color: #fff;
  transform: rotate(45deg);
  border: 1px solid var(--myth-line);
}

/* The box is rotated 45deg to make the diamond; the label has to be rotated
   back or the year reads diagonally. */
.myth-tl-year span i {
  transform: rotate(-45deg);
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.myth-tl-spine {
  position: relative;
}

/* The line itself. */
.myth-tl-spine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--myth-line);
  transform: translateX(-50%);
}

.myth-tl-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--myth-gap);
  align-items: center;
  margin-bottom: var(--myth-gap);
}

.myth-tl-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.7);
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

.myth-tl-right .myth-tl-media { grid-column: 1; }
.myth-tl-right .myth-tl-card  { grid-column: 2; }
.myth-tl-left  .myth-tl-card  { grid-column: 1; }
.myth-tl-left  .myth-tl-media { grid-column: 2; }

.myth-tl-media img {
  display: block;
  width: 100%;
  height: auto;
}

.myth-tl-card {
  background: var(--myth-panel);
  padding: 1.75rem;
  /* Text stays left-aligned on both sides. Cool Timeline Pro mirrored it -
     right-aligning the left-hand cards - which put "Read More" on the far
     edge of a right-aligned block and read as broken rather than deliberate. */
  text-align: left;
}

.myth-tl-date {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--myth-ink-faint);
  margin-bottom: 0.5rem;
}

.myth-tl-title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.myth-tl-title a {
  color: var(--myth-ink);
  text-decoration: none;
}

.myth-tl-title a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.myth-tl-excerpt {
  color: var(--myth-ink-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.myth-tl-excerpt p { margin: 0 0 0.5rem; }

.myth-tl-type {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--myth-ink-faint);
  border: 1px solid var(--myth-line);
  padding: 0.2rem 0.5rem;
  margin-right: 0.5rem;
}

.myth-tl-more {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--myth-line);
  color: var(--myth-ink);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.myth-tl-more:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   MOBILE - spine hard left, single column, no alternation.
   Alternating cards on a 380px screen is two columns of nothing.
   ========================================================================== */

@media (max-width: 782px) {

  .myth-arc-band {
    height: 220px;
  }

  .myth-tl {
    padding: 1rem 0.75rem 3rem;
  }

  .myth-tl-spine::before {
    left: 10px;
    transform: none;
  }

  .myth-tl-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 2rem;
    margin-bottom: 2rem;
  }

  .myth-tl-node {
    left: 10px;
    top: 1.5rem;
  }

  .myth-tl-right .myth-tl-media,
  .myth-tl-left  .myth-tl-media,
  .myth-tl-right .myth-tl-card,
  .myth-tl-left  .myth-tl-card {
    grid-column: 1;
  }

  .myth-tl-card {
    padding: 1.25rem;
  }

  .myth-tl-title {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .myth-arc-band-img { transition: none; }
  .myth-arc-band:hover .myth-arc-band-img { transform: none; }
}


/* ===========================================================================
 * THE ARC PAGE - /arc/{slug}/
 *
 * Scoped entirely to body.myth-arc-page, which includes/archive.php adds. None
 * of this can reach any other page on the site.
 *
 * THE TRANSPARENCY. The arc background is painted on body::before and the whole
 * point is that you are standing in the world you clicked into. BuddyBoss's
 * content chrome sits on top of it in grey. `body` is already transparent (the
 * wp_head painter says so !important) - the grey is further in, on one of the
 * wrappers between body and the spine.
 *
 * Rather than hunt the single guilty selector, this declares the entire chain
 * transparent. That is not a shortcut around a diagnosis - on an arc page there
 * is no wrapper that SHOULD have a background. The statement "this page has no
 * chrome, the world shows through" is more honest as five selectors than as one
 * lucky one, and it survives a BuddyBoss update moving the colour one div in or
 * out. Episodes get their transparency the same way, from the same painter.
 * ======================================================================== */

body.myth-arc-page #content.site-content,
body.myth-arc-page #content .container,
body.myth-arc-page .bb-grid.site-content-grid,
body.myth-arc-page #primary.content-area,
body.myth-arc-page #main.site-main {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Full width. The body_class filter removes has-sidebar/blog-sidebar/
 * sidebar-right, which is what actually releases the column from 900px - this
 * just makes sure nothing else is holding it. */
body.myth-arc-page #primary.content-area {
	width: 100%;
	max-width: none;
	flex: 1 1 100%;
	padding: 0;
}

/* The arc's name. The h1 the theme would have printed came from
 * the_archive_title(), which prefixes and styles it as a category. This is a
 * chapter heading. */
.myth-arc-head {
	text-align: center;
	margin: 3rem auto 1rem;
	padding: 0 1rem;
}

.myth-arc-name {
	font-family: Georgia, serif;
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	line-height: 1.2;
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .85);
}

.myth-arc-desc {
	max-width: 640px;
	margin: 1rem auto 0;
	color: rgba(255, 255, 255, .75);
	font-size: .95rem;
	line-height: 1.6;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}

@media (max-width: 600px) {
	.myth-arc-head {
		margin: 2rem auto .5rem;
		text-align: left;
	}
}