/**
 * SilverTeam/GastRock módosítás – 2026-06-03
 * Zenés receptek gyűjtőoldal manga/mozaik stílus.
 * A főoldali Zenés receptek mozaik piros-fekete-sárga hangulatát követi,
 * de sima WordPress oldalsablonként, kártyás listázással működik.
 */

:root {
  --music-black: #111111;
  --music-ink: #19120f;
  --music-red: #e51b23;
  --music-red-dark: #b70d16;
  --music-yellow: #ffe24d;
  --music-cream: #fff7df;
  --music-paper: #fffdf3;
  --music-orange: #ff9d2e;
}

.gastrock-music-archive-page {
  position: relative;
  background:
    radial-gradient(circle at 15px 15px, rgba(0,0,0,.055) 1.1px, transparent 1.3px) 0 0/18px 18px,
    linear-gradient(180deg, #fffaf0 0%, #fff7df 100%);
  color: var(--music-ink);
  overflow: hidden;
  font-family: 'Poppins', 'Ubuntu', Arial, sans-serif;
}

.gastrock-music-archive-page a {
  text-decoration: none;
}

.gastrock-music-archive-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 86px) 0 clamp(42px, 5vw, 76px);
  border-bottom: 7px solid var(--music-black);
  background:
    linear-gradient(105deg, transparent 0 58%, var(--music-red) 58% 100%),
    repeating-linear-gradient(90deg, rgba(255,226,77,.20) 0 18px, rgba(255,255,255,.64) 18px 36px),
    #fff6d8;
  isolation: isolate;
}

.gastrock-music-archive-hero::before {
  content: "";
  position: absolute;
  inset: -15% 38% -18% -18%;
  z-index: -1;
  background:
    repeating-conic-gradient(from -10deg at 42% 55%, rgba(0,0,0,.10) 0 7deg, transparent 7deg 15deg);
  opacity: .42;
  pointer-events: none;
}

.gastrock-music-archive-hero::after {
  content: "♪";
  position: absolute;
  right: clamp(18px, 6vw, 92px);
  bottom: clamp(12px, 3vw, 36px);
  z-index: -1;
  color: rgba(255,255,255,.16);
  font-family: 'GastRock Mouse Memoirs', 'Chewy', cursive;
  font-size: clamp(170px, 20vw, 360px);
  line-height: 1;
  transform: rotate(-12deg);
  pointer-events: none;
}

.gastrock-music-archive-hero .container,
.gastrock-music-archive-list-section .container {
  max-width: 1180px;
}

.gastrock-music-archive-page .gastrock-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 34px;
  padding: 11px 18px;
  color: var(--music-black);
  background: #fff;
  border: 4px solid var(--music-black);
  border-radius: 999px;
  box-shadow: 7px 7px 0 var(--music-black);
  font-family: 'Poppins', 'Ubuntu', Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.gastrock-music-archive-page .gastrock-breadcrumb a {
  color: var(--music-black);
}

.gastrock-music-archive-page .gastrock-breadcrumb span {
  color: var(--music-red);
  font-weight: 900;
}

.gastrock-music-archive-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  align-items: center;
  gap: clamp(26px, 4vw, 58px);
}

.gastrock-music-archive-hero-copy {
  position: relative;
  z-index: 2;
  padding: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(circle at 14px 14px, rgba(0,0,0,.035) 1px, transparent 1.2px) 0 0/16px 16px,
    rgba(255,255,255,.96);
  border: 6px solid var(--music-black);
  border-radius: 30px 26px 34px 24px;
  box-shadow: 13px 13px 0 var(--music-black), 18px 18px 0 var(--music-red);
  transform: rotate(-.45deg);
}

.gastrock-music-archive-hero-copy::before,
.gastrock-music-archive-hero-copy::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 38px;
  background: var(--music-yellow);
  border: 4px solid var(--music-black);
  box-shadow: 4px 4px 0 var(--music-red);
  transform: rotate(8deg);
  pointer-events: none;
}

.gastrock-music-archive-hero-copy::before {
  right: -36px;
  top: 34px;
}

.gastrock-music-archive-hero-copy::after {
  left: 22px;
  bottom: -26px;
  transform: rotate(-7deg);
  background: #fff;
}

.gastrock-music-archive-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 20px;
  background: var(--music-yellow);
  color: var(--music-black);
  border: 4px solid var(--music-black);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--music-red);
  font-family: 'Poppins', 'Ubuntu', Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.gastrock-music-archive-kicker::before {
  content: "♫";
  font-size: 18px;
  line-height: 1;
}

