/* 
 * Carnelia Portfolio - Version 6.5.12
 * Date 2026-06-27 11:48
 * 1. Added status badge colors
 * 2. Changed status badge styles for new placement
 *
 * Changed Banner Width 
 * Date: 2026-06-19
 * 
 * CHANGES from v6.5.2:
 * 1. MAKER + REGION: flex-wrap: nowrap to keep on same line.
 * 2. WINE NAME: fluid font via clamp() — shrinks with viewport.
 * 3. WINE STYLE: fluid font via clamp() — shrinks with viewport.
 * 4. GRAPES (.wine-tech): allowed to wrap freely below image.
 * 5. MOBILE BREAKPOINT: shifted from 768px to 480px for card stacking.
 */

:root {
    --font-main: 'Proxima Nova', 'Montserrat', 'Figtree', 'Metropolis', sans-serif;
    --font-mono: 'Menlo', monospace;
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --border-color: #e5e5e5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.5;
    font-size: 14px;
}

/* --- SITE BANNER IMAGE --- */
.site-banner {
    display: block;
    width: 90%;
    max-width: 1000px; /* Adjust based on your preferred size */
    height: auto;
    margin: 0 auto 1rem auto; /* Centered with bottom spacing */
    object-fit: contain;
}

.container {
    max-width: min(100%%, 1200px);
    margin: 0 auto;
    padding: 0 1.4rem;
}

.page-header {
    padding: 2.8rem 0;
    border-bottom: none;
    margin-bottom: 2.8rem;
    text-align: center;
}

.site-title {
    font-size: 1.7rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.portfolio-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 4rem;
}

.section-header {
    width: 100%;
    margin-top: 5rem;
    padding: 0.7rem 0;
    font-family: var(--font-main);
}

