/*
 * CSS Stylesheet for Il mio mondo Italiano Custom Theme
 * Created with pure responsive CSS grid & flex layout patterns
 */

:root {
  --color-sand: #faf6f0;
  --color-olive-light: #51725c;
  --color-olive: #3d5a45;
  --color-olive-dark: #2f4434;
  --color-olive-deep: #1b2920;
  --color-terracotta: #b85c37;
  --color-terracotta-dark: #a04a25;
  --color-charcoal: #1a1a1a;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, monospace;
}

/* Base resets & styles */
*, *::before, *::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-sand);
  color: #2c3e35;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Custom styling for container grid mapping screenshot */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Layout Utilities (Vanilla responsive replacements for Tailwind) */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.text-center { text-align: center; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Top Navigation Bar */
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* Custom CSS Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-sand);
}
::-webkit-scrollbar-thumb {
  background: var(--color-olive-light);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-olive);
}

/* Hero Section */
.hero-bg {
  background-color: var(--color-sand);
}
.hero-image-wrap {
  border-radius: 300px 300px 20px 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(47, 68, 52, 0.15);
  border: 1px solid rgba(61, 90, 69, 0.1);
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 450px;
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Features Strip */
.features-container {
  background-color: #fff;
  border-top: 1px solid rgba(47,68,52,0.06);
  border-bottom: 1px solid rgba(47,68,52,0.06);
}
.feature-item {
  border-right: 1px solid rgba(47,68,52,0.08);
  padding: 3rem 1.5rem;
  transition: background-color 0.3s;
}
.feature-item:last-child {
  border-right: none;
}
.feature-item:hover {
  background-color: rgba(61, 90, 69, 0.02);
}

/* Cards (Nabídka) */
.card-item {
  background: #ffffff;
  border: 1px solid rgba(47, 68, 52, 0.05);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(47, 68, 52, 0.08);
  border-color: rgba(184, 92, 55, 0.2);
}
.card-image-wrap {
  height: 200px;
  position: relative;
  overflow: hidden;
}
.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card-item:hover .card-image-wrap img {
  transform: scale(1.08);
}

/* Section Title Underlines with Olive Branch */
.section-title::after {
  content: "🍃";
  display: block;
  font-size: 1.25rem;
  margin: 0.75rem auto 0;
  text-align: center;
}

/* O mně Portrait & quotes block */
.portrait-frame {
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 340px;
  overflow: hidden;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-card {
  border: 1px solid rgba(184, 92, 55, 0.15);
  background: radial-gradient(circle at bottom right, rgba(184,92,55,0.03), transparent);
}

/* Ceník (Earthy Dark green block) */
.cenik-section {
  background-color: #1b2920; /* Deep olive */
  color: #ffffff;
}
.price-column {
  border-right: 1px dashed rgba(250, 246, 240, 0.15);
  padding: 2.5rem 1rem;
  text-align: center;
  transition: background-color 0.3s;
}
.price-column:last-child {
  border-right: none;
}
.price-column:hover {
  background-color: rgba(250, 246, 240, 0.02);
}
.price-tag {
  color: #ffd29e;
  font-family: var(--font-serif);
}

/* Responsive fixes for pricing columns */
@media (max-width: 1023px) {
  .price-column {
    border-right: none;
    border-bottom: 1px dashed rgba(250, 246, 240, 0.15);
  }
  .price-column:last-child {
    border-bottom: none;
  }
}

/* Gutenberg Editor Color Palette Helper Classes */
.has-sand-color { color: var(--color-sand) !important; }
.has-terracotta-color { color: var(--color-terracotta) !important; }
.has-olive-color { color: var(--color-olive) !important; }
.has-olive-dark-color { color: var(--color-olive-dark) !important; }
.has-charcoal-color { color: var(--color-charcoal) !important; }

.has-sand-background-color { background-color: var(--color-sand) !important; }
.has-terracotta-background-color { background-color: var(--color-terracotta) !important; }
.has-olive-background-color { background-color: var(--color-olive) !important; }
.has-olive-dark-color-background-color { background-color: var(--color-olive-dark) !important; }
.has-charcoal-background-color { background-color: var(--color-charcoal) !important; }