/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / CARDS

   Componente estrutural reutilizável para:
   - painéis;
   - resumos;
   - publicações;
   - perfis;
   - conteúdos;
   - resultados;
   - configurações;
   - módulos financeiros;
   - itens interativos.

   Responsabilidades:
   - estrutura base do card;
   - cabeçalho, corpo e rodapé;
   - títulos, textos e metadados;
   - ícones e mídia;
   - ações;
   - variações de tamanho;
   - variações de superfície;
   - variações semânticas;
   - estados interativos;
   - card clicável;
   - card horizontal.

   Não pertencem a este arquivo:
   - botões;
   - formulários;
   - avatares;
   - badges;
   - loaders;
   - empty states;
   - modais;
   - regras específicas de páginas.
   ========================================================== */


/* ==========================================================
   CARD BASE

   As propriedades internas permitem que as variantes alterem
   o card sem repetir toda a estrutura.
   ========================================================== */

   .ayw-card {
    --ayw-card-padding-x: var(--ayw-space-5);
    --ayw-card-padding-y: var(--ayw-space-5);

    --ayw-card-footer-padding-x: var(--ayw-space-5);
    --ayw-card-footer-padding-y: var(--ayw-space-4);

    --ayw-card-radius: var(--ayw-radius-lg);

    --ayw-card-background: var(--ayw-surface);
    --ayw-card-color: var(--ayw-text);

    --ayw-card-border-color: var(--ayw-border);
    --ayw-card-divider-color: var(--ayw-border);

    --ayw-card-shadow: var(--ayw-shadow-sm);

    --ayw-card-accent: var(--ayw-primary);
    --ayw-card-accent-soft: var(--ayw-primary-soft);
    --ayw-card-accent-border: var(--ayw-primary-border);

    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border: 1px solid var(--ayw-card-border-color);
    border-radius: var(--ayw-card-radius);

    background: var(--ayw-card-background);
    color: var(--ayw-card-color);

    box-shadow: var(--ayw-card-shadow);

    transition:
        border-color var(--ayw-transition-base),
        background-color var(--ayw-transition-base),
        box-shadow var(--ayw-transition-base),
        transform var(--ayw-transition-base);
}


/* ==========================================================
   SEÇÕES DO CARD
   ========================================================== */

.ayw-card-header,
.ayw-card-body,
.ayw-card-footer {
    min-width: 0;
}

.ayw-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--ayw-space-3);

    padding:
        var(--ayw-card-padding-y)
        var(--ayw-card-padding-x);

    border-bottom:
        1px solid
        var(--ayw-card-divider-color);
}

.ayw-card-body {
    flex: 1 1 auto;

    padding:
        var(--ayw-card-padding-y)
        var(--ayw-card-padding-x);
}

.ayw-card-footer {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: var(--ayw-space-3);

    padding:
        var(--ayw-card-footer-padding-y)
        var(--ayw-card-footer-padding-x);

    border-top:
        1px solid
        var(--ayw-card-divider-color);

    background: var(--ayw-bg-soft);
}


/* ==========================================================
   ORIENTAÇÃO DAS SEÇÕES
   ========================================================== */

.ayw-card-header-horizontal,
.ayw-card-footer-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.ayw-card-header-start,
.ayw-card-footer-start {
    justify-content: flex-start;
}

.ayw-card-header-center,
.ayw-card-footer-center {
    justify-content: center;
}

.ayw-card-header-end,
.ayw-card-footer-end {
    justify-content: flex-end;
}


/* ==========================================================
   CONTEÚDO PRINCIPAL DO CABEÇALHO
   ========================================================== */

.ayw-card-header-main {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-card-header-actions {
    position: relative;
    z-index: 2;

    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--ayw-space-2);
}


/* ==========================================================
   TÍTULOS E TEXTOS
   ========================================================== */

.ayw-card-eyebrow {
    display: block;

    margin:
        0
        0
        var(--ayw-space-2);

    color: var(--ayw-card-accent);

    font-size: var(--ayw-font-size-xs);
    font-weight: var(--ayw-font-weight-bold);
    line-height: var(--ayw-line-height-tight);
    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.ayw-card-title {
    margin: 0;

    color: var(--ayw-text);

    font-size: var(--ayw-font-size-lg);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: var(--ayw-line-height-tight);
}

.ayw-card-subtitle {
    margin:
        var(--ayw-space-2)
        0
        0;

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-normal);
}

.ayw-card-text {
    margin: 0;

    color: var(--ayw-text-soft);

    font-size: var(--ayw-font-size-sm);
    line-height: var(--ayw-line-height-relaxed);
}

.ayw-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap:
        var(--ayw-space-1)
        var(--ayw-space-3);

    color: var(--ayw-text-muted);

    font-size: var(--ayw-font-size-xs);
    line-height: var(--ayw-line-height-normal);
}

.ayw-card-meta-item {
    display: inline-flex;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-1);
}

.ayw-card-meta-separator::before {
    color: var(--ayw-border-strong);

    content: "•";
}


/* ==========================================================
   CABEÇALHO COM ÍCONE
   ========================================================== */

.ayw-card-heading {
    display: flex;
    align-items: flex-start;

    min-width: 0;

    gap: var(--ayw-space-4);
}

.ayw-card-heading-center {
    align-items: center;
}

.ayw-card-heading-main {
    flex: 1 1 auto;

    min-width: 0;
}


/* ==========================================================
   ÍCONE
   ========================================================== */

.ayw-card-icon {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    overflow: hidden;

    border-radius: var(--ayw-radius-lg);

    background: var(--ayw-card-accent-soft);
    color: var(--ayw-card-accent);

    font-size: 1.35rem;
    line-height: 1;
}

.ayw-card-icon-sm {
    width: 42px;
    height: 42px;

    border-radius: var(--ayw-radius-md);

    font-size: 1.1rem;
}

