/* Markets & More — modern additions
   Built on top of TwentyTwelve, not in place of it. */

.mm-hero {
  background: linear-gradient(135deg, #f7931d 0%, #c87515 100%);
  color: #fff;
  padding: 32px 28px;
  border-radius: 6px;
  margin: 0 0 28px 0;
  box-shadow: 0 8px 24px -10px rgba(140, 70, 0, .35);
  position: relative;
  overflow: hidden;
}
.mm-hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
}
.mm-hero h1, .mm-hero h2,
.entry-content .mm-hero h1, .entry-content .mm-hero h2 {
  color: #fff !important;
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  margin: 0 0 10px 0;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  border-bottom: 0 !important;
}
.mm-hero h1 { font-size: 2em; font-weight: 700; }
.mm-hero h2 { font-size: 1.7em; font-weight: 700; }
.mm-hero p, .entry-content .mm-hero p {
  color: rgba(255,255,255,.95) !important;
  font-size: 1.05em;
  margin: 6px 0;
}
.mm-hero a, .entry-content .mm-hero a {
  color: #fff;
  text-decoration: underline;
}
.mm-hero .mm-eyebrow {
  display: inline-block;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  background: rgba(255,255,255,.18);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* Year-tile grid used for /seasons/ and the homepage preview band */
.mm-year-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 24px 0;
}
.mm-year-tile {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none !important;
  color: #fff;
  background: #b86a1a;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 4px 12px -6px rgba(0,0,0,.25);
}
.mm-year-tile:hover, .mm-year-tile:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.35);
}
.mm-year-tile .mm-year-num {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  font-size: 2.4em;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.mm-year-tile .mm-year-label {
  position: absolute;
  top: 14px; left: 16px; right: 16px;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.85;
  font-weight: 600;
}
.mm-year-tile .mm-year-tag {
  position: absolute;
  top: 42px; left: 16px; right: 16px;
  font-size: 0.95em;
  font-style: italic;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Highlight list with hand-stamped tick.
   The !important on list-style overrides TwentyTwelve's .entry-content ul rule
   which would otherwise render double bullets next to our ✦. */
ul.mm-highlights { list-style: none !important; padding: 0; margin: 18px 0; }
ul.mm-highlights li {
  padding: 10px 0 10px 32px;
  border-bottom: 1px solid #f0e6d8;
  position: relative;
  line-height: 1.5;
  list-style: none !important;
}
ul.mm-highlights li::before {
  content: "✦";
  color: #f7931d;
  position: absolute;
  left: 6px;
  top: 10px;
  font-size: 1.15em;
}
ul.mm-highlights li:last-child { border-bottom: 0; }

/* Photo grid for the gallery page */
.mm-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.mm-photo-grid figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #f4e8d5;
  aspect-ratio: 4 / 3;
}
.mm-photo-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.mm-photo-grid figure:hover img { transform: scale(1.05); }
.mm-photo-grid figcaption {
  position: absolute;
  inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 100%);
  color: #fff;
  padding: 24px 12px 10px;
  font-size: 0.85em;
}

/* "Now showing" current-season callout */
.mm-now {
  background: #fff7eb;
  border-left: 4px solid #f7931d;
  padding: 14px 18px;
  margin: 22px 0;
  border-radius: 0 6px 6px 0;
}
.mm-now strong { color: #a55a1f; }

/* Prev/next inline nav */
.mm-seasons-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 32px 0 16px;
  padding: 16px 0;
  border-top: 1px solid #e8d9be;
  border-bottom: 1px solid #e8d9be;
  font-size: 0.95em;
}
.mm-seasons-nav a { color: #a55a1f; text-decoration: none; }
.mm-seasons-nav a:hover { color: #f7931d; }
.mm-seasons-nav .mm-prev::before { content: "← "; }
.mm-seasons-nav .mm-next::after { content: " →"; }

/* Subtle entrance animation for tiles and hero */
@keyframes mmFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mm-hero, .mm-year-tile, .mm-photo-grid figure {
  animation: mmFadeUp .6s ease both;
}
.mm-year-tile:nth-child(2) { animation-delay: .05s; }
.mm-year-tile:nth-child(3) { animation-delay: .10s; }
.mm-year-tile:nth-child(4) { animation-delay: .15s; }
.mm-year-tile:nth-child(5) { animation-delay: .20s; }
.mm-photo-grid figure:nth-child(n+3) { animation-delay: .08s; }
.mm-photo-grid figure:nth-child(n+6) { animation-delay: .14s; }