/*
  Armenian Arts Theme — Brand-Matched Editorial
  Whitelabel front page styles for tickets.armenianarts.com.

  Color system mirrors armenianarts.com's published brand variables
  (--cs-white, --cs-black [deep navy #0d1f2d], --cs-blue [electric
  #2639e2], --cs-red [actually orange #FF9334], --cs-bg-grey, etc.) so
  the ticketing front feels like a continuation of their main site rather
  than a separate property. Layout language stays editorial — asymmetric
  hero, gallery-poster event cards, vertical date overlays, carved corner
  details on hover — but expressed in the brand's actual modern + cool
  palette instead of warm parchment.

  Typography is Lexend (matches the brand's loaded Google Font), which is
  designed for readability and gives the page distinctive character
  without departing from brand. Italic 500 weight is used for editorial
  accents.

  Copyright 2005-Present, ITS MY SEAT INC.
*/

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@200;300;400;500;600;700;800&family=Lexend:ital,wght@1,300;1,400;1,500&display=swap');

:root {
  /* Brand palette — sourced from armenianarts.com's --cs-* CSS variables. */
  --aa-white:       #FFFFFF;   /* page background */
  --aa-soft:        #f8f5f4;   /* card / subtle alt background */
  --aa-grey:        #e0dcd4;   /* borders */
  --aa-shadow:      #e8e8e8;
  --aa-navy:        #0d1f2d;   /* primary text (cool deep navy, not pure black) */
  --aa-navy-soft:   #2a3a4a;
  --aa-muted:       #787E84;
  --aa-muted-soft:  #A7AFB5;
  --aa-blue:        #2639e2;   /* primary action — links, hover, active */
  --aa-blue-deep:   #1a28a3;
  --aa-blue-light:  #569DFF;
  --aa-orange:      #FF9334;   /* accent — badges, dots, energetic moments */
  --aa-orange-deep: #e07820;

  --aa-font-display: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aa-font-body:    'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --aa-shadow-card: 0 24px 56px -28px rgba(13, 31, 45, 0.18);
  --aa-shadow-soft: 0 8px 24px -12px rgba(13, 31, 45, 0.10);

  --aa-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body.aa-front {
  background: var(--aa-white);
  color: var(--aa-navy);
  font-family: var(--aa-font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Top accent rule (brand blue + orange tri-stripe — modern brand mark) ─ */
.aa-top-rule {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--aa-blue)   0%,
    var(--aa-blue)  60%,
    var(--aa-orange) 60%,
    var(--aa-orange) 80%,
    var(--aa-navy)  80%,
    var(--aa-navy) 100%
  );
}

/* ─── Navigation ─────────────────────────────────────────── */
.aa-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3.5rem;
  border-bottom: 1px solid var(--aa-grey);
  background: var(--aa-white);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(6px);
}

.aa-nav-mark {
  font-family: var(--aa-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--aa-navy);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1;
}
.aa-nav-mark .aa-mark-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--aa-blue);
  color: var(--aa-white);
  font-weight: 700;
  font-size: 1.1rem;
  border-radius: 6px;
  letter-spacing: 0;
}
.aa-nav-mark em {
  font-style: italic;
  color: var(--aa-orange);
  font-weight: 600;
}

.aa-nav-links {
  list-style: none;
  display: flex;
  gap: 2.5rem;
  align-items: center;
}
.aa-nav-links a {
  color: var(--aa-navy-soft);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  position: relative;
  padding-bottom: 4px;
}
.aa-nav-links a:hover { color: var(--aa-blue); }
.aa-nav-links a.active { color: var(--aa-navy); }
.aa-nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  background: var(--aa-blue);
  border-radius: 1px;
}

.aa-burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}
.aa-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--aa-navy);
  margin: 5px 0;
  transition: all 0.3s var(--aa-ease-out);
}

/* ─── Hero — editorial asymmetric ────────────────────────── */
.aa-hero {
  max-width: 1320px;
  margin: 0 auto;
  padding: 5.5rem 3.5rem 4rem;
}

