/*
 * So Much Pięknie - Kulisy article (full-screen cover header, related posts beside the text)
 * and the listen bar pinned to the bottom of every page.
 */

/* Cover header ---------------------------------------------------------------------------- */
.smp-story-hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 88svh; padding: 8rem 0 3rem; background: var(--night);
}
@media (min-width: 768px) { .smp-story-hero { padding-bottom: 4rem; } }
.smp-story-hero--plain { min-height: 0; padding-top: 4rem; }
.smp-story-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.smp-story-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--night) 0%, rgba(11, 11, 16, .75) 35%, rgba(11, 11, 16, .1) 75%);
}
.smp-video--short { aspect-ratio: 9 / 16; }
/* A Short in the text: an upright phone-sized frame in the middle of the column. */
.smp-prose .smp-figure--short { max-width: 20rem; margin-left: auto; margin-right: auto; }
.smp-prose .smp-video--short { border-radius: 1.5rem; }
.smp-story-hero .smp-crumbs { margin-bottom: 1.5rem; }
.smp-story-hero__label { margin: 0; }
.smp-story-hero__title {
  margin: .75rem 0 0; font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; line-height: 1; font-size: clamp(2.75rem, 6.5vw, 5.5rem);
}
.smp-story-hero__kicker {
  margin: .75rem 0 0; color: var(--pink);
  font-family: "Fraunces", Georgia, serif; font-style: italic; font-variation-settings: "SOFT" 100;
  font-size: clamp(1.375rem, 2.4vw, 2rem); line-height: 1.3;
}
.smp-story-hero__lead { margin: 1.25rem 0 0; max-width: 38rem; font-size: 1.25rem; line-height: 1.6; color: rgba(245, 240, 234, .88); }
.smp-story-hero__meta { margin-top: 1.25rem; }

/* Body: text column, plus related posts in view beside it on wide screens --------------- */
.smp-story__grid { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .smp-story__grid { padding: 0 1.5rem; } }
.smp-story__rail { display: none; }
@media (min-width: 1024px) {
  .smp-story--rail .smp-story__grid {
    display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 1fr); gap: 4rem; max-width: 76rem;
  }
  .smp-story--rail .smp-story__rail { display: block; }
  /* the rail already lists them */
  .smp-story--rail ~ .smp-story__more { display: none; }
}
.smp-story__related { position: sticky; top: 6rem; padding: 1.5rem; border-radius: 1.25rem; background: #F4F1EC; }
.smp-story__related .smp-label { margin: 0; color: var(--lipstick); }
.smp-minis { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.smp-mini { display: flex; align-items: center; gap: 1rem; padding: .5rem; border-radius: .875rem; color: var(--night); text-decoration: none; transition: background-color .2s; }
.smp-mini:hover, .smp-mini:focus-visible { background: #fff; }
.smp-mini:focus-visible { outline: 2px solid var(--lipstick); outline-offset: 2px; }
.site-somuchpieknie .smp-mini__image { flex-shrink: 0; width: 4.5rem; height: 4.5rem; border-radius: .625rem; object-fit: cover; }
.smp-mini__copy { display: grid; gap: .25rem; min-width: 0; }
.smp-mini__label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lipstick); }
.smp-mini__title { font-weight: 700; line-height: 1.35; }
.smp-mini:hover .smp-mini__title { color: var(--lipstick); }
.smp-story__all { display: inline-flex; margin-top: 1rem; color: var(--night); }

/* Listen bar ------------------------------------------------------------------------------- */
.smp-listenbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  /* the burgundy of the "Posłuchaj nas" band */
  background: radial-gradient(circle at 8% 50%, rgba(224, 18, 60, .35), transparent 45%), linear-gradient(120deg, var(--wine), var(--night-alt) 60%, var(--night));
  border-top: 1px solid rgba(245, 240, 234, .12);
  color: var(--snow); transform: translateY(110%); transition: transform .45s cubic-bezier(.2, .7, .1, 1);
}
.smp-listenbar.is-up { transform: none; }
.smp-listenbar__inner { display: flex; align-items: center; gap: .75rem; max-width: 72rem; margin: 0 auto; }
.smp-listenbar__cover { flex-shrink: 0; width: 3.5rem; height: 3.5rem; border-radius: .5rem; object-fit: cover; }
.smp-listenbar__text { display: grid; min-width: 0; margin: 0; line-height: 1.25; }
.smp-listenbar__label { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.smp-listenbar__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--display); font-weight: 600; font-size: 1.125rem; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 768px) { .smp-listenbar__title { font-size: 1.375rem; letter-spacing: .08em; } }
.smp-listenbar__play {
  display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; margin-left: auto;
  border-radius: 50%; background: var(--lipstick); color: #fff; box-shadow: var(--shadow-red);
}
.smp-listenbar__play:hover { background: var(--wine); }
.smp-listenbar__services { display: none; gap: .25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .smp-listenbar__services { display: flex; } }
.smp-listenbar__services a {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  color: var(--snow); border: 1px solid rgba(245, 240, 234, .25); transition: color .2s, border-color .2s;
}
.smp-listenbar__services a:hover, .smp-listenbar__services a:focus-visible { color: var(--brand, var(--pink)); border-color: currentColor; }
.smp-listenbar__services svg { width: 1.125rem; height: 1.125rem; }
.smp-listenbar__close {
  display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: transparent; color: rgba(245, 240, 234, .7); cursor: pointer;
}
.smp-listenbar__close:hover { color: var(--snow); }
/* Band mode (pages not tied to a song): headphones, "Posłuchaj nas", the services. */
.smp-listenbar__icon { flex-shrink: 0; color: var(--pink); }
.smp-listenbar__band { font-family: var(--display); font-weight: 600; font-size: 1.125rem; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
@media (min-width: 768px) { .smp-listenbar__band { font-size: 1.375rem; } }
.smp-listenbar--band .smp-listenbar__services { display: flex; margin-left: auto; }
/* Phones: no headphones mark, the label may break into two lines, smaller service buttons. */
@media (max-width: 479px) {
  .smp-listenbar--band .smp-listenbar__icon { display: none; }
  .smp-listenbar--band .smp-listenbar__band { white-space: normal; font-size: .9375rem; line-height: 1.1; letter-spacing: .06em; }
  .smp-listenbar--band .smp-listenbar__services { gap: .25rem; }
  .smp-listenbar--band .smp-listenbar__services a { width: 2.25rem; height: 2.25rem; }
  .smp-listenbar--band .smp-listenbar__inner { gap: .5rem; }
}
.has-listenbar body { padding-bottom: 5.5rem; }

@media (prefers-reduced-motion: reduce) {
  .smp-listenbar { transition: none; }
}

/* Article header: the category label links to the Kulisy list of that category, and the tags
   (country, place, song, topic) are chips linking to ?tag= lists. */
.smp-story-hero__label a { color: inherit; text-decoration: none; }
.smp-story-hero__label a:hover { text-decoration: underline; text-underline-offset: .25rem; }
.smp-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.smp-tag {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px;
  border: 1px solid rgba(245, 240, 234, .35); background: rgba(11, 11, 16, .35);
  font-size: .9375rem; font-weight: 600; color: var(--snow); text-decoration: none;
}
.smp-tag:hover { border-color: var(--snow); background: rgba(245, 240, 234, .12); }
.smp-tag:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }