/* Festival Search, Cards, Detail, Forms, and shared components */

/* Registered custom property for animated search border */
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@layer components {
  /* Search section — animated gradient border */
  .festival-search {
    --border-angle: 0deg;

    display: flex;
    flex-direction: column;
    gap: var(--block-space);
    padding: var(--block-space-l);
    background: var(--color-surface);
    border-radius: 12px;
    position: relative;

    border: 1.5px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
      linear-gradient(var(--color-surface), var(--color-surface)),
      conic-gradient(from var(--border-angle),
        oklch(var(--lch-flare)),
        oklch(var(--lch-golden)),
        oklch(var(--lch-uv)),
        oklch(var(--lch-laser)),
        oklch(var(--lch-flare))
      );
    animation: searchBorderRotate 8s linear infinite;
  }

  @keyframes searchBorderRotate {
    to { --border-angle: 360deg; }
  }

  .festival-search__bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    align-items: stretch;

    & input[type="search"] {
      flex: 1 1 15rem;
      min-width: 0;
      font-size: 1.0625rem;
      padding: 0.75em 1.25em;
      background: var(--color-canvas);
      border-radius: var(--radius-lg);

      &:focus {
        border-color: oklch(var(--lch-flare));
        box-shadow: 0 0 0 3px oklch(var(--lch-flare) / 0.15), 0 0 20px oklch(var(--lch-flare) / 0.08);
      }
    }
  }

  .festival-search__nearby {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    padding: 0.5em 1.125em;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-link);
    background: transparent;
    border: 1px solid var(--color-link);
    border-radius: var(--radius-lg);
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms ease, box-shadow 200ms ease;

    &:hover {
      background: color-mix(in oklch, var(--color-link) 8%, transparent);
      box-shadow: 0 0 12px oklch(var(--lch-flare) / 0.15);
    }

    & svg { flex-shrink: 0; }
  }

  .festival-search__nearby--active {
    color: oklch(100% 0 0);
    background: oklch(var(--lch-flare));
    border-color: oklch(var(--lch-flare));

    &:hover {
      background: oklch(var(--lch-flare));
      filter: brightness(1.1);
      box-shadow: 0 0 16px oklch(var(--lch-flare) / 0.3);
    }
  }

  .festival-search__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);

    & > * {
      flex: 1;
      min-width: 8rem;
    }

    & .field {
      margin-block-end: 0;
    }
  }

  .filter-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    margin-block-end: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Nearby active indicator */
  .nearby-indicator {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    padding: var(--block-space-s) var(--inline-space);
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(var(--lch-flare));
    background: color-mix(in oklch, oklch(var(--lch-flare)) 6%, var(--color-surface));
    border-radius: var(--radius);
    margin-block-start: calc(-1 * var(--block-space-s));

    & svg { flex-shrink: 0; }

    & a {
      color: var(--color-ink-muted);
      font-weight: 400;
      font-size: 0.75rem;
      margin-inline-start: auto;
    }
  }

  /* Festival card — poster-first with gradient overlay */
  .festival-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 1px 3px oklch(0% 0 0 / 0.1);
    transition: translate 200ms ease, box-shadow 200ms ease;

    /* Stagger fade-in */
    animation: cardFadeIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;

    &:nth-child(1) { animation-delay: 0.05s; }
    &:nth-child(2) { animation-delay: 0.1s; }
    &:nth-child(3) { animation-delay: 0.15s; }
    &:nth-child(4) { animation-delay: 0.2s; }
    &:nth-child(5) { animation-delay: 0.25s; }
    &:nth-child(6) { animation-delay: 0.3s; }

    &:hover {
      translate: 0 -3px;
      box-shadow: 0 12px 32px oklch(0% 0 0 / 0.2);
    }
  }

  /* Full-card clickable link */
  .festival-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1;
  }

  @keyframes cardFadeIn {
    from {
      opacity: 0;
      translate: 0 1rem;
    }
  }

  /* Media container — relative parent for all overlay elements */
  .festival-card__media {
    position: relative;

    /* Gradient overlay for text readability */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, oklch(0% 0 0 / 0.75) 0%, oklch(0% 0 0 / 0.25) 40%, transparent 60%);
      pointer-events: none;
    }
  }

  .festival-card__poster {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
  }

  .festival-card__poster--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    color: oklch(100% 0 0);
    font-size: 2.5rem;
    font-weight: 700;
    font-family: "Outfit", system-ui, sans-serif;
  }

  /* Name overlay — bottom of poster on top of gradient */
  .festival-card__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--block-space) var(--inline-space-l);
    z-index: 1;
  }

  .festival-card__name {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.25;
    text-wrap: balance;
    color: oklch(100% 0 0);
    text-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
  }

  /* Bookmark button — top-right corner of poster */
  .festival-card__bookmark {
    position: absolute;
    top: var(--block-space-s);
    right: var(--inline-space-s);
    z-index: 2;
  }

  /* Distance badge — top-left corner of poster */
  .festival-card__distance {
    position: absolute;
    top: var(--block-space-s);
    left: var(--inline-space-s);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25ch;
    padding: 0.25em 0.625em;
    font-size: 0.75rem;
    font-weight: 600;
    color: oklch(100% 0 0);
    background: oklch(0% 0 0 / 0.5);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-pill);
  }

  .festival-card__body {
    padding: var(--block-space-s) var(--inline-space-l) var(--block-space);
  }

  .festival-card__meta {
    color: var(--color-ink-muted);
    font-size: 0.875rem;
    margin-block: 0.25rem;
  }

  .festival-card__dates {
    font-size: 0.875rem;
    margin-block: 0.25rem;
  }

  .festival-card__duration {
    color: var(--color-ink-muted);
  }

  /* Nearby fallback (manual coordinates) */
  .nearby-fallback {
    flex-basis: 100%;
    margin-block-start: var(--block-space-s);
  }

  .nearby-fallback__manual {
    display: flex;
    gap: var(--inline-space-s);
    align-items: center;

    & input {
      width: 8rem;
    }
  }

  .festival-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-start: var(--block-space-s);
  }

  .tag {
    display: inline-block;
    padding: 0.1875em 0.625em;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--color-link) 12%, var(--color-surface));
    color: var(--color-link);
  }

  .bookmarks-page {}

  /* — Festival Hero — */
  .festival-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-block-end: var(--block-space-l);
  }

  .festival-hero__poster {
    width: 100%;
    aspect-ratio: 12 / 5;
    object-fit: cover;
    display: block;
  }

  .festival-hero__poster--placeholder {
    background: linear-gradient(
      135deg,
      oklch(var(--lch-flare)) 0%,
      oklch(var(--lch-uv)) 50%,
      oklch(var(--lch-laser)) 100%
    );
  }

  .festival-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      oklch(0% 0 0 / 0.88) 0%,
      oklch(0% 0 0 / 0.55) 35%,
      oklch(0% 0 0 / 0.18) 65%,
      transparent 100%
    );
    pointer-events: none;
  }

  .festival-hero__content {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--inline-space-l);
    padding: 3rem var(--inline-space-l) var(--block-space-l);
  }

  .festival-hero__info {
    flex: 1;
    min-width: 0;
  }

  .festival-hero__name {
    margin: 0 0 0.375rem;
    font-size: clamp(1.5rem, 4.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    color: oklch(100% 0 0);
    text-shadow: 0 2px 12px oklch(0% 0 0 / 0.5);
    text-wrap: balance;
    letter-spacing: -0.025em;
  }

  .festival-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25ch;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: system-ui, sans-serif;
    padding: 0.15em 0.5em;
    border-radius: var(--radius);
    background: color-mix(in oklch, oklch(var(--lch-laser)) 20%, transparent);
    color: oklch(var(--lch-laser));
    vertical-align: middle;
    margin-inline-start: 0.5ch;
    letter-spacing: 0;
  }

  .festival-hero__meta {
    display: flex;
    align-items: center;
    gap: 0.5ch;
    margin: 0 0 0.125rem;
    font-size: 0.9375rem;
    color: oklch(92% 0 0 / 0.85);
    text-shadow: 0 1px 6px oklch(0% 0 0 / 0.4);

    & svg {
      flex-shrink: 0;
      opacity: 0.7;
    }
  }

  .festival-hero__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
  }

  /* Hero icon buttons (share, bookmark) */
  .hero-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid oklch(100% 0 0 / 0.15);
    border-radius: 50%;
    background: oklch(0% 0 0 / 0.35);
    backdrop-filter: blur(8px);
    color: oklch(100% 0 0);
    cursor: pointer;
    transition: background 150ms ease, scale 150ms ease, border-color 150ms ease;

    &:hover {
      background: oklch(0% 0 0 / 0.55);
      border-color: oklch(100% 0 0 / 0.3);
      scale: 1.08;
    }
  }

  .hero-icon-btn--active {
    color: oklch(var(--lch-golden));
    border-color: oklch(var(--lch-golden) / 0.3);
  }

  .share-btn--copied {
    background: oklch(var(--lch-laser) / 0.7) !important;
    border-color: oklch(var(--lch-laser) / 0.5) !important;
  }

  .festival-hero__bookmark {
    & .bookmark-btn {
      width: 2.75rem;
      height: 2.75rem;
      border: 1px solid oklch(100% 0 0 / 0.15);
      background: oklch(0% 0 0 / 0.35);
      backdrop-filter: blur(8px);

      &:hover {
        background: oklch(0% 0 0 / 0.55);
        border-color: oklch(100% 0 0 / 0.3);
        scale: 1.08;
      }
    }

    & .bookmark-btn--active {
      border-color: oklch(var(--lch-golden) / 0.3);
    }
  }

  /* — Action Tiles — */
  .action-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    margin-block-end: 3rem;
  }

  .action-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.25rem var(--inline-space);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color 200ms ease, translate 200ms ease, box-shadow 200ms ease, background 200ms ease;

    & svg {
      color: oklch(var(--lch-flare));
      transition: scale 200ms ease, color 200ms ease;
    }

    &:hover {
      border-color: oklch(var(--lch-flare) / 0.4);
      background: color-mix(in oklch, var(--color-surface) 80%, oklch(var(--lch-flare) / 0.05));
      translate: 0 -3px;
      box-shadow:
        0 8px 24px oklch(0% 0 0 / 0.25),
        0 0 0 1px oklch(var(--lch-flare) / 0.08);

      & svg {
        scale: 1.12;
        color: oklch(var(--lch-golden));
      }
    }
  }

  .action-tile__label {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.01em;
  }

  .festival-detail {}

  /* — Festival Sections — */
  .festival-section {
    margin-block-end: 3rem;

    & h2 {
      font-size: 1.25rem;
      font-weight: 700;
      margin-block-end: var(--block-space);
      letter-spacing: -0.01em;
    }

    & p {
      max-width: 65ch;
    }
  }

  .festival-section--tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }

  /* Festival detail (kept for manage/admin sections) */
  .festival-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    align-items: center;
  }

  /* Bookmark toggle */
  .bookmark-toggle {
    display: inline;
  }

  .bookmark-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: oklch(0% 0 0 / 0.45);
    backdrop-filter: blur(4px);
    color: oklch(100% 0 0);
    cursor: pointer;
    transition: background 150ms ease, scale 150ms ease;

    &:hover {
      background: oklch(0% 0 0 / 0.65);
      scale: 1.1;
    }
  }

  .bookmark-btn--active {
    color: oklch(var(--lch-golden));
    background: oklch(0% 0 0 / 0.55);

    &:hover {
      background: oklch(0% 0 0 / 0.7);
    }
  }

  .festival-detail__map {
    height: 20rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    overflow: hidden;
  }

  /* Badges */
  .badge {
    display: inline-block;
    padding: 0.125em 0.5em;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    vertical-align: middle;
  }

  .badge--verified {
    background: color-mix(in oklch, var(--color-positive) 15%, var(--color-surface));
    color: var(--color-positive);
  }

  .badge--draft {
    background: color-mix(in oklch, var(--color-warning) 15%, var(--color-surface));
    color: var(--color-warning);
  }

  .badge--pending {
    background: color-mix(in oklch, var(--color-link) 15%, var(--color-surface));
    color: var(--color-link);
  }

  .festival-detail__reject-form {
    display: inline-flex;
    gap: var(--inline-space-s);
    align-items: center;
  }

  /* Festival form */
  .festival-form__dates {
    display: flex;
    gap: var(--inline-space);

    & .field {
      flex: 1;
    }
  }

  .festival-form__map-preview {
    height: 14rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-block: var(--block-space);
  }

  .festival-form__poster-preview {
    border-radius: var(--radius);
    margin-block-end: var(--block-space-s);
  }

  .genre-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-s) var(--inline-space);

    & label {
      display: inline-flex;
      align-items: center;
      gap: 0.25ch;
      font-size: 0.875rem;
      cursor: pointer;
      margin: 0;
    }
  }

  /* QR Code */
  .qr-code {
    display: inline-block;

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  .qr-code-page {
    text-align: center;
    padding: var(--block-space-l) 0;
  }

  .qr-code-page__url {
    margin-block: var(--block-space);
    word-break: break-all;
  }

  .qr-code-page__actions {
    display: flex;
    justify-content: center;
    gap: var(--inline-space);
    margin-block: var(--block-space);
  }

  /* User search results */
  .user-search-results {
    list-style: none;
    padding: 0;
    margin: var(--block-space) 0;
  }

  .user-search-results__item {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space-s) 0;
    border-block-end: 1px solid var(--color-border);
  }

  /* Member list */
  .member-list {
    list-style: none;
    padding: 0;
  }

  .member-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--block-space-s) 0;
    border-block-end: 1px solid var(--color-border);

    & span:first-child {
      display: flex;
      align-items: center;
      gap: var(--inline-space-s);
    }
  }

  .member-list__info {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }

  .member-list__avatar-wrap {
    position: relative;
    flex-shrink: 0;
  }

  .member-list__status {
    font-size: 0.8125rem;
    margin: 0;
  }

  /* Online/offline status dot */
  .status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--color-canvas);
  }

  .status-dot--online {
    background: oklch(var(--lch-laser));
  }

  .status-dot--offline {
    background: var(--color-border);
  }

  /* Activity feed */
  .activity-feed {
    list-style: none;
    padding: 0;
  }

  .activity-feed__item {
    display: flex;
    align-items: flex-start;
    gap: var(--inline-space);
    padding: 0.875rem 0;
    border-block-end: 1px solid color-mix(in oklch, var(--color-border) 50%, transparent);

    &:last-child {
      border-block-end: none;
    }
  }

  .activity-feed__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--color-accent) 10%, var(--color-surface));
    border-radius: 50%;
    color: var(--color-accent);

    & svg {
      width: 1rem;
      height: 1rem;
    }
  }

  .activity-feed__body {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }

  .activity-feed__detail {
    font-size: 0.9375rem;
    color: var(--color-ink);

    & strong {
      font-weight: 600;
    }
  }

  .activity-feed__time {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
  }

  /* Invite list */
  .invite-list {
    display: flex;
    flex-direction: column;
  }

  .invite-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--inline-space);
    padding: var(--block-space) 0;
    border-block-end: 1px solid color-mix(in oklch, var(--color-border) 50%, transparent);

    &:last-child {
      border-block-end: none;
    }
  }

  .invite-list__details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .invite-list__url {
    font-size: 0.8125rem;
    word-break: break-all;
    color: var(--color-ink-muted);
  }

  .invite-list__name {
    font-weight: 600;
    color: var(--color-ink);
  }

  .invite-list__meta {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
  }

  .invite-list__actions {
    display: flex;
    gap: var(--inline-space-s);
    flex-shrink: 0;
  }

  /* Group cards */
  .group-card {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
    padding: var(--block-space) var(--inline-space-l);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color 150ms ease, box-shadow 150ms ease;

    &:hover {
      border-color: var(--color-accent);
      box-shadow: 0 0 12px color-mix(in oklch, var(--color-accent) 15%, transparent);
    }
  }

  .group-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .group-card__name {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.125rem;
  }

  .group-card__count {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
  }

  .group-card__festival {
    font-size: 0.875rem;
    color: var(--color-link);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .festival-search {
      animation: none;
      border-color: var(--color-border);
      background-image: none;
      background: var(--color-surface);
    }

    .festival-card {
      animation: none;

      &:hover {
        translate: none;
      }
    }

    .action-tile:hover {
      translate: none;
    }
  }

  /* ── Announcements ── */

  .announcements {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .announcement {
    padding: var(--block-space);
    background: color-mix(in oklch, var(--color-warning) 6%, var(--color-surface));
    border: 1px solid color-mix(in oklch, var(--color-warning) 25%, transparent);
    border-left: 4px solid oklch(var(--lch-golden));
    border-radius: var(--radius);
  }

  .announcement__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0 0 0.375rem;
  }

  .announcement__body {
    font-size: 0.9375rem;
    color: var(--color-ink);
    line-height: 1.5;
    margin: 0 0 0.5rem;
  }

  .announcement__link {
    color: oklch(var(--lch-flare));
    text-decoration: underline;
    font-size: 0.875rem;
  }

  .announcement__time {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
  }

  .announcement__remove {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    background: none;
    border: none;
    cursor: pointer;
    margin-inline-start: 0.5rem;

    &:hover { color: var(--color-negative); }
  }

  .announcement__remove form { display: contents; }
}