/*  ==========================================================
    BLOCKS
    ========================================================== */

/**
 * The block layer is where styles for specific components such as cards, avatars, and buttons are set up.
 * An example of a block is styles created for a team card element.
 *
 * # What should a block do?
 *   - Extend the work already done by the global CSS, composition and utility layers
 *   - Apply a collection of design tokens within a concise group
 *   - Create a namespace or specificity boost to control a specific context
 *
 * # What should NOT a block do
 *   - Grow to anything larger than a handful of CSS rules (max 80-100 lines)
 *   - Solve more than one contextual problem. For example: styling a card and a button in one file
 */

.pager > *:last-child .article-btn,
#navNext {
  text-align: end;

  justify-content: flex-end;
}

.pager li {
  flex-grow: 1;

  &.numbers {
    flex-grow: 0.25;

    & > * {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  & .disabled {
    padding: var(--space-s);
    background: oklch(var(--color-dark-gray));
    color: oklch(var(--color-light-gray));
    cursor: not-allowed;
    user-select: none;
  }
}

.article-btn {
  position: relative;
  max-inline-size: unset !important;
  padding: var(--space-s);
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1em;
  color: oklch(var(--color-light));
  background-color: oklch(var(--color-dark));
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  fill: oklch(var(--color-light)); /* SVG */
  transition: background-color var(--anim-medium);
  z-index: 2;

  &:hover,
  &:focus-visible {
    background-color: oklch(var(--color-primary));
    outline-offset: -0.5ch;
    border-radius: 0;
  }

  --flow-space: 3em;

  & svg {
    block-size: 2em;
  }

  &.inactive {
    display: none;
  }

  &.back-btn {
    background-color: oklch(var(--color-primary));
  }
}

[disabled] {
  padding: var(--space-s);
  background: oklch(var(--color-dark-gray));
  color: oklch(var(--color-light-gray));
  border: 2px solid oklch(var(--color-light-gray));
  cursor: not-allowed;
  user-select: none;

  &::hover {
    background: oklch(var(--color-dark-gray));
    box-shadow: none;
  }
}

.btn[disabled]::before,
.btn[disabled]::after {
  content: unset;
}

.ico-btn i {
  inline-size: 2em;
  aspect-ratio: 1;
  padding: 0.5em;
  background: oklch(var(--color-primary));
  border-radius: 50%;
  color: oklch(var(--color-light));
  font-size: var(--step-2);
}

/* ? Background Images */
.has-bg-img {
  position: relative;
  isolation: isolate;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: oklch(var(--color-light) / 0.05);
    z-index: -1;
  }

  &.opaque::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: oklch(var(--color-light) / 0.25);
    z-index: -1;
  }

  &.more-opaque::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: oklch(var(--color-light) / 0.5);
    z-index: -1;
  }

  &.very-opaque::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: oklch(var(--color-light) / 0.75);
    z-index: -1;
  }

  &.dark {
    color: oklch(var(--color-light));
  }

  &.dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: oklch(var(--color-dark) / 0.25);
    z-index: -1;
  }

  &.dark.more-opaque::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: oklch(var(--color-dark) / 0.5);
    z-index: -1;
  }

  &.dark.very-opaque::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: oklch(var(--color-dark) / 0.75);
    z-index: -1;
  }
}

.is-bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

.full-bg {
  background-image: url(/img/dolomites_transp.png);
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
  background-blend-mode: soft-light;
}

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: var(--lines, 2);
  -webkit-line-clamp: var(--lines, 2);
  overflow: hidden;
}

/* ? Box & cards */
.boxed {
  padding-inline: var(--biggest-element-font-size, var(--step-0));
  padding-block-start: calc(
    var(--biggest-element-font-size, var(--step-0)) / var(--heading-line-height)
  );
  padding-block-end: var(--biggest-element-font-size, var(--step-0));
  border-radius: calc(
    var(--biggest-element-font-size, var(--step-0)) / var(--heading-line-height)
  );
}

.card {
  position: relative;
  max-inline-size: min(calc(3 * var(--space-6xl)), 100%);
  color: oklch(var(--color-dark));
  border-radius: var(--border-radius);
  border: 1px solid oklch(var(--color-dark));
  overflow: hidden;
  z-index: 2;

  & svg {
    inline-size: 1em;
  }

  & :is(figure, img) {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }

  & img {
    max-inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: scale var(--anim-slow);
  }

  &:hover img {
    scale: 1.05;
  }
}

.inline-list {
  --__separator: attr(data-separator, ", ");
}

.inline-list * {
  display: inline;
}

.inline-list > *:not(:last-child)::after {
  content: var(--__separator, ", ");
}

/* ? Footer */
footer {
  font-size: var(--step--1);

  --padding-block-start: var(--space-xl-2xl);
  --padding-block-end: calc(var(--inverse-clamp) * 2);

  & a {
    transition: color var(--anim-fast);
    color: oklch(var(--color-dark)) !important;

    &:hover {
      color: oklch(var(--color-primary)) !important;
    }
  }

  & .footer-logo {
    inline-size: var(--space-5xl-6xl);
  }

  & .copyright {
    font-size: var(--step--2);

    & * {
      max-inline-size: unset;
    }
  }
}

/* ? Form */
.form-container {
  --__input-padding-block: 1em;
  --__input-padding-inline: 1em;

  position: relative;
  z-index: 1;

  & label {
    cursor: pointer;
  }

  & .privacy {
    --flex-gap: 0.5em;
  }
}

.form-section {
  position: relative;
  width: 100%;

  & > * {
    --flow-space: 0.5rem;
  }
}

.form-section > :is(input, select, textarea) {
  --__shadow-length: 8px;

  padding: var(--__input-padding-block) var(--__input-padding-inline) !important;
  background-color: transparent;
  box-shadow: var(--neumorph-shadow-down);
}

.form-section label {
  color: oklch(var(--color-primary));
  font-size: var(--step--1);
}

/* Autocomplete bg */
.form-section
  :is(
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active
  ) {
  -webkit-box-shadow: 0 0 0px 1000px oklch(var(--color-light-gray)) inset !important;
  box-shadow: 0 0 0px 1000px oklch(var(--color-light-gray)) inset !important;
  -webkit-text-fill-color: oklch(var(--color-dark)) !important;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid oklch(var(--color-medium-gray));
  border-radius: var(--border-radius);
  background-color: transparent;
}

input[type="checkbox"]:checked {
  background-color: oklch(var(--color-primary));
  background: center/cover no-repeat
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8l4 4 6-6' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  border: 1px solid oklch(var(--color-primary));
}

#message-field,
#error-field {
  padding: 0.5em 0.75em;
  background: oklch(var(--__color, gray) / 0.1);
  border: 1px solid oklch(var(--__color, gray));
  border-radius: var(--border-radius);
  color: oklch(var(--__color, black));
  /* Overwrite data-anim defaults */
  opacity: 1;
  translate: 0 0;
}

#error-field {
  --__color: var(--color-error-light);

  padding: 1em;
}

.social-icons svg {
  width: var(--__size, 4em);
  height: var(--__size, 4em);
  fill: oklch(var(--color-light));
  transition: fill var(--anim-medium);

  &:hover {
    fill: oklch(var(--color-secondary));
  }
}