.ayw-card-icon-lg {
    width: 64px;
    height: 64px;

    border-radius: var(--ayw-radius-xl);

    font-size: 1.6rem;
}

.ayw-card-icon-round {
    border-radius: var(--ayw-radius-pill);
}

.ayw-card-icon svg,
.ayw-card-icon img {
    display: block;

    width: 1em;
    height: 1em;
}

.ayw-card-icon img {
    object-fit: cover;
}


/* ==========================================================
   AÇÕES
   ========================================================== */

.ayw-card-actions {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: var(--ayw-space-2);

    margin-top: var(--ayw-space-5);
}

.ayw-card-actions-start {
    justify-content: flex-start;
}

.ayw-card-actions-center {
    justify-content: center;
}

.ayw-card-actions-end {
    justify-content: flex-end;
}

.ayw-card-actions-between {
    justify-content: space-between;
}


/* ==========================================================
   GRUPOS INTERNOS
   ========================================================== */

.ayw-card-stack {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: var(--ayw-space-4);
}

.ayw-card-stack-sm {
    gap: var(--ayw-space-2);
}

.ayw-card-stack-lg {
    gap: var(--ayw-space-6);
}

.ayw-card-row {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-4);
}

.ayw-card-row-start {
    align-items: flex-start;
}

.ayw-card-row-between {
    justify-content: space-between;
}

.ayw-card-grow {
    flex: 1 1 auto;

    min-width: 0;
}

.ayw-card-shrink {
    flex: 0 0 auto;
}


/* ==========================================================
   DIVISORES INTERNOS
   ========================================================== */

.ayw-card-divider {
    width: 100%;
    height: 1px;

    margin:
        var(--ayw-space-4)
        0;

    border: 0;

    background: var(--ayw-card-divider-color);
}

.ayw-card-divider-flush {
    width: auto;

    margin-right: calc(var(--ayw-card-padding-x) * -1);
    margin-left: calc(var(--ayw-card-padding-x) * -1);
}


/* ==========================================================
   TAMANHOS
   ========================================================== */

.ayw-card-sm {
    --ayw-card-padding-x: var(--ayw-space-4);
    --ayw-card-padding-y: var(--ayw-space-4);

    --ayw-card-footer-padding-x: var(--ayw-space-4);
    --ayw-card-footer-padding-y: var(--ayw-space-3);

    --ayw-card-radius: var(--ayw-radius-md);
}

.ayw-card-lg {
    --ayw-card-padding-x: var(--ayw-space-6);
    --ayw-card-padding-y: var(--ayw-space-6);

    --ayw-card-footer-padding-x: var(--ayw-space-6);
    --ayw-card-footer-padding-y: var(--ayw-space-5);

    --ayw-card-radius: var(--ayw-radius-xl);
}


/* ==========================================================
   PREENCHIMENTO
   ========================================================== */

.ayw-card-fill {
    height: 100%;
}


/* ==========================================================
   SUPERFÍCIES
   ========================================================== */

.ayw-card-soft {
    --ayw-card-background: var(--ayw-bg-soft);
    --ayw-card-shadow: none;
}

.ayw-card-muted {
    --ayw-card-background: var(--ayw-bg-muted);
    --ayw-card-shadow: none;
}

.ayw-card-raised {
    --ayw-card-background: var(--ayw-surface-raised);
    --ayw-card-border-color: transparent;
    --ayw-card-shadow: var(--ayw-shadow-md);
}

.ayw-card-elevated {
    --ayw-card-background: var(--ayw-surface-raised);
    --ayw-card-shadow: var(--ayw-shadow-lg);
}

.ayw-card-flat {
    --ayw-card-shadow: none;
}

.ayw-card-borderless {
    --ayw-card-border-color: transparent;
    --ayw-card-shadow: none;
}

.ayw-card-transparent {
    --ayw-card-background: transparent;
    --ayw-card-border-color: transparent;
    --ayw-card-shadow: none;
}


/* ==========================================================
   CONTROLE DE DIVISÓRIAS
   ========================================================== */

.ayw-card-header-borderless {
    border-bottom-color: transparent;
}

.ayw-card-footer-borderless {
    border-top-color: transparent;
}

.ayw-card-dividers-hidden {
    --ayw-card-divider-color: transparent;
}


/* ==========================================================
   SEÇÕES SEM ESPAÇAMENTO
   ========================================================== */

.ayw-card-header-flush,
.ayw-card-body-flush,
.ayw-card-footer-flush {
    padding: 0;
}

.ayw-card-header-x-flush,
.ayw-card-body-x-flush,
.ayw-card-footer-x-flush {
    padding-right: 0;
    padding-left: 0;
}

.ayw-card-header-y-flush,
.ayw-card-body-y-flush,
.ayw-card-footer-y-flush {
    padding-top: 0;
    padding-bottom: 0;
}


/* ==========================================================
   VARIAÇÕES SEMÂNTICAS

   A cor semântica controla:
   - borda;
   - destaque;
   - ícone;
   - eyebrow;
   - faixa de acento.
   ========================================================== */

.ayw-card-primary {
    --ayw-card-accent: var(--ayw-primary);
    --ayw-card-accent-soft: var(--ayw-primary-soft);
    --ayw-card-accent-border: var(--ayw-primary-border);
    --ayw-card-border-color: var(--ayw-primary-border);
}

.ayw-card-success {
    --ayw-card-accent: var(--ayw-success);
    --ayw-card-accent-soft: var(--ayw-success-soft);
    --ayw-card-accent-border: var(--ayw-success-border);
    --ayw-card-border-color: var(--ayw-success-border);
}

.ayw-card-warning {
    --ayw-card-accent: var(--ayw-warning);
    --ayw-card-accent-soft: var(--ayw-warning-soft);
    --ayw-card-accent-border: var(--ayw-warning-border);
    --ayw-card-border-color: var(--ayw-warning-border);
}

