/* ==================================================================================================
   Local domain (Phase 8)
   Organisations, verification, events, local feed, hub, search.
   Reuses existing components: card, badge, button, form-field, admin-panel-card, admin-dl, admin-breadcrumb.
   ================================================================================================== */

/* ---- Local hub -------------------------------------------------------------------------------- */

.local-hub {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.local-hub__header {
    margin-bottom: var(--space-5);
}

.local-hub__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.local-hub__intro {
    color: var(--colour-ink-quiet);
    margin: 0;
    max-width: var(--measure);
}

.local-hub__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.local-hub__section {
    margin-bottom: var(--space-6);
}

.local-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.local-hub__location {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: 0;
    margin-bottom: var(--space-5);
}

.local-hub__location-current {
    color: var(--colour-ink-quiet);
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
}

.local-hub__location-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.local-hub__location-actions {
    margin-top: var(--space-2);
}

.local-hub__organisations {
    margin-bottom: var(--space-5);
}

.local-hub__org-actions {
    margin-top: var(--space-4);
}

/* ---- Local org list (hub) -------------------------------------------------------------------- */

.local-org-list {
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.local-org-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-top: var(--border-width) solid var(--colour-border);
}

.local-org-list__item:first-child {
    border-top: 0;
}

.local-org-list__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 1 1 12rem;
    color: inherit;
    text-decoration: none;
}

.local-org-list__link:hover .local-org-list__name,
.local-org-list__link:focus-visible .local-org-list__name {
    color: var(--colour-primary);
    text-decoration: underline;
}

.local-org-list__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.local-org-list__name {
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.local-org-list__meta {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.local-org-list__role {
    margin-inline-start: auto;
}

/* ---- Local feed page (two-column layout) ----------------------------------------------------- */

.local-feed-page {
    display: grid;
    grid-template-columns: 1fr min(20rem, 100%);
    gap: var(--space-6);
    max-width: 64rem;
    margin-inline: auto;
    padding-top: var(--space-2);
    align-items: start;
}

.local-feed-page__main {
    min-width: 0;
    max-width: 42rem;
}

.local-feed-page__header {
    margin-bottom: var(--space-5);
}

.local-feed-page__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.local-feed-page__location {
    color: var(--colour-ink-quiet);
    margin: 0;
    font-size: var(--text-sm);
}

.local-feed__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.local-feed-page__sidebar {
    position: sticky;
    top: var(--space-6);
}

.local-feed-page__sidebar-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-top: 0;
    margin-bottom: var(--space-4);
}

.local-feed-page__events {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.local-feed-page__events-more {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
}

.local-feed-page__events-empty {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    margin: 0;
}

/* Responsive: sidebar drops below on narrow screens. */
@media (max-width: 640px) {
    .local-feed-page {
        grid-template-columns: 1fr;
    }

    .local-feed-page__sidebar {
        position: static;
    }
}

/* ---- Local feed (standalone header) ---------------------------------------------------------- */

.local-feed__header {
    margin-bottom: var(--space-5);
}

.local-feed__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.local-feed__intro {
    color: var(--colour-ink-quiet);
    margin: 0;
}

/* ---- Local search ----------------------------------------------------------------------------- */

.local-search {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.local-search__header {
    margin-bottom: var(--space-5);
}

.local-search__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.local-search__intro {
    color: var(--colour-ink-quiet);
    margin: 0;
    max-width: var(--measure);
}

.local-search__form {
    margin-bottom: var(--space-5);
}

/* The joined bar: input, type select, and button in one border. Same pattern as the social
   search box — one border around the group, individual controls lose their own edges. */
.local-search__box {
    display: flex;
    align-items: stretch;
    max-width: 36rem;

    background-color: var(--colour-surface);
    border: var(--border-width) solid var(--colour-border-strong);
    border-radius: var(--radius-md);

    transition: border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing);
}

.local-search__box:hover {
    border-color: var(--colour-border-focus);
}

.local-search__box:focus-within {
    border-color: var(--colour-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--colour-focus) 40%, transparent);
}

.local-search__box .local-search__input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    min-height: 3rem;

    border: 0;
    border-radius: 0;
    background-color: transparent;
}

.local-search__box .local-search__input:focus,
.local-search__box .local-search__input:focus-visible {
    outline: none;
}

/* The type select sits between input and button, separated by subtle dividers. */
.local-search__type {
    min-height: 3rem;
    border: 0;
    border-inline-start: 1px solid var(--colour-border);
    border-radius: 0;
    background-color: transparent;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
    cursor: pointer;
}

.local-search__type:focus {
    outline: none;
}

.local-search__submit {
    margin-block: 0.3rem;
    margin-inline: 0 var(--space-2);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.local-search__results {
    margin-top: var(--space-5);
}

.local-search__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.local-search__empty {
    color: var(--colour-ink-quiet);
    text-align: center;
    padding: var(--space-6);
}

/* ---- Local restricted (adult-only page for minors) -------------------------------------------- */

.local-restricted__card {
    max-width: 600px;
    margin: var(--space-8) auto;
    text-align: center;
}

/* ---- Organisation rows (search results, directory) -------------------------------------------- */

.org-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.org-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    background-color: var(--colour-surface);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-fast) var(--easing), box-shadow var(--duration-fast) var(--easing);
}

