/* ==========================================================================
   GAS Card Component
   ========================================================================== */

/* Base Card
   ========================================================================== */

.gas-card {
    --card-image-height: 200px;
    --card-compact-image-width: 120px;
    --card-header-color: transparent;
    --card-header-height: 4px;

    background: var(--gas-card-bg);
    border-radius: var(--gas-card-radius);
    box-shadow: var(--gas-card-shadow);
    overflow: hidden;
    transition: transform var(--gas-transition-slow), box-shadow var(--gas-transition-slow);
    border: none;
    height: fit-content;
    display: flex;
    flex-direction: column;
    position: relative;
}

.gas-card--equal-height {
    height: 100%;
    min-height: 100%;
}

.gas-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gas-shadow-l);
}

/* Custom Header Band
   ========================================================================== */

.gas-card--custom-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--card-header-height);
    background: var(--card-header-color);
    border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0;
    z-index: 2;
    pointer-events: none;
}

/* Dark Background & Striping
   ========================================================================== */

.gas-card--dark-bg {
    background: var(--gas-bg-surface-alt, #f5f5f7);
}

.gas-card--striped {
    background: var(--gas-bg-surface-alt, #f5f5f7);
}

.gas-card--dark-bg.gas-card--striped {
    background: var(--gas-bg-surface-alt-dark, #eeeef0);
}

/* Card Themes
   ========================================================================== */

.gas-card--default:not(.gas-card--custom-header) {
    background: var(--gas-bg-surface);
}

.gas-card--default.gas-card--dark-bg,
.gas-card--default.gas-card--striped {
    background: var(--gas-bg-surface-alt, #f5f5f7);
}

.gas-card--success { background: linear-gradient(135deg, #f8fff9 0%, var(--gas-bg-surface) 100%); position: relative; }
.gas-card--success:not(.gas-card--custom-header)::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gas-primary); border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0; }

.gas-card--warning { background: linear-gradient(135deg, #fffcf8 0%, var(--gas-bg-surface) 100%); position: relative; }
.gas-card--warning:not(.gas-card--custom-header)::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gas-warning); border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0; }

.gas-card--info { background: linear-gradient(135deg, #f8fcff 0%, var(--gas-bg-surface) 100%); position: relative; }
.gas-card--info:not(.gas-card--custom-header)::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gas-info); border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0; }

.gas-card--danger { background: linear-gradient(135deg, #fff8f8 0%, var(--gas-bg-surface) 100%); position: relative; }
.gas-card--danger:not(.gas-card--custom-header)::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gas-danger); border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0; }

.gas-card--user-participates { background: linear-gradient(135deg, #f8fff9 0%, var(--gas-bg-surface) 100%); position: relative; }
.gas-card--user-participates:not(.gas-card--custom-header)::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gas-success); border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0; }

.gas-card--user-participates-warning { background: linear-gradient(135deg, #fffcf8 0%, var(--gas-bg-surface) 100%); position: relative; }
.gas-card--user-participates-warning:not(.gas-card--custom-header)::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gas-warning); border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0; }

.gas-card--hypno-pass { position: relative; }
.gas-card--hypno-pass:not(.gas-card--custom-header)::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gas-warning), var(--gas-warning-dark, #e6a800)); border-radius: var(--gas-card-radius) var(--gas-card-radius) 0 0; z-index: 1; }

/* ==========================================================================
   Status Overlay (finished activities)
   ========================================================================== */

.gas-card__status-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gas-space-s);
    z-index: 3;
    pointer-events: none;
}

.gas-card__status-overlay-icon {
    font-size: 1.5rem;
    color: var(--gas-white);
    background: rgba(255, 255, 255, 0.2);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gas-card__status-overlay-text {
    color: var(--gas-white);
    font-size: var(--gas-text-l);
    font-weight: var(--gas-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Compact overlay */
.gas-card__status-overlay--compact {
    font-size: var(--gas-text-s);
}

.gas-card__status-overlay--compact .gas-card__status-overlay-text {
    font-size: var(--gas-text-s);
}

/* Finished card overall dimming */
.gas-card--finished {
    opacity: 0.85;
}

.gas-card--finished:hover {
    opacity: 1;
}

.gas-card--finished .gas-card__content {
    opacity: 0.7;
}

.gas-card--finished:hover .gas-card__content {
    opacity: 1;
}

/* ==========================================================================
   DEFAULT LAYOUT (vertical)
   ========================================================================== */

.gas-card--default {
    flex-direction: column;
}

.gas-card--default .gas-card__image {
    position: relative;
    height: var(--card-image-height);
    overflow: hidden;
    flex-shrink: 0;
}

.gas-card__image-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.gas-card__image-link:hover {
    text-decoration: none;
    color: inherit;
}

.gas-card__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--gas-transition-slow);
    display: block;
}

.gas-card:hover .gas-card__image-img {
    transform: scale(1.05);
}

.gas-card__image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gas-neutral-100) 0%, var(--gas-neutral-300) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gas-card__placeholder-icon {
    font-size: 3rem;
    opacity: 0.7;
}

/* Image Badges */
.gas-card__image-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.gas-card__badge--image {
    position: absolute;
    padding: var(--gas-space-s) 14px;
    border-radius: var(--gas-radius-full);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: var(--gas-shadow-s);
    backdrop-filter: blur(4px);
    min-height: 32px;
    max-height: 32px;
    white-space: nowrap;
    line-height: 1;
    z-index: 4;
}

.gas-card__badge--top-left { top: 10px; left: 10px; }
.gas-card__badge--top-right { top: 10px; right: 10px; }
.gas-card__badge--bottom-left { bottom: 10px; left: 10px; }
.gas-card__badge--bottom-right { bottom: 10px; right: 10px; }

/* Card Content */
.gas-card__content {
    padding: var(--gas-space-l);
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: opacity var(--gas-transition-slow);
}

.gas-card--equal-height .gas-card__content {
    flex: 1;
}

/* Meta Badges */
.gas-card__meta-badges {
    display: flex;
    gap: var(--gas-space-s);
    margin-bottom: var(--gas-space-s);
    flex-wrap: wrap;
}

.gas-card__badge--meta {
    padding: var(--gas-space-s) 14px;
    border-radius: 14px;
    font-weight: var(--gas-weight-semi);
    font-size: var(--gas-text-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    max-height: 28px;
    line-height: 1;
    white-space: nowrap;
}

/* Badge Types */
.gas-card__badge--default { background: var(--gas-primary); color: var(--gas-white); }
.gas-card__badge--success { background: var(--gas-primary); color: var(--gas-white); }
.gas-card__badge--warning { background: var(--gas-warning); color: var(--gas-white); }
.gas-card__badge--info { background: var(--gas-info); color: var(--gas-white); }
.gas-card__badge--danger { background: var(--gas-danger); color: var(--gas-white); }

.gas-card--user-participates .gas-card__badge--default {
    background: var(--gas-success);
}

.gas-card__badge-icon {
    font-size: var(--gas-text-s);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gas-card__badge-text {
    font-size: var(--gas-text-xs);
    line-height: 1;
    font-weight: var(--gas-weight-semi);
    display: flex;
    align-items: center;
}

.gas-card__badge--image .gas-card__badge-icon,
.gas-card__badge--meta .gas-card__badge-icon {
    margin-right: var(--gas-space-xs);
}

/* Card Title */
.gas-card__title {
    margin: 0 0 var(--gas-space-m) 0;
    line-height: var(--gas-leading-tight);
    font-size: var(--gas-text-l);
    font-weight: var(--gas-weight-semi);
    flex-shrink: 0;
    min-height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gas-card__title-link {
    color: var(--gas-text-color);
    text-decoration: none;
    transition: color var(--gas-transition-normal);
    display: block;
}

.gas-card__title-link:hover {
    color: var(--gas-primary);
    text-decoration: none;
}

.gas-card--user-participates .gas-card__title-link:hover {
    color: var(--gas-success-dark);
}

/* Card Details */
.gas-card__details {
    margin-bottom: var(--gas-space-m);
    flex-shrink: 0;
}

.gas-card__detail {
    display: flex;
    align-items: center;
    margin-bottom: var(--gas-space-s);
    color: var(--gas-neutral-600);
    font-size: var(--gas-text-s);
}

.gas-card__detail-icon {
    margin-right: var(--gas-space-s);
    font-size: var(--gas-text-s);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.gas-card__detail-text {
    flex: 1;
}

.gas-card__detail:first-child .gas-card__detail-text {
    font-weight: var(--gas-weight-semi);
}

/* Price Styling */
.gas-price--hypno-pass { color: var(--gas-warning); font-weight: var(--gas-weight-semi); }
.gas-price--hypno-discount { color: var(--gas-warning); font-size: var(--gas-text-xs); font-weight: var(--gas-weight-semi); }

/* ==========================================================================
   Expandable Description
   ========================================================================== */

.gas-card__description-wrapper {
    flex: 1;
    margin-bottom: var(--gas-space-m);
}

.gas-card__description {
    color: var(--gas-neutral-600);
    font-size: var(--gas-text-s);
    line-height: var(--gas-leading-normal);
    margin: 0;
}

.gas-card__description--full {
    /* No line clamp when fully shown */
}

.gas-card--equal-height .gas-card__description-wrapper {
    flex: 1 1 auto;
}

/* Expand button */
.gas-card__expand-btn {
    display: inline-block;
    margin-top: var(--gas-space-xs);
    padding: 0;
    border: none;
    background: none;
    color: var(--gas-primary);
    font-size: var(--gas-text-xs);
    font-weight: var(--gas-weight-semi);
    cursor: pointer;
    transition: color var(--gas-transition-normal);
    font-family: inherit;
}

.gas-card__expand-btn:hover {
    color: var(--gas-primary-dark, var(--gas-primary));
    text-decoration: underline;
}

/* Legacy non-expandable description */
.gas-card__content > .gas-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    margin-bottom: var(--gas-space-m);
}

.gas-card--equal-height .gas-card__content > .gas-card__description {
    flex: 1 1 auto;
    -webkit-line-clamp: unset;
}

/* ==========================================================================
   Places Badge (inline for compact)
   ========================================================================== */

.gas-card__places-inline {
    margin-top: var(--gas-space-xs);
    margin-bottom: 0;
}

.gas-card__places-inline .gas-card__badge--meta {
    font-size: 0.65rem;
    padding: 2px 8px;
    min-height: 22px;
    max-height: 22px;
}

/* Card Actions */
.gas-card__actions {
    margin-top: auto;
    padding-top: var(--gas-space-m);
    border-top: var(--gas-border-width) solid var(--gas-neutral-200);
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-s);
}

.gas-card__action-row {
    display: flex;
    gap: var(--gas-space-s);
    align-items: center;
    flex-wrap: wrap;
}

.gas-card__action-row .gas-btn {
    flex: 1;
    min-width: 120px;
    font-size: var(--gas-text-xs);
    padding: var(--gas-space-s) var(--gas-space-m);
    text-align: center;
    border: none;
    outline: none;
    box-shadow: none;
    font-weight: var(--gas-weight-semi);
    line-height: var(--gas-leading-tight);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gas-card__action-row .gas-btn:hover,
.gas-card__action-row .gas-btn:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.gas-card__action-row .gas-btn--small {
    flex: 0 0 auto;
    min-width: 40px;
    width: 40px;
    padding: var(--gas-space-s);
    height: 40px;
}

.gas-card__action-row .gas-btn--info { background: var(--gas-info); color: var(--gas-white); }
.gas-card__action-row .gas-btn--info:hover { background: var(--gas-info-hover); }
.gas-card__action-row .gas-btn--secondary { background: var(--gas-neutral-500); color: var(--gas-white); }
.gas-card__action-row .gas-btn--secondary:hover { background: var(--gas-neutral-600); }

/* ==========================================================================
   COMPACT LAYOUT (horizontal)
   ========================================================================== */

.gas-card--compact {
    flex-direction: row;
    height: auto;
    min-height: unset;
}

.gas-card--compact:hover {
    transform: translateY(-2px);
}

.gas-card--compact .gas-card__image {
    position: relative;
    width: var(--card-compact-image-width);
    min-width: var(--card-compact-image-width);
    max-width: var(--card-compact-image-width);
    height: auto;
    min-height: 80px;
    flex-shrink: 0;
}

.gas-card--compact .gas-card__image-img { width: 100%; height: 100%; object-fit: cover; }
.gas-card--compact .gas-card__image-placeholder { min-height: 80px; }
.gas-card--compact .gas-card__placeholder-icon { font-size: 1.5rem; }

.gas-card--compact .gas-card__content {
    padding: var(--gas-space-m);
    justify-content: center;
}

.gas-card--compact .gas-card__title {
    font-size: var(--gas-text-m);
    min-height: unset;
    margin-bottom: var(--gas-space-s);
    -webkit-line-clamp: 1;
}

.gas-card--compact .gas-card__details { margin-bottom: 0; }
.gas-card--compact .gas-card__detail { margin-bottom: var(--gas-space-xs); font-size: var(--gas-text-xs); }
.gas-card--compact .gas-card__detail-icon { font-size: var(--gas-text-xs); width: 14px; }

.gas-card--compact .gas-card__description {
    font-size: var(--gas-text-xs);
    -webkit-line-clamp: 2;
    margin-bottom: var(--gas-space-s);
    flex: unset;
}

.gas-card--compact .gas-card__meta-badges { margin-bottom: var(--gas-space-xs); }
.gas-card--compact .gas-card__badge--meta { padding: 2px 8px; min-height: 22px; max-height: 22px; font-size: 0.65rem; border-radius: 11px; }
.gas-card--compact .gas-card__badge--image { padding: 2px 6px; min-height: 22px; max-height: 22px; font-size: 0.6rem; }
.gas-card--compact .gas-card__actions { padding-top: var(--gas-space-s); }

/* ==========================================================================
   MINIMAL LAYOUT (list row, no image)
   ========================================================================== */

.gas-card--minimal {
    flex-direction: row;
    align-items: center;
    height: auto;
    min-height: unset;
    border-radius: var(--gas-radius-m);
    box-shadow: none;
    border-bottom: 1px solid var(--gas-neutral-200);
}

.gas-card--minimal:last-child { border-bottom: none; }

.gas-card--minimal:hover {
    transform: none;
    box-shadow: none;
    background: var(--gas-bg-surface-alt, #f5f5f7);
}

.gas-card--minimal.gas-card--finished { opacity: 0.6; }
.gas-card--minimal.gas-card--finished .gas-card__title-link { text-decoration: line-through; color: var(--gas-neutral-500); }

.gas-card--minimal .gas-card__content {
    padding: var(--gas-space-m);
    flex-direction: row;
    align-items: center;
    gap: var(--gas-space-l);
    flex-wrap: wrap;
}

.gas-card--minimal .gas-card__title {
    font-size: var(--gas-text-m);
    font-weight: var(--gas-weight-semi);
    min-height: unset;
    margin: 0;
    flex: 1;
    min-width: 200px;
    -webkit-line-clamp: 1;
}

.gas-card--minimal .gas-card__details {
    display: flex;
    flex-direction: row;
    gap: var(--gas-space-m);
    margin: 0;
    flex-shrink: 0;
}

.gas-card--minimal .gas-card__detail { margin: 0; font-size: var(--gas-text-xs); white-space: nowrap; }
.gas-card--minimal .gas-card__meta-badges { margin: 0; flex-shrink: 0; }
.gas-card--minimal .gas-card__description { display: none; }

/* ==========================================================================
   Grid Layouts
   ========================================================================== */

.gas-grid {
    display: grid;
    gap: var(--gas-space-l);
    align-items: stretch;
}

.gas-grid .gas-card--equal-height {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.gas-grid--1 { grid-template-columns: 1fr; }
.gas-grid--2 { grid-template-columns: repeat(2, 1fr); }
.gas-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gas-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gas-grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gas-grid--auto-small { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.gas-grid--auto-large { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }

.gas-grid--compact { grid-template-columns: 1fr; gap: var(--gas-space-m); }
.gas-grid--compact-2 { grid-template-columns: repeat(2, 1fr); gap: var(--gas-space-m); }

.gas-grid--minimal {
    grid-template-columns: 1fr;
    gap: 0;
    border: 1px solid var(--gas-neutral-200);
    border-radius: var(--gas-card-radius);
    overflow: hidden;
}

@media (max-width: 1200px) {
    .gas-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .gas-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .gas-grid--compact-2 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .gas-grid { gap: var(--gas-space-m); }
    .gas-grid--4,
    .gas-grid--3,
    .gas-grid--2 { grid-template-columns: 1fr; }

    .gas-card__content { padding: var(--gas-space-m); }
    .gas-card__image { --card-image-height: 150px; }

    .gas-card--compact { flex-direction: column; }
    .gas-card--compact .gas-card__image {
        width: 100%;
        min-width: unset;
        max-width: unset;
        height: 120px;
    }

    .gas-card--minimal .gas-card__content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gas-space-s);
    }

    .gas-card--minimal .gas-card__details { flex-wrap: wrap; }

    .gas-card__status-overlay-text { font-size: var(--gas-text-m); }
}

@media (max-width: 480px) {
    .gas-grid { gap: var(--gas-space-s); }
}