/* ============================================
   IMKBY Άγιος της Ημέρας - Frontend
   ΣΗΜΕΙΩΣΗ: Τα χρώματα ορίζονται από το PHP template
   βάσει των ρυθμίσεων του component (config.xml).
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=GFS+Didot:ital@0;1&family=GFS+Neohellenic:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;500;600;700&display=swap');

.imkby-agios-page {
  /* Default fallbacks - επανακαθορίζονται από inline style στο PHP */
  --c-cream: #faf7f0;
  --c-gold: #c9a961;
  --c-gold-bright: #e6c989;
  --c-gold-deep: #8b7339;
  --c-burgundy: #6b1f3a;
  --c-burgundy-deep: #4a1428;
  --c-text: #2d2416;
  --c-text-soft: #5a4f3d;
  --c-text-mute: #8a7d65;
  --f-serif: 'GFS Neohellenic', Georgia, serif;
  --f-display: 'GFS Didot', Georgia, serif;
  --f-sans: 'Manrope', sans-serif;

  background: var(--c-cream);
  color: var(--c-text);
  font-family: var(--f-sans);
  margin: 0; padding: 0;
}
.imkby-agios-page * { box-sizing: border-box; }

/* ---------- HERO ---------- */
.iag-hero {
  position: relative;
  background:
    linear-gradient(135deg, var(--c-burgundy-deep), var(--c-burgundy));
  color: #fff;
  padding: 80px 24px 60px;
  text-align: center;
  overflow: hidden;
}
.iag-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 40%, var(--c-gold), transparent 60%);
  opacity: .2;
}
.iag-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.iag-hero-cross {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(200px, 40vw, 480px);
  opacity: .05;
  color: var(--c-gold-bright);
}
.iag-hero-cross.iag-animated { animation: iag-pulse 8s ease-in-out infinite; }
@keyframes iag-pulse {
  0%, 100% { opacity: .04; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .08; transform: translate(-50%, -50%) scale(1.04); }
}

.iag-hero-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }

.iag-site-name {
  font-family: var(--f-display); font-style: italic;
  font-size: 13px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--c-gold-bright); margin-bottom: 12px;
  opacity: .85;
}