.org-row:hover {
    border-color: var(--colour-border-strong);
    box-shadow: var(--shadow-md);
}

.org-row__link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
    flex: 1 1 16rem;
    color: inherit;
    text-decoration: none;
}

.org-row__identity {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--space-1);
}

.org-row__name {
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-row__link:hover .org-row__name,
.org-row__link:focus-visible .org-row__name {
    color: var(--colour-primary);
    text-decoration: underline;
}

.org-row__handle {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-row__description {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: var(--leading-body);
}

.org-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
}

.org-row__type {
    flex-shrink: 0;
}

.org-row__place {
    white-space: nowrap;
}

.org-row__count {
    white-space: nowrap;
}

/* ---- Follower rows ---------------------------------------------------------------------------- */

.follower-rows {
    display: grid;
    gap: var(--space-4);
}

.follower-rows__item {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

/* ---- Event card (listings) -------------------------------------------------------------------- */

.event-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background-color: var(--colour-surface);
    border: var(--border-width) solid var(--colour-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.event-card__title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: 0;
}

.event-card__link {
    color: inherit;
    text-decoration: none;
}

.event-card__link:hover,
.event-card__link:focus-visible {
    color: var(--colour-primary);
    text-decoration: underline;
}

.event-card__meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
}

.event-card__status {
    font-size: var(--text-xs);
}

.event-card__when,
.event-card__host,
.event-card__place,
.event-card__online,
.event-card__attendance {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
}

.event-card--cancelled {
    opacity: 0.7;
}

/* ---- Local events page ------------------------------------------------------------------------ */

.local-events {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.local-events__header {
    margin-bottom: var(--space-5);
}

.local-events__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.local-events__intro {
    color: var(--colour-ink-quiet);
    margin: 0 0 var(--space-3);
    max-width: var(--measure);
}

.local-events__actions {
    margin-top: var(--space-4);
}

.local-events__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-4);
}

/* ---- Organisation page ------------------------------------------------------------------------ */

.org-page {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

/* Like the personal profile header, the card does not clip: any menu on the bar opens over
   the card, so the cover rounds its own upper corners instead. */
.org-page__header {
    margin-bottom: var(--space-5);
    padding: 0;
}

/* The cover banner: the logo and the organisation's name sit on the picture, the counters ride
   beside them as quiet chips. Without a cover the same row draws on the plain surface — the
   `--plain` modifier lifts the scrim and returns ink and surface colours. */
.org-page__cover {
    position: relative;
    aspect-ratio: 3 / 1;
    background: var(--colour-surface-sunken);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.org-page__cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* The scrim keeps white text readable on any picture; it fades upward so the top of the
   picture stays clear. */
.org-page__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 14, 22, 0.65), rgba(10, 14, 22, 0) 60%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    pointer-events: none;
}

.org-page__header--plain .org-page__cover::after {
    content: none;
}

.org-page__cover-bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-2) var(--space-2);
    padding: 0 var(--space-2);
}

/* The logo hangs half out of the cover into the bar below, like the avatar on a personal
   profile header. */
.org-page__logo {
    position: relative;
    z-index: 2;
    margin-bottom: calc(-1 * var(--space-6));
    border-radius: var(--radius-full);
    background: var(--colour-surface);
    box-shadow: 0 0 0 4px var(--colour-surface);
}

.org-page__name {
    margin: 0 0 var(--space-2);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: #fff;
    text-shadow: 0 1px 10px rgba(10, 14, 22, 0.55);
    overflow-wrap: break-word;
    min-width: 0;
}

.org-page__header--plain .org-page__name {
    color: var(--colour-ink);
    text-shadow: none;
}

.org-page__counts {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3) auto;
}

.org-page__chip {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: rgba(10, 14, 22, 0.45);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: var(--text-sm);
    white-space: nowrap;
}

a.org-page__chip:hover {
    background: rgba(10, 14, 22, 0.6);
    color: #fff;
}

.org-page__header--plain .org-page__chip {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    color: var(--colour-ink);
    backdrop-filter: none;
}

.org-page__header--plain a.org-page__chip:hover {
    background: var(--colour-surface-sunken);
}

/* The white bar under the cover mirrors the personal profile header: the identity clears the
   logo's lower half at the leading edge, the controls take the trailing edge and wrap to a row
   of their own when the bar gets narrow. */
.org-page__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2) var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-2);
}

.org-page__identity {
    margin-inline-start: calc(4.5rem + var(--space-4));
    flex: 1;
    min-width: 0;
}

.org-page__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
    padding-top: var(--space-1);
}

.org-page__handle {
    margin: 0 0 var(--space-1);
    color: var(--colour-ink);
    font-weight: var(--weight-medium);
}

.org-page__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}

.org-page__suspended {
    margin: var(--space-2) 0 0;
    color: var(--colour-danger);
}

