/***********************************************
 * GA Styles (responsive rev)  —  2025-08-12
 * - Desktop look preserved
 * - Mobile/tablet friendly
 * - Removes legacy fixed widths/floats
 ***********************************************/

/* 0) Base / reset-ish */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
:where(button,input,select,textarea) { font: inherit; }

/* 1) Generic layout helpers */
.wrapper { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.cf::after { content: ""; display: table; clear: both; }

/* 2) Container / page chrome */
.ga-container {
  width: 100%;
  clear: both;
  background: url(/theme/default/image/tb-ga-event-bg.png);
}

/* 3) Header */
header.ga-header-event {
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #c8cccd;
  min-height: 60px;
}
header.ga-header-event .wrap {
  max-width: 940px; margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
header.ga-header-event .wrap .ga-logo { margin: 0; }
header.ga-header-event .wrap nav { display: flex; gap: 12px; }
header.ga-header-event .wrap nav a { color: #999; padding: 8px 10px; }
header.ga-header-event .wrap nav a:hover { color: #000; }
header.ga-header-event .wrap .addthis-wrap { padding: 0; }

/* 4) Hero / hgroup */
.grey-shadow { box-shadow: inset 0 45px 175px rgba(0,0,0,.18); }

.ga-event-hgroup { width: 100%; margin: 0 0 20px; }
.ga-event-hgroup .wrapper {
  max-width: 778px; width: 100%; margin: 0 auto; padding: 0 16px;
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
}
.ga-event-hgroup .wrapper .left { padding: 24px 0 0; }
.ga-event-hgroup .wrapper .left h3 { font-weight: normal; margin: 0 0 8px; }
.ga-event-hgroup .wrapper .left time { display: block; margin-bottom: 6px; }
.ga-event-hgroup .wrapper .left address { color: #999; }
.ga-event-hgroup .wrapper .left address a:hover { color: #000; }
.ga-event-hgroup .wrapper figure { width: 225px; padding: 16px 0; overflow: hidden; }
.ga-event-hgroup .wrapper figure > img { display:block; width: 100%; height: auto; }

@media (max-width: 640px) {
  .ga-event-hgroup .wrapper { grid-template-columns: 1fr; }
  .ga-event-hgroup .wrapper figure { width: 60%; }
}

/* 5) Event white section (schedule + ticket types) */
.ga-event-white {
  background: #fff;
  border-top: 2px #b0b2b5 solid;
}
.ga-event-white .schedule,
.ga-event-white .ga-ticket-type {
  width: 100%;
  border-bottom: 1px #e0e0df solid;
}
.ga-event-white .schedule .wrapper,
.ga-event-white .ga-ticket-type .wrapper {
  max-width: 778px; width: 100%; margin: 0 auto; padding: 0 16px;
}
.ga-event-white .schedule .schedule-box { width: auto; padding: 20px 0 0; }
.ga-event-white .schedule .schedule-box .legend { padding: 6px 26px 0 0; display: inline-block; }

/* 6) Ticket table — responsive grid */
.ga-ticket-type-table dt {
  border-bottom: 2px #e0e0df solid;
  color: #636466;
  padding: 20px 0 6px;
}

/* Reset legacy fixed widths/floats (including old .pan-* variants) */
.ga-ticket-type-table .span-a,
.ga-ticket-type-table .span-b,
.ga-ticket-type-table .span-c,
.ga-ticket-type-table .span-d,
.ga-ticket-type-table .span-e,
.ga-ticket-type-table .pan-a,
.ga-ticket-type-table .pan-b,
.ga-ticket-type-table .pan-c,
.ga-ticket-type-table .pan-d,
.ga-ticket-type-table .pan-e {
  width: auto !important;
  float: none !important;
  padding-right: 10px;
}

/* Each data row is a 5-col grid: A, E, B, C, D */
.ga-ticket-type-table > div {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr minmax(70px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 0 10px;
  border-bottom: 1px #e0e0df solid;
  line-height: 1.3;
}

/* Header row (desktop) should match 5 cols */
.ga-ticket-type-table dt.mus5 {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 12px;
}

/* Lock each span into its column */
.ga-ticket-type-table > div > .span-a { grid-column: 1; }
.ga-ticket-type-table > div > .span-e { grid-column: 2; }
.ga-ticket-type-table > div > .span-b { grid-column: 3; }
.ga-ticket-type-table > div > .span-c { grid-column: 4; }
.ga-ticket-type-table > div > .span-d { grid-column: 5; justify-self: end; }
.ga-ticket-type-table > div > input.span-d { grid-column: 5; justify-self: end; }

/* Quantity input sizing/alignment */
.ga-ticket-type-table .span-d { text-align: right; }
.ga-ticket-type-table input[type="number"].span-d {
  max-width: 90px; height: 32px; padding: 2px 6px; text-align: right;
}

/* Inputs visual */
.ga-ticket-type-table input { color: #000; font-weight: normal; }

/* Credit card logos + action row */
.ga-ticket-type .wrapper .credit-card-box {
  padding: 20px 0;
  display: flex; gap: 16px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
}
.ga-ticket-type .wrapper .credit-card-box figure { display:flex; gap:9px; align-items:center; padding: 0; }
.ga-ticket-type .wrapper .credit-card-box figure span {
  width: 27px; height: 17px;
  background: url(/theme/default/image/tb-ga-left-sidebar-figure-sprite.png) no-repeat;
  display: inline-block;
}
.ga-ticket-type .wrapper .credit-card-box figure span.visa { background-position: 0 -140px; }
.ga-ticket-type .wrapper .credit-card-box figure span.mastercard { background-position: 0 -157px; }
.ga-ticket-type .wrapper .credit-card-box figure span.amex { background-position: 0 -174px; }
.ga-ticket-type .wrapper .credit-card-box figure span.discover { background-position: 0 -191px; }
.event-btn .bigbtn { min-height: 44px; padding: 10px 16px; }

/* Mobile stacking for ticket rows */
@media (max-width: 759px) {
  .ga-ticket-type-table dt { display: none; }
  .ga-ticket-type-table > div { grid-template-columns: 1fr 1fr; gap: 8px 12px; }

  /* Show context labels from data-label attr on small screens */
  .ga-ticket-type-table .span-a::before,
  .ga-ticket-type-table .span-b::before,
  .ga-ticket-type-table .span-c::before,
  .ga-ticket-type-table .span-d::before,
  .ga-ticket-type-table .span-e::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    opacity: .7;
    margin-bottom: 2px;
  }
}
/* Hide fee on very narrow phones if desired */
@media (max-width: 360px) {
  .ga-ticket-type-table .span-c { display: none; }
}

/* 7) Event details (article + aside) */
.ga-event-grey {}
.ga-event-grey .wrapper {
  max-width: 940px; margin: 0 auto;
  padding: 28px 16px 120px;
  display: grid; grid-template-columns: 2fr 1fr; gap: 24px;
}
.ga-event-grey .wrapper article .article-box { width: auto; min-height: 100px; }
.ga-event-grey .wrapper article .article-box .article-padding {
  padding: 26px 24px; color: #000; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.ga-event-grey .wrapper aside { width: auto; }
.ga-event-grey .wrapper aside .sidebar { margin: 0 0 19px; }
.ga-event-grey .wrapper aside .sidebar address { padding: 16px 0; }
.ga-event-grey .wrapper aside .sidebar .gmap { border: 1px #ccc solid; width: 100%; max-width: 376px; height: 200px; }

@media (max-width: 860px) {
  .ga-event-grey .wrapper { grid-template-columns: 1fr; }
}

/* 8) Order summary (keep within width, responsive) */
.ga-order-summary,
.ga-order-summary .wrapper { max-width: 1000px; width: 100%; margin: 0 auto; padding: 0 16px; }
.ga-order-summary .wrapper .ga-ticket-type .wrapper { max-width: 778px; }
.ga-order-summary .wrapper .tips { max-width: 940px; margin: 0 auto 42px; }

/* 9) Misc legacy utility (kept, but made fluid) */
.figure { background: transparent; width: 140px; height: 90px; overflow: hidden; margin: 0 20px 0 0; }
.figure img { width: 140px; height: auto; }
.figure-s { background: transparent; width: 100px; height: 65px; overflow: hidden; margin: 0 20px; }
.figure-s img { width: 140px; height: auto; }

/* 10) Accessibility helpers */
#qty-error { color:#c00; margin:8px 0; }
[aria-live="polite"] { }

/* 11) Spacing for sticky header anchor jumps */
html { scroll-padding-top: 72px; }

/* Visually-hidden, screen-reader friendly */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Desktop/tablet table */
.ga-ticket-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* keeps columns steady */
}
.ga-ticket-table th, .ga-ticket-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #e0e0df;
  vertical-align: middle;
  word-wrap: break-word;
}
.ga-ticket-table thead th {
  text-transform: uppercase;
  font-size: 12px;
  color: #636466;
  border-bottom: 2px solid #e0e0df;
}
.ga-ticket-table .qty-col, .ga-ticket-table .qty-cell { text-align: right; }
.ga-ticket-table .qty-input {
  max-width: 90px; height: 32px; padding: 2px 6px; text-align: right;
}

/* Mobile: turn rows into cards */
@media (max-width: 760px) {
  .ga-ticket-table {
    border: 0;
  }
  .ga-ticket-table thead {
    display: none;
  }
  .ga-ticket-table tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr; /* two columns on phones */
    gap: 8px 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0df;
  }
  .ga-ticket-table td {
    border: 0;
    padding: 0;
  }
  .ga-ticket-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 2px;
  }
  /* Make ticket name span both columns at top */
  .ga-ticket-table td:first-child {
    grid-column: 1 / -1;
  }
  /* Keep quantity aligned to right edge */
  .ga-ticket-table .qty-cell {
    justify-self: end;
  }
  .ga-ticket-table .qty-input { max-width: 96px; }
  /* Optional: hide Fee on very narrow screens */
  @media (max-width: 360px) {
    .ga-ticket-table td[data-label="<?= __('Fee') ?>"] { display: none; }
  }
}