@layer reset, typography, homepage, page, media, utilities, scroller;

:root {
  /* Kolory wspólne */
  --gold-color: #eed99a;
  --white-color: #eeeee4;
  --dark-color: #2b3335;
  --bg-color: #364042;
  --text-color: #f0f0e8;
  --link-color: #82baff;
  --input-bg: #23292B;
  --card-color: rgba(45, 52, 54, 0.2);
  --card-color-gradient: linear-gradient(320deg, rgba(35, 41, 43, 0.2) 0%, rgba(65, 75, 79, 0.8) 100%);
  --border-gradient: linear-gradient(45deg, #eed99a, #364042);
  --box-shadow-main: 0 12px 24px rgba(45, 52, 54, 0.8);
  --blur: 3px;
  --blur-hover: 16px;


  --font-head: "Plus Jakarta Sans", sans-serif;
  --font-text: "Inter", sans-serif;

  --font-size-small: 0.8rem;
  --font-size-normal: 1rem;
  --font-size-medium: 1.1rem;
  --font-size-large: 1.5rem;
  --font-card: 2rem;

  --gap: 1em;

  --12: 0.8em;
  --24: 1.5em;
  --left-right-12: 0 0.8em;
  --left-right-24: 0 1.5em;
  --top-bottom-12: 0.8em 0;
  --top-bottom-24: 1.5em 0;

  --radius: 0.5em;
  --radius-12: 0.8em;
  --radius-24: 1.5em;
  --radius-input: 1em;
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-size: 18px;
    overflow-x: hidden;
  }

  /* header,
  header section>*,
  nav,
  nav ul li,
  form,
  article,
  article h1,
  article ul li,
  section,
  section h2,
  section div h1,
  section div p,
  section ul li,
  section div a,
  aside,
  aside div h1,
  aside div p,
  aside ul li,
  .card>div,
  .card>div h2,
  .card>div p,
  .card>span,
  footer {
    border: 1px solid red;
  } */
}


/* Typografia */
@layer typography {
  body {
    background-color: var(--bg-color);
    background-image: url('img/Mask3.webp');
    background-repeat: repeat;
    color: var(--text-color);
    font-size: var(--font-size-normal);
    font-family: var(--font-text);
  }

  h1 {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-family: var(--font-head);
    color: var(--gold-color);
    font-weight: bold;
    text-wrap: balance;
    margin: 0;
    padding: 0;
  }

  h2 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-family: var(--font-head);
    font-weight: bold;
    margin: 0;
    padding: 0;
  }

  h3 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    font-family: var(--font-head);
    text-wrap: balance;
    font-weight: bold;
    margin: 0;
    padding: 0;
  }

  h4 {
    font-size: clamp(1.125rem, 3.5vw, 1.5rem);
    font-family: var(--font-head);
    font-weight: bold;
    margin: 0;
    padding: 0;
  }

  h5 {
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: bold;
    margin: 0;
    padding: 0;
  }

  h6 {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    font-family: var(--font-head);
    font-weight: bold;
    margin: 0;
    padding: 0;
  }

  p {
    font-size: clamp(0.8rem, 5vw, 1.1rem);
    color: var(--text-color);
    font-family: var(--font-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    text-wrap: balance;
  }

  a {
    color: var(--link-color);
    text-decoration: none;
  }

  a:hover,
  a:focus {
    color: var(--gold-color);
  }
}