@media (max-width: 30rem) {
    .org-page__identity {
        margin-inline-start: 0;
    }

    .org-page__bar {
        padding-top: calc(2.75rem + var(--space-2));
    }

    .org-page__counts {
        margin-inline-start: 0;
    }
}

.org-page__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.org-page__meta {
    color: var(--colour-ink-quiet);
    margin-bottom: var(--space-3);
}

.org-page__badge {
    margin-top: var(--space-2);
}

.org-page__controls .org-page__pending-note {
    margin: 0;
    flex-basis: 100%;
}

.org-page__section {
    margin-top: var(--space-6);
}

.org-page__timeline {
    margin-top: var(--space-4);
}

.org-page__events {
    margin-top: var(--space-4);
}

/* ---- Organisation followers ------------------------------------------------------------------- */

.org-followers__list {
    margin-top: var(--space-4);
}

/* ---- Organisation create/settings/members/verification ---------------------------------------- */

.org-create,
.org-settings,
.org-members,
.org-verification {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.org-create__intro,
.org-settings__intro,
.org-members__intro,
.org-verification__intro {
    color: var(--colour-ink-quiet);
    margin-bottom: var(--space-5);
}

.org-form__section {
    margin-bottom: var(--space-5);
}

.org-settings__section {
    margin-bottom: var(--space-6);
}

.org-settings__header {
    margin-bottom: var(--space-5);
}

.org-settings__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-2);
}

.org-settings__back {
    margin: 0;
}

/* The cover card on the settings page: a banner-shaped preview above the upload controls, the
   same shape the profile edit page draws for its own cover. */
.org-cover {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.org-cover__box {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--colour-border);
    background: var(--colour-surface-sunken);
}

.org-cover__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The banner an organisation without a cover sees: the sunken surface, so the block keeps its
   shape and the upload controls stay where they are. */
.org-cover__empty {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--colour-surface-sunken);
}

.org-cover__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--colour-surface) 60%, transparent);
    opacity: 0;
    transition: opacity var(--duration-base) var(--easing);
    pointer-events: none;
}

.org-cover__box.is-uploading .org-cover__loading {
    opacity: 1;
}

.org-cover__controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.org-cover__upload {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.org-cover__hint {
    margin-top: var(--space-2);
}

/* The cards stand under one another, not on one another: each later section earns its own space. */
.org-settings__logo,
.org-settings__cover,
.org-settings__danger {
    margin-top: var(--space-6);
}

.org-settings__danger-text {
    color: var(--colour-ink-quiet);
    margin-bottom: var(--space-4);
}

.org-members__section {
    margin-bottom: var(--space-6);
}

.org-members__list {
    margin-top: var(--space-4);
}

.org-verification__header {
    margin-bottom: var(--space-5);
}

.org-verification__state {
    margin-bottom: var(--space-6);
}

.org-verification__details {
    margin-top: var(--space-4);
}

.org-verification__none {
    color: var(--colour-ink-quiet);
    font-style: italic;
}

.org-verification__in-flight {
    color: var(--colour-ink-quiet);
    padding: var(--space-4);
    background: var(--colour-surface-sunken);
    border-radius: var(--radius-md);
}

/* ---- Event page (detail) ---------------------------------------------------------------------- */

.event-page {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.event-page__header {
    margin-bottom: var(--space-5);
}

.event-page__title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.event-page__status {
    display: inline-block;
    margin-top: var(--space-2);
}

.event-page__status--cancelled {
    background: var(--colour-error);
    color: white;
}

.event-page__cancelled-note {
    color: var(--colour-error);
    margin-top: var(--space-2);
}

.event-page__host {
    color: var(--colour-ink-quiet);
    margin-bottom: var(--space-3);
}

.event-page__details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3) var(--space-4);
    margin: var(--space-5) 0;
}

.event-page__description {
    margin: var(--space-5) 0;
    line-height: var(--leading-relaxed);
}

.event-page__rsvp {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--colour-border);
}

.event-page__section-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}

.event-page__rsvp-actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.event-page__rsvp-state {
    margin-top: var(--space-3);
    color: var(--colour-ink-quiet);
}

/* ---- Event create/edit ------------------------------------------------------------------------ */

.event-create,
.event-edit {
    max-width: 42rem;
    margin-inline: auto;
    padding-top: var(--space-2);
}

.event-create__header,
.event-edit__header {
    margin-bottom: var(--space-5);
}

.event-create__title,
.event-edit__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-top: 0;
    margin-bottom: var(--space-3);
}

.event-edit__back {
    margin-bottom: var(--space-4);
}

.event-form__actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.event-form__field {
    margin-bottom: var(--space-4);
}

.event-form__hint {
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
    margin-top: var(--space-1);
}

/* ---- Admin verification queue ----------------------------------------------------------------- */

.admin-queue-intro {
    color: var(--colour-ink-quiet);
    margin-bottom: var(--space-5);
}

.verification-queue {
    display: grid;
    gap: var(--space-5);
}

.verification-queue__item {
    margin-bottom: 0;
}

.verification-queue__meta {
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.verification-queue__decisions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* ---- Admin table inline forms ----------------------------------------------------------------- */

.admin-table__form {
    display: inline;
}