.guide-gallery,
.guide-admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;

  .guide-gallery-eyebrow {
    color: var(--clr-brand-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .guide-tag-filter-pills,
  .guide-language-filter-pills,
  .guide-audience-filter-pills,
  .guide-tag-picker-pills {
    display: flex;
    min-height: 2rem;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .guide-filter-pill,
  .guide-tag-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;

    input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    &:hover {
      border-color: var(--clr-brand-primary);
    }

    &:has(input:checked) {
      border-color: var(--clr-brand-primary);
      background-color: var(--clr-brand-primary);
      color: var(--clr-white);
    }

    &:focus-within {
      outline: 2px solid var(--clr-brand-primary);
      outline-offset: 2px;
    }
  }
  
  .guide-language-filter-group {
    display: none;
  }

  .guide-tag-filter-group,
  .guide-language-filter-group,
  .guide-audience-filter-group {
    min-width: 0;
    grid-column: 1 / -1;
    padding: 0;
    border: 0;

    legend {
      padding: 0;
      color: var(--font-clr-label);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
    }
  }

  .guide-tag-filter-groups,
  .guide-tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .guide-tag-picker-group {
    padding: 0;
    border: 0;

    legend {
      padding: 0;
      color: var(--font-clr-label);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
    }
  }
}

.guide-gallery,
.guide-admin {
  .guide-gallery-intro,
  .guide-gallery-toolbar,
  .guide-admin-summary {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background-color: var(--clr-white);
    box-shadow: var(--shadow-sm);
  }

  .guide-gallery-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
    overflow: hidden;
    padding: var(--space-xl);
    background:
      radial-gradient(circle at 85% 20%, var(--clr-brand-primary-300), transparent 30%),
      var(--clr-white);

    > div:first-child {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      max-width: 42rem;
    }

    p {
      color: var(--font-clr-muted);
      font-size: var(--font-size-lg);
    }
  }

  .guide-gallery-intro-icon {
    display: grid;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    background-color: var(--clr-brand-primary);
    box-shadow: var(--shadow-pop);

    img {
      width: 3rem;
      height: 3rem;
      filter: brightness(0) invert(1);
    }
  }

  .guide-gallery-toolbar {
    padding: var(--space);
  }

  .guide-gallery-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    align-items: end;
  }

  .guide-gallery-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);

    [data-guide-result-count] {
      color: var(--font-clr-muted);
      font-size: var(--font-size-sm);
    }
  }

  .guide-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: var(--space);
  }

  .guide-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background-color: var(--clr-white);
    box-shadow: var(--shadow-sm);

    &:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-pop);

      .guide-card-play {
        transform: scale(1.08);
      }
    }
  }

  .guide-card-preview {
    position: relative;
    display: grid;
    min-height: 10.5rem;
    place-items: center;
    background: linear-gradient(135deg, var(--clr-brand-primary-300), var(--clr-grey-150));

    &::after {
      position: absolute;
      inset: auto var(--space-sm) var(--space-sm) auto;
      padding: var(--space-xxs) var(--space-xs);
      border-radius: var(--radius-xl);
      background-color: var(--clr-white);
      color: var(--font-clr-muted);
      content: attr(data-language);
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-medium);
      box-shadow: var(--shadow-sm);
    }
  }

  .guide-card:nth-child(3n + 2) .guide-card-preview {
    background: linear-gradient(135deg, var(--clr-success-soft), var(--clr-grey-150));
  }

  .guide-card:nth-child(3n) .guide-card-preview {
    background: linear-gradient(135deg, var(--clr-grey-200), var(--clr-brand-primary-300));
  }

  .guide-card-play {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 50%;
    background-color: var(--clr-white);
    box-shadow: var(--shadow-pop);
    will-change: border-color, transform;
    border: 2px solid var(--clr-white);

    &::before {
      width: 0;
      height: 0;
      border-top: 0.55rem solid transparent;
      border-bottom: 0.55rem solid transparent;
      border-left: 0.85rem solid var(--clr-brand-primary);
      content: '';
      transform: translateX(0.1rem);
    }

    &:hover {
      border-color: var(--clr-brand-primary);
      transform: scale(1.1) !important;
    }
  }

  .guide-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space);
  }

  .guide-card-header,
  .guide-card-footer,
  .guide-tag-list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  .guide-card-header {
    align-items: flex-start;
    justify-content: space-between;

    h2 {
      min-width: 0;
    }
  }

  .guide-card-description {
    display: -webkit-box;
    min-height: 3em;
    overflow: hidden;
    flex: 1;
    color: var(--font-clr-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .guide-card-footer {
    justify-content: space-between;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--clr-border);
  }

  .guide-tag,
  .guide-featured {
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
  }

  .guide-tag {
    background-color: var(--clr-grey-150);
  }

  .guide-featured {
    background-color: var(--clr-brand-primary-300);
    color: var(--clr-brand-primary);
  }

  .guide-empty-state {
    grid-column: 1 / -1;
    padding: var(--space-xl);
    border: 1px dashed var(--clr-border);
    border-radius: var(--radius-xl);
    background-color: var(--clr-white);
    text-align: center;
  }
}