.aa-hero-eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--aa-blue);
  font-weight: 600;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.aa-hero-eyebrow::before {
  content: '';
  width: 42px;
  height: 1px;
  background: var(--aa-blue);
}

.aa-hero h1 {
  font-family: var(--aa-font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--aa-navy);
}
.aa-hero h1 em {
  font-style: italic;
  color: var(--aa-orange);
  font-weight: 500;
  display: block;
  margin-top: -0.05em;
  letter-spacing: -0.025em;
}

.aa-hero-tag {
  font-family: var(--aa-font-body);
  font-size: 1.15rem;
  color: var(--aa-navy-soft);
  margin-top: 1.75rem;
  max-width: 560px;
  line-height: 1.55;
  font-weight: 400;
}

/* ─── Section heading ─────────────────────────────────────── */
.aa-section-head {
  max-width: 1320px;
  margin: 4rem auto 2.5rem;
  padding: 0 3.5rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}
.aa-section-head h2 {
  font-family: var(--aa-font-display);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--aa-navy);
  letter-spacing: -0.025em;
  line-height: 1;
}
.aa-section-head h2 em {
  font-style: italic;
  color: var(--aa-blue);
  font-weight: 500;
}
.aa-section-head .aa-rule {
  flex: 1;
  height: 1px;
  background: var(--aa-grey);
  align-self: center;
}
.aa-section-head .aa-count {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aa-orange);
  font-weight: 600;
}

/* ─── Events grid — gallery posters ──────────────────────── */
.aa-events {
  max-width: 1320px;
  margin: 0 auto 6rem;
  padding: 0 3.5rem;
}

.aa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 2.5rem 2rem;
}

.aa-card {
  background: var(--aa-white);
  border: 1px solid var(--aa-grey);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  transition:
    transform 0.4s var(--aa-ease-out),
    box-shadow 0.4s var(--aa-ease-out),
    border-color 0.3s ease;
  opacity: 0;
  animation: aa-rise 0.7s var(--aa-ease-out) forwards;
}

@keyframes aa-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.aa-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--aa-shadow-card);
  border-color: var(--aa-blue);
}

/* Carved-corner detail on hover (top-left + bottom-right) — brand blue */
.aa-card::before,
.aa-card::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--aa-blue);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.aa-card::before {
  top: 0; left: 0;
  border-right: none; border-bottom: none;
}
.aa-card::after {
  bottom: 0; right: 0;
  border-left: none; border-top: none;
}
.aa-card:hover::before,
.aa-card:hover::after { opacity: 1; }

.aa-card-img {
  position: relative;
  aspect-ratio: 15 / 8;   /* matches 300×160 source thumbnails */
  overflow: hidden;
  background: var(--aa-soft);
}
.aa-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--aa-ease-out);
  display: block;
}
.aa-card:hover .aa-card-img img {
  transform: scale(1.05);
}

/* Vertical date stack (museum-label aesthetic, brand colors) */
.aa-card-datebox {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: var(--aa-white);
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--aa-blue);
  border-radius: 3px;
  text-align: center;
  font-family: var(--aa-font-display);
  line-height: 1.05;
  min-width: 58px;
  box-shadow: var(--aa-shadow-soft);
}
.aa-card-datebox .aa-mo {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aa-blue);
  font-weight: 700;
}
.aa-card-datebox .aa-dy {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--aa-navy);
  margin-top: 1px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.aa-card-datebox .aa-tm {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--aa-muted);
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: 500;
}

.aa-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: var(--aa-navy);
  color: var(--aa-white);
  padding: 0.32rem 0.7rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
}
.aa-badge-sold    { background: var(--aa-navy); color: var(--aa-white); }
.aa-badge-urgent  { background: var(--aa-orange); color: var(--aa-navy); }
.aa-badge-limited { background: var(--aa-blue); color: var(--aa-white); }