.ayw-card-danger {
    --ayw-card-accent: var(--ayw-danger);
    --ayw-card-accent-soft: var(--ayw-danger-soft);
    --ayw-card-accent-border: var(--ayw-danger-border);
    --ayw-card-border-color: var(--ayw-danger-border);
}

.ayw-card-info {
    --ayw-card-accent: var(--ayw-info);
    --ayw-card-accent-soft: var(--ayw-info-soft);
    --ayw-card-accent-border: var(--ayw-info-border);
    --ayw-card-border-color: var(--ayw-info-border);
}


/* ==========================================================
   SUPERFÍCIES SEMÂNTICAS
   ========================================================== */

.ayw-card-semantic-soft {
    --ayw-card-background: var(--ayw-card-accent-soft);
    --ayw-card-shadow: none;
}

.ayw-card-semantic-soft .ayw-card-footer {
    background: transparent;
}


/* ==========================================================
   FAIXA DE DESTAQUE
   ========================================================== */

.ayw-card-accent-top::before,
.ayw-card-accent-left::before {
    position: absolute;
    z-index: 1;

    background: var(--ayw-card-accent);

    content: "";

    pointer-events: none;
}

.ayw-card-accent-top::before {
    top: 0;
    right: 0;
    left: 0;

    height: 4px;
}

.ayw-card-accent-left::before {
    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;
}


/* ==========================================================
   CARD INTERATIVO
   ========================================================== */

.ayw-card-interactive {
    cursor: pointer;
}

.ayw-card-interactive:hover {
    --ayw-card-border-color: var(--ayw-card-accent-border);
    --ayw-card-shadow: var(--ayw-shadow-md);

    transform: translateY(-3px);
}

.ayw-card-interactive:focus-within {
    --ayw-card-border-color: var(--ayw-card-accent);

    box-shadow:
        0 0 0 3px
        var(--ayw-focus-ring);
}


/* ==========================================================
   CARD SELECIONADO
   ========================================================== */

.ayw-card.is-selected,
.ayw-card[aria-selected="true"] {
    --ayw-card-border-color: var(--ayw-card-accent);

    box-shadow:
        0 0 0 3px
        var(--ayw-focus-ring);
}

.ayw-card.is-selected::before,
.ayw-card[aria-selected="true"]::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;

    height: 4px;

    background: var(--ayw-card-accent);

    content: "";

    pointer-events: none;
}


/* ==========================================================
   CARD CLICÁVEL

   O link deve estar dentro do card.

   O pseudo-elemento amplia a área clicável para todo o card.
   Botões, menus e controles permanecem acima por z-index.
   ========================================================== */

.ayw-card-link {
    color: inherit;

    text-decoration: none;
}

.ayw-card-link:hover {
    color: inherit;
}

.ayw-card-link:focus-visible {
    outline: none;
}

.ayw-card-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;

    border-radius: inherit;

    content: "";

    pointer-events: auto;
}

.ayw-card-link:focus-visible::after {
    box-shadow:
        inset
        0 0 0 3px
        var(--ayw-primary);
}


/* ==========================================================
   ELEMENTOS ACIMA DO LINK SOBREPOSTO
   ========================================================== */

.ayw-card-header-actions,
.ayw-card-footer,
.ayw-card-actions,
.ayw-card-control {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   MÍDIA
   ========================================================== */

.ayw-card-media {
    position: relative;

    width: 100%;
    min-width: 0;

    overflow: hidden;

    background: var(--ayw-bg-muted);
}

.ayw-card-media img,
.ayw-card-media video {
    display: block;

    width: 100%;
    height: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}

.ayw-card-media-square img,
.ayw-card-media-square video {
    aspect-ratio: 1 / 1;
}

.ayw-card-media-portrait img,
.ayw-card-media-portrait video {
    aspect-ratio: 4 / 5;
}

.ayw-card-media-wide img,
.ayw-card-media-wide video {
    aspect-ratio: 21 / 9;
}

.ayw-card-media-auto img,
.ayw-card-media-auto video {
    height: auto;

    aspect-ratio: auto;
}

.ayw-card-media-contain img,
.ayw-card-media-contain video {
    object-fit: contain;
}

.ayw-card-media-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 45%;

    padding: var(--ayw-card-padding-x);

    background:
        linear-gradient(
            to top,
            rgba(2, 13, 27, 0.88),
            rgba(2, 13, 27, 0)
        );

    color: #ffffff;
}


/* ==========================================================
   CARD HORIZONTAL
   ========================================================== */

.ayw-card-horizontal {
    display: grid;
    grid-template-columns:
        minmax(120px, 34%)
        minmax(0, 1fr);
}

.ayw-card-horizontal > .ayw-card-media {
    height: 100%;
}

.ayw-card-horizontal > .ayw-card-media img,
.ayw-card-horizontal > .ayw-card-media video {
    height: 100%;

    aspect-ratio: auto;
}