.country-header {
    font-size: 2rem;
    color: var(--text-color);
    border-bottom: none;
    margin-bottom: 2rem;
    padding-bottom: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

/* --- COUNTRY MAP STYLES (UPDATED: 75% width, no decoration) --- */
		.country-map-wrapper {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 2rem;
				width: 100%;
		}
		
		.country-map {
				width: 75%;                    /* Changed from 50% to 75% */
				max-width: 75%;                /* Changed from 50% to 75% */
				height: auto;                  /* Maintain aspect ratio */
				display: block;
				margin: 0 auto;                /* Center horizontally */
				object-fit: contain;
				/* REMOVED: border-radius, box-shadow, borders */
		}
		
		/* Responsive adjustment for mobile */
		@media (max-width: 768px) {
				.country-map {
						width: 85%;                /* Slightly wider on tablets */
						max-width: 85%;
				}
		}
		
		@media (max-width: 480px) {
				.country-map {
						width: 95%;                /* Nearly full width on phones */
						max-width: 95%;
				}
		}
/* UPDATED: Centered Maker + Region Stacked Vertically */
.maker-region-line {
    display: flex;
    flex-direction: column;           /* Stack vertically */
    align-items: center;              /* Center horizontally */
    justify-content: center;
    margin-bottom: 0;
    text-align: center;               /* Ensure text centers within block */
    white-space: normal;              /* Allow region list to wrap if long */
}

.maker-name {
    font-size: 1.8rem;                /* Increased from 1.3rem */
    font-weight: 800;                 /* Changed from 500 to Extra Bold */
    text-transform: uppercase;
    color: var(--text-color);
    margin-bottom: 0;            /* Space between maker and region */
    margin-right: 0;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.region-list {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);  /* Slightly larger than before */
    font-weight: 300;
    font-style: italic;
    color: #666;
    margin-left: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;              /* Allow wrapping for long region lists */
    max-width: 100%;
}

/* --- Wine Card --- */
.wine-entry {
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    break-inside: avoid;
    overflow: hidden;
    margin-bottom: 1.4rem;
}

.wine-card-top {
    display: flex;
    flex-direction: row;      /* KEEP: Image left, header right */
    align-items: flex-start;   /* <-- ADD THIS */
    border-bottom: none; /* Removed */
    min-width: 0;
    align-items: flex-start;  /* Allow margin-top to push image down */
}

.wine-header {
    padding: 0 1.4rem 1.4rem 1.4rem;   /* CHANGED: top padding removed so name aligns with image top */
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: normal;          /* CHANGED: was break-word */
    word-break: keep-all;           /* ADDED: prevents mid-word breaks */
    font-family: var(--font-main);
}

.wine-name-group {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
/*    margin-bottom: 0.4rem; */
    min-width: 0;
    gap: 0.5rem;              /* Space between name and vintage */
}

/* UPDATED: Fluid font sizing — shrinks with viewport */
.wine-name {
    font-size: clamp(0.85rem, 2.2vw, 1.3rem);
    font-weight: 700;
/*    line-height: 1.2; */
    min-width: 0;
    overflow-wrap: normal;          /* CHANGED: was break-word */
    word-break: keep-all;           /* ADDED: prevents mid-word breaks */
    font-family: var(--font-main);
    text-transform: uppercase;
}

.wine-region {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    font-weight: 300;
    color: #666;
    font-style: italic;
    white-space: nowrap;
    margin-left: 0;
    text-transform: none;
}

.wine-vintage {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: clamp(0.85rem, 2.2vw, 1.3rem);
    white-space: nowrap;
    flex-shrink: 0;           /* Don't compress vintage */
}

/* UPDATED: Fluid font sizing — shrinks with viewport */
.wine-style {
    font-size: clamp(0.85rem, 2.2vw, 1.3rem);
    color: var(--text-color);
    font-weight: 700;
/*    margin-bottom: 0.6rem; */
    text-transform: lowercase;
    letter-spacing: 0.02em;
    position: relative;
    display: inline-block;
    font-family: var(--font-main);
}

.wine-style::before { content: "["; margin-right: 0.15rem; }
.wine-style::after { content: "]"; margin-left: 0.15rem; }

/* UPDATED: Allowed to wrap freely below image area */
.wine-tech {
    font-size: 1rem;
    font-weight: 300;
    font-style: italic;
    color: #666;
    line-height: 1.4;
    min-width: 0;
    overflow-wrap: normal;          /* CHANGED: was break-word */
    word-break: keep-all;           /* ADDED: prevents mid-word breaks */
    font-family: var(--font-main);
}

.wine-image {
    width: 10em;
    height: 10em;
    object-fit: contain;
    flex-shrink: 0;
    line-height: 1.4;           /* Remove line-box stretching */
    display: flex;            /* Flex center for image inside */
    align-items: flex-start;  /* Align to top */
/*    padding: 0.3rem;       Adjust this value experimentally */
}

.details-block {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.wine-desc {
    font-family: var(--font-main);
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.5rem; 
    text-align: justify;
    flex-grow: 1;
    overflow-wrap: normal;          /* CHANGED: was break-word */
    word-break: keep-all;           /* ADDED: prevents mid-word breaks */
    display: inline;
}

.wine-abv {
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
    margin-left: 0;
    font-style: normal;
}

.status-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #f0f0f0;
    padding: 0.1rem 0.25rem;
    margin: auto;
    align-self: flex-start;
}

/* --- STATUS BADGE COLORS --- */
.status-badge.status-green {
    background: #d4edda;   /* light green */
    color: #155724;
    border: 1px solid #c3e6cb;
}
.status-badge.status-orange {
    background: #ffeeba;   /* light orange */
    color: #856404;
    border: 1px solid #ffe08a;
}
.status-badge.status-red {
    background: #f8d7da;   /* light red */
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.status-badge.status-blue {
    background: #d1ecf1;   /* light blue */
    color: #0c5460;
    border: 1px solid #bee5eb;
}
.status-badge.status-other {
    background: #f0f0f0;   /* default gray fallback */
    color: #333;
}

.eta-date {
    font-size: 0.7rem;
    color: #666;
    font-weight: normal;
}

.pricing-section {
    border-top: 1px solid var(--border-color);
    padding: .5rem .5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    text-align: center;
    background: #fafafa;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the group of items horizontally */
    align-items: center;     /* Vertical alignment remains good */
    gap: 1rem;              /* Consistent spacing between groups */
    margin-top: 0;                 /* Ensure no extra top margin */
}

.price-group {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.price-label {
    font-weight: 600;
    color: #000;
    margin-right: 0.3rem;
}

.mono-split {
    color: #666;
    margin-left: 0.15rem;
}

.error-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.8rem;
    border: 1px dashed var(--border-color);
    background: #fafafa;
}

.error-msg h2 { font-size: 1.4rem; margin-bottom: 0.7rem; font-family: var(--font-main); }
.error-msg p { color: #666; font-size: 1rem; font-family: var(--font-main); }

/* UPDATED: Breakpoint shifted to 480px to keep image-left layout longer */
@media (max-width: 400px) {
    .portfolio-list { grid-template-columns: 1fr; }
    .pricing-section { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    
    .wine-card-top { 
        flex-direction: column;  /* Stack image on top only at very narrow widths */
    }
    .wine-image { 
        width: 100%; 
        height: auto; 
    }
    
    .maker-region-line {
        flex-direction: column;
        align-items: flex-start;
        white-space: normal;
    }
    .region-list {
        margin-top: 0.3rem;
        overflow: visible;
        text-overflow: clip;
    }
}