/* =========================================================
   COMPONENTS — Bogota Graffiti Tour
   ========================================================= */

/* ---- Post Card (blog) ---- */
.bgt-post-card {
    background: var(--bgt-blanco-puro);
    border-radius: var(--bgt-radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1px solid rgba(0,0,0,0.06);
}

.bgt-post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--bgt-shadow);
}

.bgt-post-card__image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.bgt-post-card__body {
    padding: 1.5rem;
}

.bgt-post-card__title {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.bgt-post-card__title a {
    font-size: 1.5rem;
    color: var(--bgt-negro);
}

.bgt-post-card__title a:hover {
    color: var(--bgt-fucsia);
}

.bgt-post-card__excerpt {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1.25rem;
    line-height: 1.65;
}

/* ---- Single Post / Page ---- */
.bgt-single__thumbnail,
.bgt-page__header {
    margin-bottom: 2rem;
}

.bgt-single__thumbnail {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: var(--bgt-radius-lg);
}

.bgt-single__title,
.bgt-page__title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin-bottom: 0.5rem;
}

.bgt-single__meta {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.bgt-single__body,
.bgt-page__body {
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 760px;
}

.bgt-single__body h2,
.bgt-page__body h2 { font-size: 1.6rem; margin: 2rem 0 1rem; }
.bgt-single__body h3,
.bgt-page__body h3 { font-size: 1.3rem; margin: 1.5rem 0 0.75rem; }
.bgt-single__body p,
.bgt-page__body p  { margin-bottom: 1.25rem; }

/* ---- 404 ---- */
.bgt-404 {
    text-align: center;
    padding-top: 10rem;
    padding-bottom: 5rem;
}

.bgt-404__title {
    font-size: clamp(5rem, 18vw, 12rem);
    color: var(--bgt-fucsia);
    line-height: 1;
    margin-bottom: 0.25rem;
    text-shadow: 4px 4px 0 var(--bgt-negro), 8px 8px 0 rgba(232,24,90,0.2);
}

.bgt-404__subtitle {
    font-family: var(--bgt-font-accent);
    font-size: 1.8rem;
    color: var(--bgt-negro);
    margin-bottom: 1rem;
}

.bgt-404 p {
    color: #555;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- No results ---- */
.bgt-no-results {
    text-align: center;
    padding: 4rem 1rem;
}

/* ---- Posts grid ---- */
.bgt-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

@media ( max-width: 600px ) {
    .bgt-posts-grid { grid-template-columns: 1fr; }
}

/* ---- Popular Tour Card Highlight ---- */
.bgt-tour-card--popular {
    border: 2px solid var(--bgt-fucsia);
    box-shadow: 0 4px 15px rgba(232, 24, 90, 0.2);
    transform: scale(1.02);
}

.bgt-tour-card--popular:hover {
    box-shadow: 0 8px 25px rgba(232, 24, 90, 0.4);
    transform: translateY(-5px) scale(1.02);
}

.bgt-tour-card__ribbon {
    position: absolute;
    top: 15px;
    right: -5px;
    background: var(--bgt-fucsia);
    color: var(--bgt-blanco-puro);
    padding: 6px 15px;
    font-family: var(--bgt-font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.bgt-tour-card__ribbon::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 0;
    border-top: 5px solid #a00e3b;
    border-right: 5px solid transparent;
}