.ayw-card-horizontal-content {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


/* ==========================================================
   ESTADO DESABILITADO
   ========================================================== */

.ayw-card.is-disabled,
.ayw-card[aria-disabled="true"] {
    opacity: 0.55;

    cursor: not-allowed;

    pointer-events: none;
}


/* ==========================================================
   ESTADO OCUPADO
   ========================================================== */

.ayw-card[aria-busy="true"] {
    cursor: progress;
}


/* ==========================================================
   RESPONSIVIDADE
   ========================================================== */

@media (max-width: 639px) {
    .ayw-card-horizontal {
        grid-template-columns: 1fr;
    }

    .ayw-card-header-horizontal,
    .ayw-card-footer-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .ayw-card-header-actions {
        width: auto;
    }

    .ayw-financial-item-header { display: grid; gap: var(--ayw-space-3); }
    .ayw-financial-amount { justify-items: start; text-align: left; }
    .ayw-financial-metrics { grid-template-columns: 1fr; }
    .ayw-financial-metric { padding: var(--ayw-space-2) 0; border-right: 0; border-bottom: 1px solid var(--ayw-border); }
    .ayw-financial-metric:last-child { border-bottom: 0; }
    .ayw-financial-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ayw-financial-actions .ayw-btn { width: 100%; }

    .ayw-card-header-stack-mobile,
    .ayw-card-footer-stack-mobile {
        flex-direction: column;
        align-items: stretch;
    }

    .ayw-card-header-stack-mobile .ayw-card-header-actions {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .ayw-card {
        --ayw-card-padding-x: var(--ayw-space-6);
        --ayw-card-padding-y: var(--ayw-space-6);

        --ayw-card-footer-padding-x: var(--ayw-space-6);
        --ayw-card-footer-padding-y: var(--ayw-space-4);
    }

    .ayw-card-sm {
        --ayw-card-padding-x: var(--ayw-space-4);
        --ayw-card-padding-y: var(--ayw-space-4);

        --ayw-card-footer-padding-x: var(--ayw-space-4);
        --ayw-card-footer-padding-y: var(--ayw-space-3);
    }

    .ayw-card-lg {
        --ayw-card-padding-x: var(--ayw-space-8);
        --ayw-card-padding-y: var(--ayw-space-8);

        --ayw-card-footer-padding-x: var(--ayw-space-8);
        --ayw-card-footer-padding-y: var(--ayw-space-6);
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-card {
        transition: none;
    }

    .ayw-card-interactive:hover {
        transform: none;
    }
}


/* ==========================================================
   CAPAS EDITORIAIS

   Cards de alto impacto com fotografia, conteúdo sobreposto
   e leitura de progresso. Reutilizáveis em viagens, projetos,
   eventos, coleções e destaques do produto.
   ========================================================== */

.ayw-feature-cover,
.ayw-photo-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-xl);
    background: linear-gradient(135deg, var(--ayw-primary), var(--ayw-text));
    color: #fff;
    box-shadow: var(--ayw-shadow-md);
}

.ayw-feature-cover {
    aspect-ratio: 3.75 / 1;
    min-height: 235px;
}

.ayw-feature-cover.is-placeholder {
    background:
        radial-gradient(circle at 76% 28%, rgba(64, 142, 255, .38), transparent 24%),
        radial-gradient(circle at 58% 92%, rgba(35, 190, 180, .22), transparent 34%),
        linear-gradient(120deg, #071b3b 0%, #0b3974 58%, #0874b9 100%);
}

.ayw-feature-cover.is-placeholder::before {
    position: absolute;
    right: 8%;
    top: 17%;
    width: clamp(110px, 15vw, 190px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    content: "✈";
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .18);
    font-size: clamp(3rem, 6vw, 5rem);
    transform: rotate(-12deg);
}

.ayw-feature-cover-media,
.ayw-photo-card-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ayw-cover-x, 50%) var(--ayw-cover-y, 30%);
}

.ayw-feature-cover::after,
.ayw-photo-card::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(90deg, rgba(5, 18, 41, 0.94) 0%, rgba(5, 18, 41, 0.72) 44%, rgba(5, 18, 41, 0.1) 100%);
}

.ayw-feature-cover-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--ayw-space-2);
    min-height: inherit;
    padding: clamp(var(--ayw-space-5), 2.5vw, var(--ayw-space-8));
}

.ayw-feature-cover-title,
.ayw-photo-card-title {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1.02;
}

.ayw-feature-cover-title {
    max-width: 780px;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.ayw-feature-cover-heading {
    display: grid;
    gap: var(--ayw-space-2);
    margin-top: var(--ayw-space-2);
    padding-right: min(25vw, 250px);
}

.ayw-feature-cover-status {
    width: fit-content;
}

.ayw-feature-cover-meta,
.ayw-photo-card-meta,
.ayw-feature-cover-actions,
.ayw-cover-metrics,
.ayw-avatar-stack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ayw-space-3);
}

.ayw-cover-metrics {
    max-width: 440px;
    padding-top: 0;
    border-top: 0;
}

.ayw-feature-cover-budget {
    position: absolute;
    left: clamp(var(--ayw-space-5), 2.5vw, var(--ayw-space-8));
    bottom: clamp(var(--ayw-space-5), 2.5vw, var(--ayw-space-8));
    display: grid;
    gap: var(--ayw-space-2);
    width: min(44%, 440px);
}

.ayw-cover-metric {
    display: grid;
    gap: var(--ayw-space-1);
    min-width: 130px;
}

.ayw-cover-metric-label {
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--ayw-font-size-xs);
}

.ayw-cover-metric-value {
    color: #fff;
    font-size: var(--ayw-font-size-lg);
    font-weight: var(--ayw-font-weight-bold);
}

.ayw-budget-progress {
    width: min(100%, 440px);
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: var(--ayw-radius-pill);
    background: rgba(255, 255, 255, 0.28);
    accent-color: var(--ayw-primary);
}

.ayw-budget-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.28);
}

.ayw-budget-progress::-webkit-progress-value {
    border-radius: inherit;
    background: var(--ayw-primary);
}

.ayw-budget-progress::-moz-progress-bar {
    border-radius: inherit;
    background: var(--ayw-primary);
}

.ayw-photo-card {
    min-height: 0;
    background: var(--ayw-surface);
    color: var(--ayw-text);
    transition: transform var(--ayw-transition-base), box-shadow var(--ayw-transition-base);
}

.ayw-photo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ayw-shadow-lg);
}

.ayw-photo-card::after {
    display: none;
}

.ayw-photo-card-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    aspect-ratio: 1.95 / 1;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0a234a, #0b6ffb);
}

.ayw-photo-card-visual.is-placeholder::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    content: "";
    background:
        radial-gradient(circle at 78% 20%, rgba(255, 255, 255, .18), transparent 20%),
        linear-gradient(135deg, #071b3b, #0b579e);
}

