/**
 * Wedding Website - Reusable Components
 * Event Cards, Buttons, Info Cards, Page Headers, Dividers
 */

/* ==================== CONTENT BOXES ==================== */

.content-box {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .content-box {
    padding: var(--spacing-xl);
  }
}

/* ==================== PAGE HEADERS ==================== */

.page-header {
  text-align: center;
  padding: calc(80px + var(--spacing-xl)) var(--container-padding-mobile) var(--spacing-lg);
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .page-header {
    padding: calc(80px + var(--spacing-xxl)) var(--container-padding-desktop) var(--spacing-xl);
  }
}

.page-header h1 {
  font-family: var(--font-script);
  font-size: var(--font-size-3xl);
  color: var(--coral-pink);
  margin-bottom: var(--spacing-sm);
  font-weight: 400;
}

.page-header p {
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  color: var(--olive-green);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  max-width: 600px;
  margin: 0 auto;
}

/* ==================== BUTTONS ==================== */

.btn {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-decoration: none;
  border-radius: 0;
  border: 1px solid transparent;
  transition: all var(--transition-medium);
  cursor: pointer;
  text-align: center;
  font-weight: var(--font-weight-normal);
}

.btn-primary {
  background: var(--charcoal);
  color: white;
  border-color: var(--charcoal);
}

.btn-primary:hover {
  background: transparent;
  color: var(--charcoal);
}

.btn-secondary {
  background: transparent;
  color: var(--olive-green);
  border-color: var(--olive-green);
}

.btn-secondary:hover {
  background: var(--olive-green);
  color: white;
}

.btn-accent {
  background: var(--coral-pink);
  border-color: var(--coral-pink);
  color: white;
}

.btn-accent:hover {
  background: transparent;
  color: var(--coral-pink);
}

.btn-large {
  font-size: var(--font-size-lg);
  padding: 1.25rem 3.75rem;
}

/* ==================== EVENT CARDS ==================== */

.event-card {
  background: var(--warm-white);
  padding: var(--spacing-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-medium),
              box-shadow var(--transition-medium);
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.event-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-md);
  font-size: 3rem;
  text-align: center;
}

.event-card__day {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--medium-gray);
  margin-bottom: var(--spacing-xs);
  text-align: center;
}

.event-card__title {
  font-family: var(--font-script);
  font-size: var(--font-size-2xl);
  color: var(--emerald-green);
  margin-bottom: var(--spacing-md);
  text-align: center;
  font-weight: 400;
}

.event-card__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.event-card__detail-icon {
  width: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.event-card__description {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--light-gray);
  color: var(--medium-gray);
  line-height: var(--line-height-relaxed);
}

.event-card__callout {
  background: #FFF9E6;
  border-left: 4px solid var(--golden-yellow);
  padding: var(--spacing-sm);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--charcoal);
}

.event-card__callout strong {
  color: var(--terracotta);
}

/* ==================== INFO CARDS ==================== */

.info-card {
  background: var(--warm-white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--golden-yellow);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-medium),
              box-shadow var(--transition-medium);
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.info-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-sm);
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.info-card__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--emerald-green);
  margin: 0;
}

.info-card__badge {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  background: var(--sage-green);
  color: white;
  padding: 4px 12px;
  border-radius: var(--radius-xl);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.info-card__badge--recommended {
  background: var(--emerald-green);
}

.info-card__badge--budget {
  background: var(--olive-green);
}

.info-card__badge--luxury {
  background: var(--golden-yellow);
  color: var(--charcoal);
}

.info-card__description {
  color: var(--medium-gray);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-relaxed);
}

.info-card__meta {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  font-size: var(--font-size-sm);
  color: var(--charcoal);
  margin-bottom: var(--spacing-sm);
}

.info-card__discount-code {
  background: var(--off-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-sm);
}

.info-card__discount-code code {
  background: white;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-family: 'Courier New', monospace;
  color: var(--emerald-green);
  font-weight: var(--font-weight-semibold);
}

/* ==================== TOWN CARDS ==================== */

.town-card {
  background: var(--warm-white);
  padding: var(--spacing-md);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: transform var(--transition-medium),
              box-shadow var(--transition-medium);
}

.town-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.town-card--recommended {
  border: 2px solid var(--emerald-green);
}

.town-card h3 {
  font-size: var(--font-size-xl);
  color: var(--emerald-green);
  margin-bottom: var(--spacing-xs);
}

.town-card p {
  color: var(--medium-gray);
  line-height: var(--line-height-relaxed);
}

/* ==================== SECTION DIVIDERS ==================== */

.section-divider {
  width: 100px;
  height: 2px;
  background: linear-gradient(to right,
    transparent,
    var(--sage-green),
    transparent);
  margin: var(--spacing-xl) auto;
}

.section-divider--botanical {
  width: 100%;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
}

/* ==================== GRID LAYOUTS ==================== */
/* Single column layout for narrow editorial design */

.grid {
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;
}

.grid--2col,
.grid--3col,
.grid--4col {
  grid-template-columns: 1fr;
}

/* ==================== CALLOUT BOXES ==================== */

.callout {
  background: var(--off-white);
  padding: var(--spacing-md);
  border-left: 4px solid var(--coral-pink);
  border-radius: var(--radius-sm);
  margin: var(--spacing-md) 0;
}

.callout--info {
  border-left-color: var(--delft-blue);
  background: #F0F5FA;
}

.callout--warning {
  border-left-color: var(--golden-yellow);
  background: #FFF9E6;
}

.callout--success {
  border-left-color: var(--emerald-green);
  background: #F0F7F4;
}

.callout h4 {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-xs);
  color: var(--charcoal);
}

.callout p {
  margin: 0;
  color: var(--medium-gray);
}

/* ==================== CHARITY CARDS ==================== */

.charity-card {
  background: var(--warm-white);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border-top: 4px solid var(--coral-pink);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-medium),
              box-shadow var(--transition-medium);
}

.charity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.charity-card h4 {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  color: var(--emerald-green);
  margin-bottom: var(--spacing-sm);
}

.charity-card p {
  color: var(--medium-gray);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ==================== PROSE CONTENT ==================== */

.prose {
  max-width: 700px;
  margin: 0 auto;
}

.prose p {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
}

.prose h2 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.prose h3 {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-sm);
}

.prose ul,
.prose ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.prose li {
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-relaxed);
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}