/* Layout */
@layer homepage {
  header {
    max-width: 100%;
    height: auto;
    margin: 0 var(--12);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }

  header nav ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    justify-items: left;
    align-items: left;
    font-size: var(--font-size-medium);
    text-transform: uppercase;
    gap: var(--gap);
  }

  header nav span {
    display: none;
  }

  header nav span svg {
    fill: var(--gold-color);
  }

  header nav ul li a {
    padding: var(--top-bottom-12);
    display: block;
    font-weight: 500;
  }

  header nav ul .logo {
    grid-row: -1 / 1;
    grid-column: -1 / 1;
  }

  header section {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--gap);
    align-items: end;
    text-wrap: balance;
  }

  header section div h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: .5em;
    text-shadow: 0 12px 12px rgba(45, 52, 54, 0.8);
  }

  header section p {
    line-height: 1.6;
  }

  header section img {
    border-radius: var(--radius-12);
    z-index: -1;
    box-shadow: 0 12px 12px rgba(45, 52, 54, 0.8);
  }

  header section form {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--gap);
    padding: var(--24);
    border: 2px solid var(--gold-color);
    border-radius: var(--radius-12);
    background: var(--card-color-gradient);
    box-shadow: inset 0px 0px 6px 0px var(--gold-color);
    backdrop-filter: blur(var(--blur));
  }

  header section form h2 {
    color: var(--gold-color);
  }

  header section form input[type="text"],
  header section form textarea {
    color: white;
    border: none;
    background-color: var(--input-bg);
    resize: none;
    cursor: pointer;
  }

  header section form button {
    background-color: var(--gold-color);
    border: 2px solid var(--gold-color);
    color: black;
    box-shadow: 0;
    font-weight: bold;
    padding: var(--12);
    border-radius: var(--radius);
    font-size: var(--font-size-normal);
    font-family: var(--font-head);
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in;
  }

  header section form button:hover,
  header section form button:focus,
  header section form button:active {
    background-color: var(--gold-color);
    border: 2px solid white;
    box-shadow: inset 0px 3px 12px 0px white;
    transition: box-shadow 0.3s ease-out;
  }

  header section form button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  header section form textarea {
    min-height: 120px;
  }

  header section form label {
    font-size: var(--font-size-small);
    cursor: pointer;
  }

  main {
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    padding: var(--12);
    padding-top: 0;
    background-image: url(img/image441.png);
    background-repeat: no-repeat;
    background-position: top;
  }

  main article {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  main article h1 {
    color: whitesmoke;
  }

  main article:nth-child(3):before {
    background: rgb(6, 84, 251);
    background: radial-gradient(circle, rgba(6, 84, 251, 1) 0%, rgba(54, 64, 66, 0) 20%);
    position: absolute;
    content: "";
    left: 0;
    bottom: 25%;
    z-index: -3;
    width: 100%;
    height: 100%;
    opacity: 0.4;
  }

  main article:nth-child(3)::after {
    background: rgb(238, 217, 154);
    background: radial-gradient(circle, rgba(238, 217, 154, 1) 0%, rgba(54, 64, 66, 0) 20%);
    position: absolute;
    content: "";
    right: 0;
    top: 38%;
    z-index: -4;
    width: 100%;
    height: 100%;
    opacity: 0.2;
  }

  main article h1 {
    margin-top: var(--12);
    text-shadow: var(--box-shadow-main)
  }

  main article p {
    margin: var(--top-bottom-12);
    color: white;
  }

  main article ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: var(--12);
  }

  main article ul li a .card {
    display: flex;
    flex-direction: column;
    gap: var(--12);
    justify-content: space-between;
    height: 100%;
    padding: var(--24);
    background: var(--card-color);
    backdrop-filter: blur(var(--blur)) !important;
    border-radius: var(--radius-12);
    border: 2px solid #4F5B60;
    color: var(--text-color, #f0f0f0);
    box-shadow: var(--box-shadow-main);
    transition:
      background 0.3s ease-in,
      border-color 0.3s ease-in,
      box-shadow 0.3s ease-in,
      backdrop-filter 0.3s ease-in;
  }

  main article ul li a .card h2 {
    color: var(--gold-color, #DAA520);
    transition: color 0.3s ease-out;
  }

  main article ul li a .card span {
    opacity: 0;
    color: var(--link-color, #87CEEB);
    transition: opacity 0.3s ease-out 0.1s;
  }

  .card:hover,
  .card:active,
  .card:focus {
    background: var(--card-color-gradient);
    border: 2px solid var(--gold-color);
    box-shadow: inset 0px 0px 6px 0px var(--gold-color);
    backdrop-filter: blur(var(--blur-hover));
    transition:
      background 0.3s ease-in,
      border-color 0.3s ease-in,
      box-shadow 0.3s ease-in,
      backdrop-filter 0.3s ease-in;
    animation: pulseGoldBorder 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    will-change: background, border-color, box-shadow, backdrop-filter;
  }

  .card:hover h2 {
    color: var(--text-color-hover, #FFFFFF);
  }

  .card:hover span {
    opacity: 1;
  }

  @keyframes pulseGoldBorder {

    0%,
    100% {
      border-color: var(--gold-color);
      box-shadow:
        inset 0px 0px 4px 0px var(--gold-color),
        0 0 5px -1px rgba(238, 217, 154, 0.25);
    }

    40%,
    60% {
      border-color: var(--white-color);
      box-shadow:
        inset 0px 0px 7px 1px var(--link-color),
        0 0 10px 1px rgba(238, 238, 228, 0.45);
    }
  }

  main article section {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--24);
    margin: var(--top-bottom-24);
    position: relative;
  }

  main article section h2 {
    grid-column: 1 / -1;
  }

  main article section:nth-of-type(2)::before {
    background: rgb(46, 54, 56);
    background: linear-gradient(180deg, rgba(46, 54, 56, 1) 0%, rgba(46, 54, 56, 0) 100%);
    border-radius: var(--radius-24);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 1em;
    right: 1em;
    content: "";
    z-index: -1;
  }

  main article section:nth-of-type(3)::before {
    background: rgb(46, 54, 56);
    background: linear-gradient(270deg, rgba(54, 64, 66, 1) 0%, rgba(54, 64, 66, 1) 100%) padding-box, linear-gradient(270deg, rgb(238, 217, 154) 0%, rgba(238, 217, 154, 0) 70%) border-box;
    border-radius: var(--radius-24);
    border: 3px solid transparent;
    width: 97%;
    height: 100%;
    position: absolute;
    bottom: -1em;
    right: 1em;
    padding: 1em;
    content: "";
    z-index: -1;
  }

  main article section div h2 {
    color: var(--gold-color);
  }

  main article section ul {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }

  main article section>ul>li {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    line-height: 1.4;
  }

  main article section aside ul li {
    background: rgb(0, 0, 0);
    background: linear-gradient(130deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
    padding: var(--12);
    border-radius: var(--radius-12);
    border: 1px solid #414B4F;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    text-align: center;
    align-content: stretch;
    justify-content: space-between;
    backdrop-filter: blur(var(--blur));
    box-shadow: 0 6px 12px rgba(45, 52, 54, 0.8);
  }

  main article section aside ul li span {
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: bold;
    font-family: var(--font-head);
    margin: 0.5em;
  }

  main article section aside ul li p {
    margin: 0;
    padding: 0;
  }

  main article section>ul>li::before,
  main.page section div>ul>li::before {
    content: url(img/vector.svg);
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    box-shadow: 0 6px 12px rgba(45, 52, 54, 0.8);
  }

  footer {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: var(--24);
    padding: var(--12);
  }

  footer section h2 {
    margin: var(--top-bottom-12);
  }

  footer span {
    margin-top: 1em;
  }

  footer section ul {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
}

/* page themes */

@layer page {

  main.page {
    background-image: none;
  }

  main.page article section {
    margin-top: 0;
  }

  main.page article section div {
    background: var(--card-color-gradient);
    border-radius: var(--radius-12);
    border: 2px solid #4F5B60;
    color: var(--text-color);
    backdrop-filter: blur(var(--blur));
    box-shadow: var(--box-shadow-main);
    padding: var(--24);
  }

  main.page article nav.breadcrumb ol {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    list-style: none;
    background: var(--dark-color);
    border-radius: var(--radius-12);
    margin-top: var(--12);
    padding: var(--24);
  }

  main.page article nav.breadcrumb::before {
    position: absolute;
    top: 80px;
    left: 0;
    background: var(--dark-color);
    width: 100%;
    height: 60px;
    content: '';
    z-index: -1;
  }

  main.page article section {
    gap: var(--12);
  }

  main.page article section div h1 {
    margin: 0;
    padding: 0;
  }

  main.page article section div p {
    margin: var(--top-bottom-24);
  }

  main.page article section div:first-child {
    grid-column: -1 / 1;
  }

  main.page section div>ul>li {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    text-wrap: balance;
    font-family: var(--font-text);
    line-height: 1.6;
  }
}

/* Media Queries */
@layer media {

  /* 768px mobile */
  @media screen and (min-width: 768px) {

    header::before {
      background: rgb(238, 217, 154);
      background: radial-gradient(circle, rgba(238, 217, 154, 1) 0%, rgba(54, 64, 66, 0) 40%);
      position: absolute;
      top: -300px;
      left: 0;
      content: "";
      z-index: -1;
      width: 100%;
      height: 100%;
      opacity: 0.4;
    }

    header nav ul {
      grid-template-columns: repeat(5, auto);
      justify-content: space-between;
      align-items: center;
      margin-top: var(--12);
    }

    header nav ul .logo {
      grid-row: auto;
      grid-column: auto;
    }

    header section {
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    }

    main article ul {
      grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    }

    main article:first-child ul li:first-child {
      grid-row: span 2;
    }

    main.specialpage article ul li:first-child {
      grid-row: span 1;
      grid-column: span 2;
    }

    main article:first-child ul li:last-child {
      grid-column: -1 / 1;
    }

    main.specialpage article ul li:last-child {
      grid-column: span 1;
    }

    main article:nth-child(2) ul {
      grid-template-columns: repeat(auto-fill, minmax(280px, auto));
    }

    main article:nth-child(2) ul li:first-child,
    main article:nth-child(2) ul li:nth-of-type(4),
    main article:nth-child(2) ul li:nth-of-type(5),
    main article:nth-child(2) ul li:last-child {
      grid-column: span 2;
    }

    main article:nth-child(3) ul li:first-child,
    main article:nth-child(3) ul li:last-child {
      grid-column: span 2;
    }

    main article:nth-child(3) ul {
      grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    }

    main article ul h2 {
      grid-row: -1 / 1;
      grid-column: -1 / 1;
    }

    main article section {
      grid-template-columns: repeat(2, 1fr);
    }

    main article:nth-child(3):before {
      background: radial-gradient(circle, rgba(6, 84, 251, 1) 0%, rgba(54, 64, 66, 0) 50%);
    }

    main article:nth-child(3)::after {
      background: radial-gradient(circle, rgba(238, 217, 154, 1) 0%, rgba(54, 64, 66, 0) 50%);
    }

    main article section aside ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }

    footer {
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: auto;
      margin: var(--top-bottom-24);
      position: relative;
    }

    footer section:first-child {
      grid-column: span 3;
      margin: 0 auto;
    }

    footer section:first-child::before {
      position: absolute;
      top: 5%;
      left: 0;
      content: '';
      width: 40%;
      height: 3px;
      background: var(--gold-color);
      z-index: -1;
    }

    footer section:first-child::after {
      position: absolute;
      top: 5%;
      right: 0;
      content: '';
      width: 40%;
      height: 3px;
      background: var(--gold-color);
      z-index: -1;
    }

    footer span {
      grid-column: span 2;
    }
  }

  @media screen and (max-width: 768px) {
    header nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: start;
    }

    header nav span {
      display: block;
      padding: var(--top-bottom-24);
      font-size: var(--font-size-medium);
    }

    header nav ul li:not(:nth-child(3)) {
      display: none;
    }

  }

  @media screen and (min-width: 768px) {
    main.page article section div.last {
      grid-column: span 2;
    }
  }

  @media screen and (min-width: 898px) {
    main article:nth-child(2) ul li:last-child {
      grid-column: span 1;
    }
  }

  @media screen and (max-width: 958px) {
    main article:nth-child(3) ul li:last-child {
      grid-column: span 1;
    }
  }

  @media screen and (max-width: 1055px) {
    header section img {
      display: none;
    }
  }

  @media screen and (min-width: 1048px) and (max-width: 1200px) {
    main.specialpage article ul li:last-child {
      grid-column: span 2;
    }
  }

  /* 1200px desktop */
  @media screen and (min-width: 1200px) {

    header,
    main,
    footer {
      max-width: 1200px;
      margin-inline: auto;
      padding: 0;
    }


    main article:nth-child(2) ul li:first-child,
    main article:nth-child(2) ul li:nth-of-type(4),
    main article:nth-child(2) ul li:nth-of-type(5) {
      grid-column: auto;
    }

    main article:nth-child(2) ul li:nth-child(5) {
      grid-column: 3 / 1;
    }

    main article:nth-child(2) ul li:last-child {
      grid-column: 5 / 3;
    }

    main.specialpage article ul li:last-child {
      grid-column: span 2;
    }

  }
}

/* Utilities */
@layer utilities {

  input[type="text"],
  input[type="submit"],
  textarea {
    width: 100%;
    font-family: var(--font-text);
    font-size: var(--font-size-normal);
    padding: var(--12);
    border-radius: var(--radius-12);
  }

  img {
    max-width: 100%;
    height: auto;
  }

  ul {
    list-style: none;
  }

  /* Styl powiadomień */
  .notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: var(--24);
    border-radius: var(--radius);
    color: white;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: bold;
    animation: slideIn 0.4s ease-in-out, fadeOut 0.8s ease-in-out 8s forwards;
    /* Pokazuj przez 2s, potem zanikaj */
  }

  .notification.success {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    border: 1px solid #1e7e34;
  }

  .notification.error {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border: 1px solid #bd2130;
  }

  @keyframes slideIn {
    from {
      transform: translateX(120%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
      transform: translateY(-20px);
    }
  }


  .cookie-banner {
    position: fixed;
    max-width: 300px;
    bottom: 20px;
    left: 20px;
    right: 20px;
    padding: var(--12);
    border-radius: var(--radius);
    background: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);
    color: white;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    font-family: var(--font-text);
    font-size: var(--font-size-normal);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
    gap: var(--gap);
    animation: slideInBottom 0.4s ease-in-out;
  }


  .cookie-banner a {
    color: #00b7ff;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .cookie-banner a:hover {
    color: #0095d6;
    text-decoration: underline;
  }


  .cookie-banner button {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border: none;
    padding: var(--12);
    border-radius: var(--radius);
    font-size: var(--font-size-normal);
    font-family: var(--font-head);
    cursor: pointer;
    font-weight: bold;
    transition: transform 0.2s ease;
  }

  .cookie-banner button:hover {
    transform: translateY(-2px);
  }

  .cookie-banner button:active {
    transform: translateY(0);
  }

  /* Animacja wejścia */
  @keyframes slideInBottom {
    from {
      transform: translateY(120%);
      opacity: 0;
    }

    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

@layer scroller {
  .scroller {
    max-width: 1200px;
    z-index: 1;
  }

  .scroller__inner {
    display: flex;
    padding-block: var(--12);
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--24);
  }

  .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }

  .scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
    animation-delay: 1s;
  }

  .scroller[data-direction='left'] {
    --_animation-direction: forwards;
  }

  .scroller[data-direction='right'] {
    --_animation-direction: reverse;
  }

  .scroller[data-direction='slow'] {
    --_animation-duration: 20s;
  }

  .scroller[data-speed='fast'] {
    --_animation-duration: 10s;
  }


  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }

  .tag-list img {
    transition: all 0.3s ease-in;
    filter: grayscale(.2);
    padding: var(--12);
    cursor: pointer;
    padding: var(--12);
    background: rgb(0, 0, 0);
    background: linear-gradient(320deg, rgba(238, 217, 154, 0) 0%, rgba(238, 217, 154, 0.1) 100%);
    padding: var(--24);
    border-radius: var(--radius-12);
    border: var(--gold-color);
    max-width: 100%;
    height: 90px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    box-shadow: 0 3px 6px rgba(238, 217, 154, 0.1);
  }

  .scroller[data-animated="true"] .scroller__inner:has(img:hover, img:active, img:focus) {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
  }

  .tag-list img:hover,
  .tag-list img:focus,
  .tag-list img:active {
    transform: scale(1.1);
    filter: saturate(1.5);
    transition: all 0.1s ease-out;
  }
}