.ayw-photo-card-visual.is-placeholder::after {
    background:
        linear-gradient(0deg, rgba(5, 18, 41, .94) 0%, rgba(5, 18, 41, .08) 76%),
        radial-gradient(circle at 76% 34%, transparent 0 38px, rgba(255, 255, 255, .12) 39px 40px, transparent 41px);
}

.ayw-photo-card-visual::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(0deg, rgba(5, 18, 41, 0.94) 0%, rgba(5, 18, 41, 0.08) 76%);
}

.ayw-photo-card-overlay {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--ayw-space-2);
    width: 100%;
    max-width: 100%;
    padding: var(--ayw-space-5);
    color: #fff;
    text-shadow: 0 1px 3px rgba(5, 18, 41, .72);
}

.ayw-photo-card-title {
    color: #fff;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.ayw-photo-card .ayw-photo-card-visual,
.ayw-photo-card .ayw-photo-card-visual:hover {
    color: #fff;
}

.ayw-photo-card-meta {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: var(--ayw-space-3);
    padding-right: var(--ayw-space-2);
    color: rgba(255, 255, 255, .9);
    font-size: var(--ayw-font-size-xs);
}

.ayw-photo-card-date {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ayw-photo-card-meta .ayw-badge-neutral {
    --ayw-badge-border-color: rgba(255, 255, 255, .18);
    --ayw-badge-bg: rgba(15, 23, 42, .58);
    --ayw-badge-color: #fff;
    justify-self: end;
    backdrop-filter: blur(8px);
}

.ayw-photo-card-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ayw-space-4);
    padding: var(--ayw-space-4) var(--ayw-space-5);
    background: var(--ayw-surface);
    color: var(--ayw-text);
}

.ayw-photo-card-budget {
    display: flex;
    align-items: center;
    gap: var(--ayw-space-5);
}

.ayw-photo-card-budget span {
    display: grid;
    gap: var(--ayw-space-1);
    color: var(--ayw-text-muted);
    font-size: var(--ayw-font-size-xs);
}

.ayw-photo-card-budget strong {
    color: var(--ayw-text);
    font-size: var(--ayw-font-size-sm);
}

.ayw-photo-card-more {
    display: flex;
    justify-content: center;
    padding-top: var(--ayw-space-5);
}

.ayw-avatar-stack {
    flex-wrap: nowrap;
    gap: 0;
}

.ayw-avatar-stack .ayw-avatar {
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border: 2px solid #fff;
}

.ayw-avatar-stack .ayw-avatar:first-child {
    margin-left: 0;
}

.ayw-feature-cover a,
.ayw-photo-card a {
    color: inherit;
}

.ayw-feature-cover .ayw-btn-primary,
.ayw-photo-card .ayw-btn-primary {
    color: var(--ayw-btn-color, #fff);
}

.ayw-feature-cover .ayw-btn-secondary {
    --ayw-btn-color: var(--ayw-primary);
    --ayw-btn-color-hover: var(--ayw-primary-hover);
    --ayw-btn-color-active: var(--ayw-primary-active);
    --ayw-btn-bg: #fff;
    --ayw-btn-bg-hover: var(--ayw-primary-soft);
    --ayw-btn-bg-active: var(--ayw-primary-soft);
    color: var(--ayw-primary);
}

.ayw-feature-cover-actions {
    position: absolute;
    right: clamp(var(--ayw-space-5), 2.5vw, var(--ayw-space-8));
    bottom: clamp(var(--ayw-space-5), 2.5vw, var(--ayw-space-8));
}

@media (min-width: 640px) and (max-width: 1023px) {
    .ayw-feature-cover {
        aspect-ratio: 3.4 / 1;
        min-height: 210px;
    }

    .ayw-feature-cover-content {
        padding: var(--ayw-space-5);
    }

    .ayw-feature-cover-heading {
        margin-top: 0;
    }

    .ayw-feature-cover-budget {
        left: var(--ayw-space-5);
        bottom: var(--ayw-space-5);
    }

    .ayw-feature-cover-actions {
        right: var(--ayw-space-5);
        bottom: var(--ayw-space-5);
    }
}

@media (max-width: 639px) {
    .ayw-feature-cover {
        aspect-ratio: auto;
        min-height: 360px;
    }

    .ayw-feature-cover::after {
        background: linear-gradient(0deg, rgba(5, 18, 41, 0.96) 0%, rgba(5, 18, 41, 0.2) 100%);
    }

    .ayw-feature-cover-actions .ayw-btn {
        width: 100%;
    }

    .ayw-feature-cover-heading {
        padding-right: 0;
    }

    .ayw-feature-cover-actions {
        position: static;
        margin-top: auto;
    }

    .ayw-feature-cover-budget {
        position: static;
        width: 100%;
        margin-top: auto;
    }
}


/* ==========================================================
   JORNADA E ROTEIRO

   Estruturas editoriais para navegação interna, dias e
   atividades. Fazem parte do sistema e podem ser reutilizadas
   em agendas, eventos e planejamentos.
   ========================================================== */

.ayw-journey-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    margin-bottom: 0;
    padding: 0 var(--ayw-space-3);
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-xl);
    background: var(--ayw-surface);
    box-shadow: var(--ayw-shadow-xs);
    scrollbar-width: none;
}