.gastrock-music-archive-hero h1 {
  margin: 0 0 18px;
  max-width: 780px;
  color: var(--music-black);
  /* A gyűjtőoldal nagy hero címe szándékosan megtartja a Bangers fontot. */
  font-family: 'Bangers', 'Chewy', 'Fredoka One', cursive;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 900;
  line-height: .93;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 var(--music-yellow), 8px 8px 0 var(--music-red);
}

.gastrock-music-archive-intro {
  max-width: 720px;
  color: var(--music-black);
  font-size: var(--gastrock-archive-intro-font-size, clamp(21px, 1.75vw, 28px));
  font-weight: 850;
  line-height: 1.48;
}

.gastrock-music-archive-intro p {
  margin: 0 0 .8em;
}

.gastrock-music-archive-character-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

.gastrock-music-archive-character {
  position: relative;
  width: min(440px, 92%);
  margin: 0;
  padding: clamp(14px, 1.5vw, 20px);
  background: linear-gradient(135deg, #fff, #fff4cc);
  border: 6px solid var(--music-black);
  border-radius: 28px;
  box-shadow: 13px 13px 0 var(--music-black), -10px -10px 0 var(--music-yellow);
  transform: rotate(2.2deg);
}

.gastrock-music-archive-character::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 34px;
  background:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.35) 1px, transparent 1.3px) 0 0/14px 14px,
    linear-gradient(135deg, #ffb22d, #e51b23);
  transform: rotate(-3deg);
}

.gastrock-music-archive-character img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 390px;
  object-fit: contain;
  filter: drop-shadow(9px 9px 0 rgba(0,0,0,.20));
}

.gastrock-music-archive-bubble {
  position: absolute;
  top: -4px;
  right: clamp(0px, 2vw, 32px);
  z-index: 3;
  max-width: 230px;
  padding: 16px 20px;
  background: #fff;
  color: var(--music-black);
  border: 5px solid var(--music-black);
  border-radius: 22px;
  box-shadow: 6px 6px 0 var(--music-red);
  font-family: 'Poppins', 'Ubuntu', Arial, sans-serif;
  font-weight: 900;
  line-height: 1.22;
  text-align: center;
  transform: rotate(-2.5deg);
}

.gastrock-music-archive-bubble::after {
  content: "";
  position: absolute;
  right: 42px;
  bottom: -22px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-right: 5px solid var(--music-black);
  border-bottom: 5px solid var(--music-black);
  transform: rotate(45deg);
}

.gastrock-music-archive-list-section {
  position: relative;
  padding: clamp(58px, 6vw, 90px) 0 clamp(70px, 7vw, 110px);
  background:
    radial-gradient(circle at 16px 16px, rgba(0,0,0,.05) 1px, transparent 1.3px) 0 0/18px 18px,
    #fffdf3;
}

.gastrock-music-archive-list-section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--music-yellow) 0 28px, var(--music-black) 28px 44px, var(--music-red) 44px 72px, var(--music-black) 72px 88px);
  border-bottom: 5px solid var(--music-black);
}

.gastrock-music-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 38px);
}

.gastrock-music-archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--music-paper);
  border: 5px solid var(--music-black);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--music-black);
  overflow: hidden;
  transform: rotate(var(--music-card-tilt, -0.7deg));
  transition: transform .2s ease, box-shadow .2s ease;
}

.gastrock-music-archive-card:nth-child(2n) {
  --music-card-tilt: .8deg;
}

.gastrock-music-archive-card:nth-child(3n) {
  --music-card-tilt: -1.1deg;
}

.gastrock-music-archive-card:hover,
.gastrock-music-archive-card:focus-within {
  transform: translate(-4px, -4px) rotate(0deg);
  box-shadow: 15px 15px 0 var(--music-red-dark);
}

.gastrock-music-archive-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: -15px;
  width: 74px;
  height: 30px;
  background: var(--music-yellow);
  border: 3px solid var(--music-black);
  box-shadow: 3px 3px 0 var(--music-red);
  transform: rotate(12deg);
  z-index: 3;
}

.gastrock-music-archive-image-link {
  position: relative;
  display: block;
  height: 245px;
  overflow: hidden;
  color: var(--music-black);
  background: var(--music-yellow);
}

.gastrock-music-archive-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .28s ease;
}

.gastrock-music-archive-card:hover .gastrock-music-archive-image-link img,
.gastrock-music-archive-card:focus-within .gastrock-music-archive-image-link img {
  transform: scale(1.08);
}

