/* ═══════════════════════════════════════════════
   DESTINATION CATEGORY CARDS — destination-cards.css
   Drop this file in the same plugin folder
═══════════════════════════════════════════════ */

/* ── Section wrapper ── */
.dcc-section {
    background: #faf9f7;
    border-radius: 20px;
    padding: 40px 36px;
    margin: 40px 0;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* ── Header row ── */
.dcc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.dcc-subtitle {
    display: block;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b5714a;         /* warm terracotta – matches travel aesthetic */
    margin-bottom: 6px;
}

.dcc-title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
	text-transform: capitalize !important;
}

.dcc-view-all {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
    flex-shrink: 0;
}

.dcc-view-all:hover {
    color: #b5714a;
}

/* ── Card grid ── */
.dcc-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;          /* Firefox */
}
.dcc-grid::-webkit-scrollbar { display: none; }  /* Chrome/Safari */

/* ── Individual card ── */
.dcc-card {
    position: relative;
    flex: 0 0 220px;
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    scroll-snap-align: start;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dcc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.22);
}

/* ── Category image ── */
.dcc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.dcc-card:hover .dcc-card__img {
    transform: scale(1.06);
}

/* ── Gradient overlay (darkens bottom for text readability) ── */
.dcc-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 30%,
        rgba(0,0,0,0.18) 60%,
        rgba(0,0,0,0.72) 100%
    );
    pointer-events: none;
}

/* ── Text at bottom of card ── */
.dcc-card__body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 18px 18px;
    color: #fff;
}

.dcc-card__name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    color: #fff;
}

.dcc-card__count {
    font-family: 'Arial', sans-serif;
    font-size: 13px;
    margin: 0;
    opacity: 0.85;
    color: #fff;
}

/* ── Fallback: no image ── */
.dcc-card--no-image .dcc-card__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #c8a882 0%, #8b6348 100%);
}

/* ── Empty state ── */
.dcc-empty {
    color: #888;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .dcc-section {
        padding: 28px 20px;
        border-radius: 12px;
    }
    .dcc-card {
        flex: 0 0 170px;
        height: 240px;
    }
    .dcc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

.dcc-header h2{
    text-transform: uppercase;
    letter-spacing: 2px;
}

.dcc-view-all{
    text-decoration:none;
    font-weight:600;
    color:#000;
}

.dcc-view-all:hover{
    opacity:0.7;
}
.dcc-title{
    text-transform: uppercase;
    letter-spacing: 2px;
}

.dcc-card{
    height: 420px;
}

.dcc-card_img{
    transition: transform 0.5s ease;
}

.dcc-card:hover .dcc-card_img{
    transform: scale(1.08);
}
.dcc-header h2{
    text-transform: uppercase !important;
    letter-spacing: 2px;
}

.dcc-card_name{
    text-transform: capitalize;
}
.dcc-section .dcc-title{
    text-transform: uppercase !important;
}