.aa-card-body {
  padding: 1.5rem 1.5rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.aa-card-title {
  font-family: var(--aa-font-display);
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--aa-navy);
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.aa-card-sub {
  font-style: italic;
  font-family: var(--aa-font-body);
  color: var(--aa-muted);
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
  line-height: 1.4;
  font-weight: 400;
}

.aa-card-venue {
  font-size: 0.82rem;
  color: var(--aa-muted);
  margin-top: auto;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0;
  font-weight: 400;
}
.aa-card-venue::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--aa-orange);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.aa-card-cta {
  font-family: var(--aa-font-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aa-navy);
  font-weight: 600;
  border-top: 1px solid var(--aa-grey);
  padding-top: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s ease;
}
.aa-card-cta-arrow {
  color: var(--aa-blue);
  font-size: 1.1rem;
  transition: transform 0.3s var(--aa-ease-out);
  display: inline-block;
}
.aa-card:hover .aa-card-cta { color: var(--aa-blue); }
.aa-card:hover .aa-card-cta-arrow { transform: translateX(5px); }

/* ─── Empty state ────────────────────────────────────────── */
.aa-empty {
  text-align: center;
  padding: 5rem 2rem;
  font-family: var(--aa-font-body);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--aa-muted);
  font-weight: 400;
}
.aa-empty-orn {
  display: block;
  font-style: normal;
  color: var(--aa-grey);
  font-size: 1.1rem;
  letter-spacing: 1.5em;
  margin: 0 0 1.25rem 1.5em;
}

/* ─── Footer ─────────────────────────────────────────────── */
.aa-footer {
  background: var(--aa-navy);
  color: var(--aa-white);
  padding: 4.5rem 3.5rem 2.5rem;
  margin-top: 4rem;
  position: relative;
}
.aa-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--aa-blue)   0%,
    var(--aa-blue)  60%,
    var(--aa-orange) 60%,
    var(--aa-orange) 80%,
    var(--aa-soft)  80%,
    var(--aa-soft) 100%
  );
}

.aa-footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.aa-footer-brand {
  font-family: var(--aa-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
  line-height: 1;
}
.aa-footer-brand em {
  color: var(--aa-orange);
  font-style: italic;
  font-weight: 500;
}
.aa-footer-tag {
  color: var(--aa-muted-soft);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.aa-footer-col h4 {
  font-family: var(--aa-font-body);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aa-orange);
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.aa-footer-col ul { list-style: none; }
.aa-footer-col li { margin-bottom: 0.65rem; }
.aa-footer-col a {
  color: var(--aa-white);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}
.aa-footer-col a:hover { color: var(--aa-blue-light); }

.aa-footer-bottom {
  max-width: 1320px;
  margin: 3.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(224, 220, 212, 0.18);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--aa-muted-soft);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: 1rem;
}
.aa-footer-bottom a {
  color: var(--aa-orange);
  text-decoration: none;
  font-weight: 500;
}
.aa-footer-bottom a:hover { text-decoration: underline; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .aa-hero {
    padding: 3.5rem 2rem 2.5rem;
  }
  .aa-section-head, .aa-events { padding: 0 2rem; }
  .aa-footer { padding: 3rem 2rem 2rem; }
  .aa-footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .aa-footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 768px) {
  .aa-nav { padding: 1.1rem 1.5rem; }
  .aa-nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--aa-white);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
    border-bottom: 1px solid var(--aa-grey);
    display: none;
    box-shadow: var(--aa-shadow-soft);
  }
  .aa-nav-links.open { display: flex; }
  .aa-nav-links a.active::after { display: none; }
  .aa-burger { display: block; }
  .aa-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .aa-card-datebox { min-width: 52px; padding: 0.45rem 0.6rem; }
  .aa-card-datebox .aa-dy { font-size: 1.45rem; }
}

@media (max-width: 480px) {
  .aa-grid { grid-template-columns: 1fr; }
  .aa-hero { padding: 2.5rem 1.5rem 2rem; }
  .aa-section-head, .aa-events { padding: 0 1.5rem; }
  .aa-section-head h2 { font-size: 1.85rem; }
}