.guide-admin {
  .guide-admin-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background-color: var(--clr-white);
    box-shadow: var(--shadow-sm);

    > div {
      display: flex;
      flex-direction: column;
      gap: var(--space-xxs);
    }
  }

  .guide-admin-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: var(--space);
  }

  .guide-admin-toolbar {
    padding: var(--space);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    background-color: var(--clr-white);
    box-shadow: var(--shadow-sm);
  }

  .guide-admin-filter-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: var(--space-sm);
  }

  .guide-admin-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);

    [data-guide-admin-result-count] {
      color: var(--font-clr-muted);
      font-size: var(--font-size-sm);
    }
  }

  .guide-tag-management {
    .guide-tag-management-help {
      color: var(--font-clr-muted);
      font-size: var(--font-size-sm);
    }

    .tag-type-island-body {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
      gap: var(--space-sm);
    }

    .guide-tag-management-help {
      grid-column: 1 / -1;
    }

    .guide-tag-category-actions,
    .guide-tag-management-tag {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }

    .guide-tag-category-actions {
      flex-wrap: wrap;
    }

    .guide-tag-management-tag {
      &.is-archived {
        border: 1px solid var(--clr-grey-200);
        background: var(--clr-grey-100);
        color: var(--font-clr-muted);
      }

      &:hover {
        border-color: var(--clr-brand-primary);
      }
    }
  }

  .guide-empty-state {
    grid-column: 1 / -1;
    padding: var(--space-xl);
    border: 1px dashed var(--clr-border);
    border-radius: var(--radius-xl);
    background-color: var(--clr-white);
    text-align: center;
  }

  .guide-admin-card {
    .guide-admin-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-sm);
    }

    .guide-admin-card-description {
      min-height: 3em;
      color: var(--font-clr-muted);
    }

    .guide-admin-card-tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    .guide-card-footer {
      display: flex;
      gap: var(--space-xs);
      padding-top: var(--space-sm);
      border-top: 1px solid var(--clr-border);
      margin-top: auto;

      button {
        width: 100%;
      }
    }
  }

  .guide-status {
    flex-shrink: 0;
    padding: var(--space-xxs) var(--space-xs);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);

    &.guide-status-published {
      background-color: var(--clr-success-soft);
    }

    &.guide-status-draft,
    &.guide-status-archived {
      background-color: var(--clr-grey-150);
      color: var(--font-clr-muted);
    }
  }
}

.guide-video-modal {
  width: min(90vw, 60rem);
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  position: relative;

  .modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--space);
    padding: 0;
    background-color: transparent;
  }

  .guide-player {
    display: grid;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius-md);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(30, 30, 30, 0.81);

    iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }
  }

  .guide-player-consent {
    display: flex;
    max-width: 32rem;
    flex-direction: column;
    align-items: center;
    gap: var(--space);
    padding: var(--space-lg);
    color: var(--clr-white);
    text-align: center;

    --font-clr-heading: var(--clr-white);
    --font-clr-body: var(--clr-grey-300);
  }
}

.guide-resource-modal {
  width: min(90vw, 52rem);
  max-height: 90vh;
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);

  .guide-admin-form {
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    gap: var(--space);
  }

  .guide-variant-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background-color: var(--clr-grey-50);
  }

  .guide-tag-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background-color: var(--clr-grey-50);
  }

  .guide-tag-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);

    > div {
      display: flex;
      flex-direction: column;
      gap: var(--space-xxs);
    }

    p {
      color: var(--font-clr-muted);
    }
  }

  .guide-variant-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
  }

  .guide-variant-section-header {
    > div {
      display: flex;
      flex-direction: column;
      gap: var(--space-xxs);
    }

    p {
      color: var(--font-clr-muted);
    }
  }

  .guide-variant-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .guide-variant {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background-color: var(--clr-white);
    overflow: hidden;

    &[open] {
      box-shadow: var(--shadow-sm);

      .guide-variant-chevron {
        transform: rotate(180deg);
      }
    }
  }

  .guide-variant-header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    padding: var(--space-xs) var(--space);
    cursor: pointer;
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }

    &:hover {
      background-color: var(--clr-grey-50);
    }
  }

  .guide-variant-heading-group {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;

    [data-guide-variant-summary] {
      overflow: hidden;
      color: var(--font-clr-muted);
      font-size: var(--font-size-xs);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .guide-variant-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--space-xs);
  }

  .guide-variant-fields {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
    gap: var(--space-sm);
    padding: 0 var(--space) var(--space);
    border-top: 1px solid var(--clr-border);

    .form-group {
      padding-top: var(--space-sm);
    }

    textarea {
      min-height: 4.5rem;
      padding: 6px var(--space-xs);
      font-size: var(--font-size-sm);
    }
  }

  .guide-variant-wide-field {
    grid-column: 1 / -1;
  }
}

.guide-tag-category-modal,
.guide-tag-modal {
  width: min(90vw, 32rem);
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
}

@media (max-width: 1000px) {
  .tag-type-island {
    .tag-type-island-header button span,
    .guide-tag-category-actions span {
      display: none;
    }
  }
  .guide-gallery {
    .guide-gallery-controls {
      grid-template-columns: 1fr;
    }

    .guide-gallery-intro-icon {
      display: none;
    }
  }

  .guide-admin {
    .guide-admin-summary {
      align-items: stretch;
      flex-direction: column;
    }

    .guide-admin-filter-controls {
      grid-template-columns: 1fr;
    }
  }

  .guide-resource-modal {
    width: calc(100vw - var(--space));

    .guide-variant-section-header {
      align-items: stretch;
      flex-direction: column;
    }

    .guide-variant-fields {
      grid-template-columns: 1fr;

      .guide-variant-wide-field {
        grid-column: 1;
      }
    }
  }
}