.ayw-journey-nav-shell { margin-bottom: var(--ayw-space-6); }
.ayw-journey-nav-viewport { position: relative; }
.ayw-journey-nav-arrow { position: absolute; z-index: 4; top: 50%; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--ayw-border); border-radius: var(--ayw-radius-full); background: var(--ayw-surface); box-shadow: var(--ayw-shadow-sm); color: var(--ayw-primary); font-size: 1.75rem; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.ayw-journey-nav-arrow.is-previous { left: .4rem; }
.ayw-journey-nav-arrow.is-next { right: .4rem; }
.ayw-journey-nav-arrow:hover { background: var(--ayw-primary-soft); }
.ayw-journey-nav-arrow[hidden] { display: none; }
.ayw-journey-nav-shell.has-previous .ayw-journey-nav-viewport::before, .ayw-journey-nav-shell.has-next .ayw-journey-nav-viewport::after { position: absolute; z-index: 3; top: 1px; bottom: 1px; width: 4.5rem; pointer-events: none; content: ""; }
.ayw-journey-nav-shell.has-previous .ayw-journey-nav-viewport::before { left: 1px; background: linear-gradient(90deg, var(--ayw-surface) 30%, transparent); border-radius: var(--ayw-radius-xl) 0 0 var(--ayw-radius-xl); }
.ayw-journey-nav-shell.has-next .ayw-journey-nav-viewport::after { right: 1px; background: linear-gradient(270deg, var(--ayw-surface) 30%, transparent); border-radius: 0 var(--ayw-radius-xl) var(--ayw-radius-xl) 0; }
.ayw-journey-nav-hint { display: block; margin-top: var(--ayw-space-2); color: var(--ayw-text-muted); font-size: var(--ayw-font-size-xs); text-align: center; }
.ayw-journey-nav-hint[hidden] { display: none; }

.ayw-journey-nav::-webkit-scrollbar {
    display: none;
}

.ayw-journey-tab {
    position: relative;
    display: inline-flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--ayw-space-2);
    min-width: max-content;
    padding: var(--ayw-space-4) var(--ayw-space-5);
    color: var(--ayw-text-muted);
    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--ayw-transition-fast),
        background-color var(--ayw-transition-fast);
}

.ayw-journey-tab::after {
    position: absolute;
    right: var(--ayw-space-3);
    bottom: -1px;
    left: var(--ayw-space-3);
    height: 3px;
    border-radius: var(--ayw-radius-full) var(--ayw-radius-full) 0 0;
    background: var(--ayw-primary);
    content: "";
    opacity: 0;
    transform: scaleX(.65);
    transition:
        opacity var(--ayw-transition-fast),
        transform var(--ayw-transition-fast);
}

.ayw-journey-tab:hover {
    background: var(--ayw-primary-soft);
    color: var(--ayw-primary);
}

.ayw-journey-tab.is-active {
    color: var(--ayw-primary);
}

.ayw-journey-tab.is-active::after {
    opacity: 1;
    transform: scaleX(1);
}

.ayw-journey-tab.is-disabled {
    color: var(--ayw-text-disabled);
    cursor: not-allowed;
}

.ayw-journey-tab.is-disabled:hover {
    background: transparent;
    color: var(--ayw-text-disabled);
}

.ayw-journey-tab-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
}

.ayw-journey-tab-badge {
    padding: 3px 7px;
    border-radius: var(--ayw-radius-full);
    background: var(--ayw-bg-muted);
    color: var(--ayw-text-disabled);
    font-size: 10px;
    font-weight: var(--ayw-font-weight-bold);
    letter-spacing: .02em;
}