.iag-eyebrow {
  display: inline-block;
  font-size: 11px; letter-spacing: 5px; text-transform: uppercase;
  color: var(--c-gold-bright); font-weight: 600;
  padding: 8px 18px; border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; margin-bottom: 16px;
}
.iag-date {
  font-family: var(--f-display); font-style: italic;
  font-size: 22px; color: var(--c-gold-bright); margin-bottom: 12px;
  opacity: .9;
}
.iag-feast {
  font-family: var(--f-display);
  font-size: clamp(28px, 5vw, 52px);
  margin: 0 0 12px; line-height: 1.2; font-weight: 400;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.iag-feast--plain { font-size: clamp(20px, 3.5vw, 32px); font-style: italic; }

.iag-period {
  font-family: var(--f-display); font-style: italic;
  color: var(--c-gold-bright); font-size: 15px; margin-top: 8px;
}
.iag-fasting {
  display: inline-block; margin-top: 16px;
  padding: 6px 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font-size: 13px; color: var(--c-gold-bright);
}

/* ---------- SECTIONS ---------- */
.iag-section { padding: 60px 24px; }
.iag-section-inner { max-width: 720px; margin: 0 auto; }
.iag-section-title {
  text-align: center;
  font-family: var(--f-display); font-style: italic;
  font-size: 14px; letter-spacing: 8px; text-transform: uppercase;
  color: var(--c-burgundy); font-weight: 400;
  margin: 0 0 32px;
  display: flex; align-items: center; gap: 16px; justify-content: center;
  opacity: .85;
}
.iag-section-title::before,
.iag-section-title::after {
  content: ''; flex: 1; max-width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}
.iag-section-title span { white-space: nowrap; }

.iag-synaxari { background: #fff; }
.iag-synaxari-text {
  font-family: var(--f-serif); font-style: italic;
  font-size: 18px; line-height: 1.8;
  text-align: center; color: var(--c-text-soft);
  margin: 0;
  padding: 0 20px;
  position: relative;
}
.iag-synaxari-text::before,
.iag-synaxari-text::after {
  content: '"'; font-family: var(--f-display);
  font-size: 60px; color: var(--c-gold); opacity: .3;
  position: absolute; line-height: 1;
}
.iag-synaxari-text::before { top: -20px; left: -10px; }
.iag-synaxari-text::after { bottom: -40px; right: -10px; }

/* ---------- BIO ---------- */
.iag-bio { background: var(--c-cream); }
.iag-bio-content {
  font-family: var(--f-serif);
  font-size: 18px; line-height: 1.85;
  color: var(--c-text);
}
.iag-bio-content p { margin: 0 0 20px; text-align: justify; }

/* Drop cap only when enabled */
.iag-with-dropcap .iag-bio-content p:first-of-type::first-letter {
  font-family: var(--f-display);
  font-size: 72px; float: left;
  line-height: 1; padding: 6px 12px 0 0;
  color: var(--c-burgundy);
  font-weight: 700;
}
.iag-bio-content strong { color: var(--c-burgundy); font-weight: 600; }
.iag-bio-content em { font-style: italic; color: var(--c-gold); }

/* ---------- HYMNS ---------- */
.iag-hymn { background: #fff; }
.iag-hymn--kont { background: var(--c-cream); }
.iag-hymn-text {
  font-family: var(--f-serif); font-style: italic;
  font-size: 19px; line-height: 1.85;
  text-align: center;
  color: var(--c-burgundy-deep);
  padding: 40px 30px;
  background: linear-gradient(135deg, rgba(0,0,0,.02), transparent);
  border-left: 3px solid var(--c-gold);
  border-right: 3px solid var(--c-gold);
  position: relative;
}
.iag-hymn-text::before,
.iag-hymn-text::after {
  content: '☦'; position: absolute;
  color: var(--c-gold); font-size: 20px;
}
.iag-hymn-text::before { top: 10px; left: 50%; transform: translateX(-50%); }
.iag-hymn-text::after  { bottom: 10px; left: 50%; transform: translateX(-50%); }

/* ---------- NAMES ---------- */
.iag-names { background: linear-gradient(135deg, var(--c-cream), #fff); }
.iag-names-intro {
  text-align: center; font-family: var(--f-display);
  font-size: 18px; font-style: italic;
  color: var(--c-text-soft); margin: 0 0 24px;
}
.iag-names-list {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
}
.iag-name {
  background: #fff;
  border: 1px solid var(--c-gold);
  color: var(--c-burgundy-deep);
  padding: 10px 20px; border-radius: 999px;
  font-family: var(--f-display);
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}
.iag-name:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* ---------- NAVIGATION ---------- */
.iag-nav {
  background: var(--c-burgundy-deep);
  color: #fff;
  padding: 24px;
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap;
}
.iag-nav-btn {
  display: inline-block;
  padding: 10px 20px;
  background: rgba(255,255,255,.1);
  color: var(--c-gold-bright);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--f-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 1px;
  transition: all .2s;
}
.iag-nav-btn:hover {
  background: var(--c-gold);
  color: #fff;
  text-decoration: none;
  border-color: var(--c-gold);
}
.iag-nav-btn--today {
  background: var(--c-gold);
  color: var(--c-burgundy-deep);
  font-weight: 700;
}

/* ---------- FOOTER ---------- */
.iag-footer {
  background: #fff;
  text-align: center;
  padding: 20px 24px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.iag-footer-sub {
  font-family: var(--f-display); font-style: italic;
  font-size: 13px; color: var(--c-text-mute);
  letter-spacing: 2px;
}

/* Disable all animations when needed */
.imkby-agios-page.no-animation * { animation: none !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 700px) {
  .iag-hero { padding: 50px 20px 40px; }
  .iag-section { padding: 40px 20px; }
  .iag-bio-content { font-size: 16px; }
  .iag-with-dropcap .iag-bio-content p:first-of-type::first-letter { font-size: 56px; }
  .iag-synaxari-text { font-size: 16px; }
  .iag-hymn-text { font-size: 17px; padding: 24px 20px; }
}