.gastrock-music-archive-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.24)),
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.24) 1px, transparent 1.2px) 0 0/15px 15px;
  pointer-events: none;
}

.gastrock-music-archive-image-link span {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  background: var(--music-yellow);
  color: var(--music-black);
  border: 4px solid var(--music-black);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--music-red);
  font-family: 'Poppins', 'Ubuntu', Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.gastrock-music-archive-image-link span::before {
  content: "♪";
  font-size: 16px;
}

.gastrock-music-archive-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 24px 26px;
}

.gastrock-music-archive-card h2 {
  margin: 0 0 12px;
  font-family: 'GastRock Mouse Memoirs', 'Chewy', 'Fredoka One', cursive;
  font-size: clamp(30px, 2.5vw, 42px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.gastrock-music-archive-card h2 a {
  color: var(--music-black);
  text-shadow: 3px 3px 0 var(--music-yellow);
}

.gastrock-music-archive-card p {
  margin: 0 0 18px;
  color: #2a2320;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.58;
}

.gastrock-music-archive-note {
  margin: auto 0 18px;
  padding: 12px 14px;
  color: var(--music-black);
  background: rgba(255,226,77,.30);
  border: 3px solid var(--music-black);
  border-radius: 16px;
  box-shadow: 4px 4px 0 rgba(229,27,35,.78);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.gastrock-music-archive-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  color: #fff;
  background: var(--music-red);
  border: 4px solid var(--music-black);
  border-radius: 999px;
  box-shadow: 5px 5px 0 var(--music-black);
  font-family: 'Poppins', 'Ubuntu', Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .18s ease, box-shadow .18s ease;
}

.gastrock-music-archive-button::before {
  content: "▶";
  font-size: 12px;
}

.gastrock-music-archive-button:hover,
.gastrock-music-archive-button:focus {
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--music-black);
}

.gastrock-music-archive-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 50px;
}

.gastrock-music-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: #fff;
  color: var(--music-black);
  border: 4px solid var(--music-black);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--music-red);
  font-weight: 900;
}

.gastrock-music-archive-pagination .page-numbers.current,
.gastrock-music-archive-pagination .page-numbers:hover,
.gastrock-music-archive-pagination .page-numbers:focus {
  background: var(--music-yellow);
  color: var(--music-black);
}

.gastrock-music-archive-empty {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px;
  background: #fff;
  border: 5px solid var(--music-black);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--music-red);
  text-align: center;
}

.gastrock-music-archive-empty h2 {
  margin: 0 0 12px;
  font-family: 'GastRock Mouse Memoirs', 'Chewy', cursive;
  font-size: 44px;
}

@media (max-width: 1199px) {
  .gastrock-music-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gastrock-music-archive-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
  }
}

@media (max-width: 991px) {
  .gastrock-music-archive-hero {
    background:
      linear-gradient(180deg, transparent 0 68%, rgba(229,27,35,.92) 68% 100%),
      repeating-linear-gradient(90deg, rgba(255,226,77,.20) 0 18px, rgba(255,255,255,.64) 18px 36px),
      #fff6d8;
  }

  .gastrock-music-archive-hero-grid {
    grid-template-columns: 1fr;
  }

  .gastrock-music-archive-character-wrap {
    min-height: 0;
  }

  .gastrock-music-archive-character {
    width: min(390px, 90%);
  }

  .gastrock-music-archive-bubble {
    right: calc(50% - 180px);
    top: -18px;
  }
}

@media (max-width: 767px) {
  .gastrock-music-archive-hero {
    padding: 34px 0 42px;
  }

  .gastrock-music-archive-page .gastrock-breadcrumb {
    margin-bottom: 24px;
    font-size: 12px;
  }

  .gastrock-music-archive-hero-copy {
    padding: 28px 22px 32px;
    border-width: 5px;
    box-shadow: 8px 8px 0 var(--music-black), 12px 12px 0 var(--music-red);
  }

  .gastrock-music-archive-hero h1 {
    font-size: clamp(46px, 16vw, 72px);
  }

  .gastrock-music-archive-grid {
    grid-template-columns: 1fr;
  }

  .gastrock-music-archive-image-link {
    height: 230px;
  }

  .gastrock-music-archive-card {
    transform: none;
  }
}

@media (max-width: 480px) {
  .gastrock-music-archive-bubble {
    position: relative;
    right: auto;
    top: auto;
    margin: 0 auto 18px;
    max-width: 260px;
  }

  .gastrock-music-archive-bubble::after {
    right: 50%;
  }

  .gastrock-music-archive-character {
    width: min(320px, 92%);
  }
}