.ayw-place-picker-search { position: relative; }
.ayw-place-picker-search > span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ayw-color-text-muted); z-index: 1; }
.ayw-place-picker-search .ayw-input { padding-left: 42px; }
.ayw-place-picker-results { margin-top: 8px; overflow: hidden; border: 1px solid var(--ayw-color-border); border-radius: 14px; background: var(--ayw-color-surface); box-shadow: 0 16px 38px rgba(15, 23, 42, .12); }
.ayw-place-picker-heading { padding: 9px 14px 6px; color: var(--ayw-color-text-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ayw-place-picker-result { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-top: 1px solid var(--ayw-color-border-soft, #eef2f7); background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ayw-place-picker-result:hover { background: var(--ayw-color-primary-soft, #eff6ff); }
.ayw-place-picker-result > span:nth-child(2) { display: grid; gap: 2px; }
.ayw-place-picker-result small, .ayw-place-picker-selected small { display: block; color: var(--ayw-color-text-muted); }
.ayw-place-picker-pin { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; color: var(--ayw-color-primary); background: var(--ayw-color-primary-soft, #eff6ff); }
.ayw-place-picker-selected { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #bfdbfe; border-radius: 14px; background: #f8fbff; }
.ayw-place-picker-selected > span:nth-child(2) { min-width: 0; flex: 1; }
.ayw-form-details { padding: 12px 14px; border: 1px solid var(--ayw-color-border); border-radius: 14px; }
.ayw-form-details summary { color: var(--ayw-color-text-muted); font-size: .88rem; font-weight: 700; cursor: pointer; }
.ayw-form-details[open] summary { margin-bottom: 14px; }

.ayw-location-trigger { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 5px; padding: 7px 9px; border: 0; border-radius: 10px; background: #f4f8ff; color: var(--ayw-color-text); text-align: left; cursor: pointer; }
.ayw-location-trigger:hover { background: #e9f2ff; color: var(--ayw-color-primary); }
.ayw-location-trigger > span:nth-child(2) { display: grid; min-width: 0; }
.ayw-location-trigger strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.ayw-location-trigger small { overflow: hidden; color: var(--ayw-color-text-muted); text-overflow: ellipsis; white-space: nowrap; }
.ayw-location-chevron { font-size: 1.25rem; }
.ayw-navigation-dialog { width: min(440px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; color: var(--ayw-color-text); box-shadow: 0 24px 70px rgba(15, 23, 42, .25); }
.ayw-navigation-dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px); }
.ayw-navigation-dialog-head { display: flex; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--ayw-color-border); }
.ayw-navigation-options { display: grid; gap: 8px; padding: 14px; }
.ayw-navigation-option { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--ayw-color-border); border-radius: 14px; color: inherit; text-decoration: none; }
.ayw-navigation-option:hover { border-color: #93c5fd; background: #f8fbff; color: var(--ayw-color-primary); }
.ayw-navigation-option > span:nth-child(2) { display: grid; }
.ayw-navigation-option small { color: var(--ayw-color-text-muted); }
.ayw-navigation-option-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eef4ff; color: #2563eb; font-weight: 900; }
.ayw-navigation-option-icon.is-waze { background: #e8fbff; color: #0891b2; }

@media (max-width: 640px) {
  .ayw-place-picker-selected { flex-wrap: wrap; }
  .ayw-place-picker-selected > span:nth-child(2) { flex-basis: calc(100% - 50px); }
}

/* Padrões compartilhados pelas áreas internas da viagem */

.ayw-confirm-card {
    width: min(100%, 620px);
    margin: clamp(var(--ayw-space-8), 10vh, 120px) auto 0;
    text-align: center;
}

.ayw-form-cover {
    display: grid;
    gap: var(--ayw-space-2);
    margin: 0;
}

.ayw-form-cover img {
    width: 100%;
    max-height: 280px;
    object-fit: cover;
    border-radius: var(--ayw-radius-lg);
}

.ayw-form-cover figcaption {
    color: var(--ayw-text-muted);
    font-size: var(--ayw-font-size-xs);
}

.ayw-confirm-card .ayw-card-body {
    align-items: center;
    padding: var(--ayw-space-8);
}

.ayw-confirm-card .ayw-card-actions {
    justify-content: center;
    margin-top: var(--ayw-space-3);
}

.ayw-confirm-icon {
    display: inline-grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: var(--ayw-radius-full);
    font-size: var(--ayw-font-size-xl);
    font-weight: var(--ayw-font-weight-bold);
}

.ayw-confirm-icon-danger {
    background: var(--ayw-danger-soft);
    color: var(--ayw-danger);
}

.ayw-summary-list,
.ayw-record-list,
.ayw-checklist-list,
.ayw-place-list {
    display: grid;
    gap: var(--ayw-space-3);
}

.ayw-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ayw-space-3);
    padding: var(--ayw-space-3) var(--ayw-space-4);
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
    background: var(--ayw-bg-soft);
    color: var(--ayw-text-muted);
    font-size: var(--ayw-font-size-sm);
}

.ayw-summary-row strong {
    color: var(--ayw-text);
}

.ayw-record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ayw-space-5);
    padding: var(--ayw-space-4) 0;
    border-bottom: 1px solid var(--ayw-border);
}

.ayw-record:first-child {
    padding-top: 0;
}

.ayw-record:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ayw-record-main,
.ayw-record-value {
    display: grid;
    gap: var(--ayw-space-2);
    min-width: 0;
}

.ayw-record-value {
    flex: 0 0 auto;
    justify-items: end;
}

.ayw-inline-form {
    display: flex;
    align-items: center;
    gap: var(--ayw-space-2);
}

.ayw-inline-form > :first-child {
    min-width: 0;
    flex: 1 1 auto;
}

.ayw-form-stack,
.ayw-disclosure {
    display: grid;
    gap: var(--ayw-space-4);
}

.ayw-disclosure {
    padding: var(--ayw-space-3);
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
    background: var(--ayw-bg-soft);
}

.ayw-disclosure[hidden] {
    display: none;
}


/* ==========================================================
   COMPROMISSOS FINANCEIROS

   Lista reutilizável para compras, parcelas, cobranças e
   outros compromissos com valor total e calendário.
   ========================================================== */

.ayw-financial-list {
    display: grid;
    gap: var(--ayw-space-3);
    padding: var(--ayw-space-4);
}

.ayw-financial-item {
    display: grid;
    gap: var(--ayw-space-4);
    padding: var(--ayw-space-5);
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-md);
    background: var(--ayw-surface);
    transition: border-color var(--ayw-transition-fast), box-shadow var(--ayw-transition-fast);
}

.ayw-financial-item:hover {
    border-color: var(--ayw-primary-border);
    box-shadow: var(--ayw-shadow-xs);
}

.ayw-financial-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ayw-space-6);
}

.ayw-financial-item-main,
.ayw-financial-amount {
    display: grid;
    gap: var(--ayw-space-1);
    min-width: 0;
}

.ayw-financial-item-main h3 { margin: 0; color: var(--ayw-text); font-size: var(--ayw-font-size-lg); }
.ayw-financial-item-main p { margin: 0; color: var(--ayw-text-muted); font-size: var(--ayw-font-size-xs); }
.ayw-financial-amount { flex: 0 0 auto; justify-items: end; text-align: right; }
.ayw-financial-amount span, .ayw-financial-amount small { color: var(--ayw-text-muted); font-size: var(--ayw-font-size-xs); }
.ayw-financial-amount strong { color: var(--ayw-text); font-variant-numeric: tabular-nums; }

.ayw-financial-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ayw-space-2);
    padding: var(--ayw-space-3);
    border-radius: var(--ayw-radius-sm);
    background: var(--ayw-bg-muted);
}

.ayw-financial-metric { display: grid; gap: var(--ayw-space-1); padding: 0 var(--ayw-space-2); border-right: 1px solid var(--ayw-border); }
.ayw-financial-metric:last-child { border-right: 0; }
.ayw-financial-metric span { color: var(--ayw-text-muted); font-size: var(--ayw-font-size-xs); }
.ayw-financial-metric strong { color: var(--ayw-text); font-size: var(--ayw-font-size-sm); font-variant-numeric: tabular-nums; }

