/**
 * City Card Components CSS
 * 
 * City and location-related card styling
 * Extends base card system from cards.css
 * 
 * Contains:
 * - City cards (.card-city)
 * - City Profile cards (.card-city-profile)
 * - Location-specific layouts and styling
 */

/* ============================
   City Card
   ============================ */

/* City Card - inherits most styling from base .card class */
body.theme-pt .card.card-city .card-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    height: 250px;
}

body.theme-pt .card.card-city .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* ============================
   City Profile Card
   ============================ */

/* City Profile Card - Unified modifier class */
body.theme-pt .card.card-city-profile,
body.theme-pt .card-city-profile {
    background: var(--color-bg-secondary, #f9f9f9);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--card-radius);
    box-shadow: 4px 4px 10px var(--card-shadow-light);
    padding: 0;
    overflow: hidden;
    transition: var(--card-transition);
    margin-bottom: 20px;
}


body.theme-pt .card.card-city-profile .img,
body.theme-pt .card.card-city-profile .card-image,
body.theme-pt .card-city-profile .img,
body.theme-pt .card-city-profile .card-image {
    border-radius: var(--card-city-partial-radius);
    box-shadow: var(--card-shadow-dark) 0px 3px 20px 0px;
    overflow: hidden;
    margin-bottom: var(--card-margin-bottom);
}

/* Remove Bootstrap column padding for image column */
body.theme-pt .card.card-city-profile .col-lg-4,
body.theme-pt .card.card-city-profile .col-md-5,
body.theme-pt .card.card-city-profile .col-12:first-child,
body.theme-pt .card-city-profile .col-lg-4,
body.theme-pt .card-city-profile .col-md-5,
body.theme-pt .card-city-profile .col-12:first-child {
    padding-left: 0;
    padding-right: 0;
}

/* Specific overrides for about-john section */
body.theme-pt .about-john .card.card-city-profile .img,
body.theme-pt .about-john .card-city-profile .img {
    margin-bottom: 0;
}

body.theme-pt .card.card-city-profile .card-body,
body.theme-pt .card.card-city-profile .section-title,
body.theme-pt .card-city-profile .card-body,
body.theme-pt .card-city-profile .section-title {
    padding-left: 40px;
}

body.theme-pt .card.card-city-profile .icons,
body.theme-pt .card-city-profile .icons {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--card-text-dark);
}

body.theme-pt .card.card-city-profile .icons img,
body.theme-pt .card-city-profile .icons img {
    margin-right: 10px;
    width: 24px;
    height: auto;
}

body.theme-pt .card.card-city-profile .icons h4,
body.theme-pt .card-city-profile .icons h4 {
    display: inline;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: var(--card-text-dark);
    margin: 0;
}

body.theme-pt .card.card-city-profile .icons.first,
body.theme-pt .card-city-profile .icons.first {
    margin-bottom: 15px;
}

body.theme-pt .card.card-city-profile h2,
body.theme-pt .card.card-city-profile .card-title,
body.theme-pt .card-city-profile h2,
body.theme-pt .card-city-profile .card-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 44px;
    color: var(--card-text-dark);
    margin-bottom: 12px;
}