.ayw-financial-schedule { border-top: 1px solid var(--ayw-border); }
.ayw-financial-schedule summary { display: flex; align-items: center; justify-content: space-between; gap: var(--ayw-space-3); padding-top: var(--ayw-space-3); color: var(--ayw-primary); cursor: pointer; font-size: var(--ayw-font-size-sm); font-weight: var(--ayw-font-weight-semibold); }
.ayw-financial-schedule summary::marker { color: var(--ayw-primary); }
.ayw-financial-schedule-list { display: grid; gap: var(--ayw-space-2); padding-top: var(--ayw-space-3); }
.ayw-financial-schedule-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ayw-space-3); padding: var(--ayw-space-2) var(--ayw-space-3); border-radius: var(--ayw-radius-sm); background: var(--ayw-bg-muted); font-size: var(--ayw-font-size-sm); }
.ayw-financial-schedule-row > span { display: flex; flex-wrap: wrap; gap: var(--ayw-space-2); }
.ayw-financial-schedule-row small { color: var(--ayw-text-muted); }
.ayw-financial-note { margin: 0; color: var(--ayw-text-muted); font-size: var(--ayw-font-size-sm); }
.ayw-financial-actions { display: flex; justify-content: flex-end; gap: var(--ayw-space-2); }
.ayw-financial-actions form { margin: 0; }

.ayw-checklist-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--ayw-space-4);
    align-items: start;
    padding: var(--ayw-space-4);
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);
    background: var(--ayw-surface);
}

.ayw-checklist-item.is-done {
    background: var(--ayw-bg-soft);
    opacity: .72;
}

.ayw-checklist-main h3,
.ayw-place-item h3 {
    margin: 0;
    color: var(--ayw-text);
    font-size: var(--ayw-font-size-sm);
}

.ayw-checklist-main p,
.ayw-place-item p {
    margin: 4px 0 0;
    color: var(--ayw-text-muted);
    font-size: var(--ayw-font-size-xs);
}

.ayw-checklist-toggle {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--ayw-success);
    border-radius: var(--ayw-radius-full);
    background: var(--ayw-surface);
    color: var(--ayw-success);
    font: inherit;
    font-weight: var(--ayw-font-weight-bold);
    cursor: pointer;
}

.is-done .ayw-checklist-toggle {
    background: var(--ayw-success);
    color: white;
}

.ayw-map-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: var(--ayw-space-5);
    align-items: stretch;
}

.ayw-grid-sidebar {
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.6fr);
}

.ayw-map-places,
.ayw-map-card {
    min-width: 0;
}

.ayw-map-places .ayw-card-body {
    align-content: start;
    max-height: 70vh;
    overflow: hidden;
}

.ayw-place-list {
    overflow-y: auto;
}

.ayw-place-item {
    display: grid;
    gap: var(--ayw-space-3);
    padding: var(--ayw-space-4);
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);
    cursor: pointer;
    transition: border-color var(--ayw-transition-fast), background-color var(--ayw-transition-fast);
}

.ayw-place-item:hover,
.ayw-place-item:focus-visible {
    border-color: var(--ayw-primary-border);
    background: var(--ayw-primary-soft);
    outline: 0;
}

.ayw-place-item .ayw-card-actions {
    justify-content: flex-start;
}

.ayw-map-card > .ayw-card-body {
    padding: var(--ayw-space-4);
}

.ayw-map-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ayw-space-4);
}

.ayw-map-search {
    position: relative;
    display: flex;
    min-width: min(100%, 420px);
    gap: var(--ayw-space-2);
}

.ayw-map-search .ayw-input {
    min-width: 0;
}

.ayw-search-results {
    position: absolute;
    z-index: 1001;
    top: calc(100% + var(--ayw-space-2));
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid var(--ayw-border);
    border-radius: var(--ayw-radius-lg);
    background: var(--ayw-surface);
    box-shadow: var(--ayw-shadow-lg);
}

.ayw-search-results[hidden] {
    display: none;
}

.ayw-search-result {
    display: grid;
    width: 100%;
    gap: 3px;
    padding: var(--ayw-space-3) var(--ayw-space-4);
    border: 0;
    border-bottom: 1px solid var(--ayw-border);
    background: transparent;
    color: var(--ayw-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ayw-search-result:last-child {
    border-bottom: 0;
}

.ayw-search-result:hover {
    background: var(--ayw-primary-soft);
}

.ayw-search-result span {
    color: var(--ayw-text-muted);
    font-size: var(--ayw-font-size-xs);
}

.ayw-trip-map {
    width: 100%;
    height: min(70vh, 720px);
    min-height: 480px;
    overflow: hidden;
    border-radius: var(--ayw-radius-lg);
}

.ayw-map-day-filter,
.ayw-participant-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ayw-space-3);
}

.ayw-map-day-filter {
    flex-wrap: wrap;
}

.ayw-map-day-filter .ayw-select {
    width: auto;
    min-width: min(100%, 300px);
}

.ayw-participant-row {
    padding-bottom: var(--ayw-space-3);
    border-bottom: 1px solid var(--ayw-border);
}

@media (max-width: 1199px) {
    .ayw-map-layout {
        grid-template-columns: 1fr;
    }

    .ayw-grid-sidebar {
        grid-template-columns: 1fr;
    }

    .ayw-map-places .ayw-card-body {
        max-height: none;
    }

    .ayw-place-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 360px;
    }
}

@media (max-width: 767px) {
    .ayw-journey-nav {
        justify-content: flex-start;
        padding-inline: var(--ayw-space-2);
    }

    .ayw-journey-tab {
        flex: 0 0 auto;
        padding: var(--ayw-space-4);
    }

    .ayw-record,
    .ayw-map-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .ayw-record-value {
        justify-items: start;
    }

    .ayw-inline-form,
    .ayw-map-search {
        width: 100%;
    }

    .ayw-checklist-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ayw-checklist-item > form:last-child {
        grid-column: 2;
    }

    .ayw-place-list {
        grid-template-columns: 1fr;
    }

    .ayw-trip-map {
        height: 55vh;
        min-height: 380px;
    }

    .ayw-participant-row {
        align-items: stretch;
        flex-direction: column;
    }
}