/* Site polish (Felix, 15 Oct 2026): the 9.5/10 pass over every page at phone, tablet and desktop. Design lane only. Loads last. */

/* ---- Header ---------------------------------------------------------------- */
@media(max-width:759px){
  .site-header a.brand{display:inline-flex;align-items:center;min-height:44px}
}
@media(min-width:1000px){
  /* The compact search pill was squeezed to "Searc... Next ..."; give it the room the nav didn't need */
  .site-header .header-main{gap:16px}
  .site-header .header-area-group{flex:0 1 230px;min-width:0}
  .site-header form.header-search{flex:1 1 320px;max-width:420px;min-width:0}
  .site-header .header-search-open{width:100%;padding-left:16px}
  .site-header .header-search-open>svg:first-child{display:none} /* was a map pin on a search box */
  .site-header .header-main>nav{flex:0 0 auto;gap:4px}
}

/* ---- Home: phone search row ------------------------------------------------ */
@media(max-width:759px){
  /* Date becomes an icon button (the date is already in the summary line), so nothing is cut off */
  .page-home .mobile-discovery{grid-template-columns:minmax(0,1fr) auto}
  .page-home .mobile-discovery>.mobile-discovery-controls>button.mobile-date-control{position:relative;width:48px;max-width:none;padding:0;justify-content:center}
  .page-home .mobile-date-control>[data-mobile-date-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .page-home .mobile-discovery>.mobile-discovery-controls>button.mobile-filter-control{max-width:none}
  /* Live line wraps onto two lines instead of being cut off */
  .page-home .discovery-hero .eyebrow{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance;line-height:1.5;height:auto;max-width:300px;margin-inline:auto}
}

/* ---- Home: Festivals & big events as proper cards ----------------------------- */
.page-home #main .festival-cards .event-card{display:flex;margin:0;background:var(--gg-surface);border:1px solid var(--gg-border);border-radius:var(--gg-radius);overflow:hidden;min-width:0}
.page-home #main .festival-cards .event-card>a{display:flex;flex-direction:column;width:100%;color:inherit;text-decoration:none;padding:0}
.page-home #main .festival-cards .card-art{position:relative;aspect-ratio:16/9;width:100%;height:auto;margin:0;overflow:hidden;border-radius:0;background:var(--gg-bg-hero);border-bottom:1px solid var(--gg-border)}
.page-home #main .festival-cards .card-art>img{width:100%;height:100%;object-fit:cover;display:block}
.page-home #main .festival-cards .card-art .event-art{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;display:grid;place-items:center;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--category-color,var(--gg-text-3)) 16%,transparent) 0 14px,color-mix(in srgb,var(--category-color,var(--gg-text-3)) 6%,transparent) 14px 28px),var(--gg-bg-hero)}
.page-home #main .festival-cards .card-art .event-art img{width:36px;height:36px;opacity:.35}
.page-home #main .festival-cards .card-art .event-art span{display:none}
.page-home #main .festival-cards .card-time{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:var(--gg-radius-xs);background:rgba(0,0,0,.72);color:var(--gg-text);font:600 12px/1.3 var(--gg-font-display)}
.page-home #main .festival-cards .card-copy{display:flex;flex-direction:column;gap:4px;flex:1 1 auto;padding:14px 16px 16px}
.page-home #main .festival-cards .card-eyebrow{margin:0;color:var(--gg-success);font:700 12px/1.3 var(--gg-font-display);letter-spacing:.08em;text-transform:uppercase}
.page-home #main .festival-cards h3{margin:0;font:700 16px/1.3 var(--gg-font-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.page-home #main .festival-cards .card-copy>p:not(.card-eyebrow){margin:0;color:var(--gg-text-3);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-home #main .festival-cards .card-meta{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--gg-text-2)}
.page-home #main .festival-cards .event-card:has(.type-festival){--category-color:var(--gg-cat-festivals)}
.page-home #main .festival-cards .event-card:has(.type-concert){--category-color:var(--gg-cat-concerts)}
.page-home #main .festival-cards .event-card:has(.type-live-music){--category-color:var(--gg-cat-live-bands)}
.page-home #main .festival-cards .event-card:has(.type-cultural){--category-color:var(--gg-cat-cultural)}
@media(min-width:760px){.page-home #main .festival-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(min-width:1000px){.page-home #main .festival-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- Home: Browse Australia, name over state so long names line up ------------ */
.page-home #main .browse-region-grid button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:3px;align-content:center;padding:12px 16px;text-align:left}
.page-home #main .browse-region-grid button>strong{grid-column:1;grid-row:1;line-height:1.25}
.page-home #main .browse-region-grid button>small{grid-column:1;grid-row:2;font:600 11px/1.2 var(--gg-font-display);letter-spacing:.08em;color:var(--gg-text-3);margin:0}
.page-home #main .browse-region-grid button::after{grid-column:2;grid-row:1 / span 2;align-self:center}

/* ---- Gig rows everywhere ------------------------------------------------------ */
@media(min-width:760px){
  /* The start time was 10px under the date; it's the most useful fact on a tonight list */
  body #main .navigation-row .event-date .event-date-time{font:700 13px/1.2 var(--gg-font-display);color:var(--gg-text);margin-top:4px}
  /* One white button per screen: row Details buttons become outline buttons */
  body #main .navigation-row .row-details{background:transparent;color:var(--gg-text);border:1px solid var(--gg-border-strong)}
  body #main .navigation-row .row-details:hover{background:var(--gg-surface-3);border-color:var(--gg-text-4)}
}
@media(max-width:759px){
  /* "THU 15 OCT" stays on one line above the time */
  body #main .gig-result.navigation-row.navigation-row{grid-template-columns:78px minmax(0,1fr) 44px}
  body #main .gig-result.navigation-row .event-date>span:not(.event-date-time),
  body #main .gig-result.navigation-row .event-date>strong{letter-spacing:.02em;white-space:nowrap}
  .tonight-quick-filters{scrollbar-width:none}
  .tonight-quick-filters::-webkit-scrollbar{display:none}
}
.featured-cards{scrollbar-width:none}
.featured-cards::-webkit-scrollbar{display:none}
@media(max-width:759px){
  /* Travel line ("35 min estimated drive · Too late for the listed start") wraps to 2 lines instead of being cut mid-word */
  body #main .gig-result.navigation-row .event-copy .travel-line{white-space:normal!important;text-wrap:wrap!important;text-overflow:clip!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
}

/* ---- Footer ----------------------------------------------------------------- */
.site-footer .gg-consent-open{margin-inline:0} /* Tracking choices button sat 12px in from everything else */
@media(max-width:759px){
  body .site-footer.site-footer{padding-inline:16px} /* same 16px edge as the page */
  .site-footer nav a{align-items:flex-start;padding-block:12px;box-sizing:border-box;line-height:1.35} /* two-line links line up with their neighbour */
}

/* ---- Header on tablets ---------------------------------------------------------- */
@media(min-width:560px) and (max-width:999px){
  /* The × for clearing the area floated 200px away from the area box; the box now fills its space */
  .site-header .header-area-group .area-picker{width:100%;max-width:none;box-sizing:border-box;padding-right:48px}
}
/* Tonight / This weekend kept an empty tick space when not selected, so the nav looked off-centre */
.site-header .header-main>nav form>button[aria-pressed=false]::before{display:none}

/* ---- Featured on tablets: shorter photo so the price line isn't cut off ---------- */
@media(min-width:760px) and (max-width:999px){
  .featured-photo,.featured-art{aspect-ratio:16/10}
}

/* ---- Gig rows on tablet and desktop: every row lines up -------------------------- */
/* Rows with a photo had a 64px thumbnail and rows without had a 32px icon, so act names
   started at different places down the list. Now every row has the same 72px square. */
@media(min-width:760px){
  body #main .gig-result.navigation-row.navigation-row{grid-template-columns:56px 72px minmax(0,1fr) 44px auto;grid-template-areas:none;column-gap:16px;align-items:center;padding:12px 16px;min-height:0;height:auto}
  body #main .gig-result.navigation-row.navigation-row:not(:has(.save-gig)){grid-template-columns:56px 72px minmax(0,1fr) auto}
  body #main .gig-result.navigation-row>:is(.event-art,.gig-photo){display:grid;width:72px;height:72px;min-width:0;margin:0;border-radius:var(--gg-radius);overflow:hidden;align-self:center}
  body #main .gig-result.navigation-row>.gig-photo img{width:100%;height:100%;object-fit:cover;border-radius:0}
  body #main .gig-result.navigation-row>.event-art{place-items:center;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--row-color,var(--gg-text-3)) 16%,transparent) 0 10px,color-mix(in srgb,var(--row-color,var(--gg-text-3)) 6%,transparent) 10px 20px),var(--gg-bg-hero);border:1px solid var(--gg-border)}
  body #main .gig-result.navigation-row>.event-art img{width:26px;height:26px;opacity:.45}
  body #main .gig-result.navigation-row>.event-art span{display:none}
  /* Title, then tag and venue on one line, then the travel line. No big gap under the tag. */
  body #main .gig-result.navigation-row .event-copy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
  body #main .gig-result.navigation-row .event-copy>h3{flex:0 0 100%;margin:0}
  body #main .gig-result.navigation-row .event-copy>:is(.row-tags,.venue){margin:0;flex:none}
  body #main .gig-result.navigation-row .event-copy>.venue{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gg-text-2)}
  body #main .gig-result.navigation-row .event-copy>.travel-line{flex:0 0 100%;margin:0}
}
body #main .gig-result:has(.type-live-music){--row-color:var(--gg-cat-live-bands)}
body #main .gig-result:has(.type-dj){--row-color:var(--gg-cat-djs)}
body #main .gig-result:has(.type-festival){--row-color:var(--gg-cat-festivals)}
body #main .gig-result:has(.type-concert){--row-color:var(--gg-cat-concerts)}
body #main .gig-result:has(.type-theatre){--row-color:var(--gg-cat-theatre)}
body #main .gig-result:has(.type-comedy){--row-color:var(--gg-cat-comedy)}
body #main .gig-result:has(.type-cabaret){--row-color:var(--gg-cat-cabaret)}
body #main .gig-result:has(.type-dance){--row-color:var(--gg-cat-dance)}
body #main .gig-result:has(.type-cultural){--row-color:var(--gg-cat-cultural)}
body #main .gig-result:has(.type-family){--row-color:var(--gg-cat-family)}
body #main .gig-result:has(.type-tribute){--row-color:var(--gg-cat-tribute)}
body #main .gig-result:has(.type-other-entertainment){--row-color:var(--gg-cat-other)}

/* ---- One left edge on desktop ------------------------------------------------------ */
/* The header starts at the 1220px content edge, but breadcrumbs sat 26px in, the gig page
   sat 70px in (1080px wide) and Featured on the gig page sat 70px in. All now share one edge. */
@media(min-width:760px){
  .seo-breadcrumbs{max-width:var(--gg-content);width:auto;padding-inline:0;margin-inline:auto;box-sizing:border-box}
  body:is(.page-place,.page-gig,.page-venue,.page-places,.page-saved) .seo-breadcrumbs{width:calc(100% - 2 * var(--gg-gutter))}
  body #main>.act-page{padding-inline:0}
  .experience-content,.category-parent-links{max-width:none;padding-inline:0}
}
@media(min-width:1000px){
  body #main>.featured-strip .featured-inner{max-width:var(--gg-content)}
  body.page-gig .event-heading>*{max-width:var(--gg-content)}
  body.page-gig #main>.event-detail-grid{max-width:var(--gg-content);width:calc(100% - 2 * var(--gg-gutter));padding-inline:0;margin-inline:auto;box-sizing:border-box}
  body.page-gig #main>.event-source-wrap{max-width:var(--gg-content);padding-inline:0}
  /* Venue, saved and things-to-do pages were 1080-1132px wide; now the same 1220px as the header */
  .venue-heading>div,.event-heading-inner{max-width:var(--gg-content)}
  body #main>:is(.venue-content,.event-stay-wrap),body.page-saved .saved-content{max-width:calc(var(--gg-content) + 2 * var(--gg-gutter));padding-inline:var(--gg-gutter);box-sizing:border-box}
}
@media(min-width:760px){body #main>:is(.hub-month,.tour-links){padding-inline:0}} /* tours and festivals sections sat 16px in */

/* ---- Gig page ------------------------------------------------------------------------ */
/* The Tickets panel ended 16px below the last gig row (Felix, 15 Oct); now they end together */
body.page-gig .event-story>:last-child>:last-child{margin-bottom:0}
/* Navy bars beside portrait photos clashed with the dark greys */
body.page-gig .event-story .gig-photo{background:var(--gg-bg-hero)}
@media(min-width:900px){body.page-gig .event-story>.gig-photo{max-height:480px}}

/* ---- Artist pages on phones ----------------------------------------------------------- */
@media(max-width:759px){
  /* Dates & tickets: each date was a 175px block with an "Upcoming" pill and a full-width
     Show details button. Now a compact card: date, then city and venue; the whole card opens the gig. */
  .act-table tbody tr{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 16px;grid-template-areas:"date go" "place go" "status go";column-gap:12px;row-gap:4px;align-items:center;margin:0 0 8px;padding:14px 16px;background:var(--gg-surface);border:1px solid var(--gg-border);border-radius:var(--gg-radius)}
  .act-table tbody tr::after{content:"";grid-area:go;width:8px;height:8px;border-top:2px solid var(--gg-text-3);border-right:2px solid var(--gg-text-3);transform:rotate(45deg);justify-self:center}
  .act-table tbody tr:hover{border-color:var(--gg-border-strong)}
  .act-table tbody td{padding:0;border:0;margin:0;min-width:0}
  .act-table tbody td:nth-child(1){grid-area:date;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .act-table tbody td:nth-child(1) .act-date{font:700 16px/1.25 var(--gg-font-display);color:var(--gg-text);text-decoration:none}
  .act-table tbody td:nth-child(1) .act-subline{font-size:12.5px;color:var(--gg-text-3)}
  .act-table tbody td:nth-child(2){grid-area:place;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:var(--gg-text-2)}
  .act-table tbody td:nth-child(2) .act-city-name{display:inline;color:var(--gg-text-1);font-weight:600}
  .act-table tbody td:nth-child(2) .act-city-name::after{content:" \00b7 ";color:var(--gg-text-3);font-weight:400}
  .act-table tbody td:nth-child(2) a{display:inline;color:inherit;text-decoration:none;pointer-events:none}
  .act-table tbody td:nth-child(3){grid-area:status}
  .act-table tbody td:has(.act-status-upcoming){display:none} /* "Upcoming" on every row said nothing; other statuses still show */
  .act-table tbody td:nth-child(4){display:contents}
  .act-table tbody td:nth-child(4) a.act-details{position:absolute;inset:0;z-index:1;font-size:0;color:transparent;background:none;border:0;border-radius:var(--gg-radius);min-height:0}
  .act-table tbody td:nth-child(4) a.act-details:focus-visible{outline:2px solid var(--gg-link);outline-offset:2px}
  /* Cities & venue guides and Make a trip of it: 26 stacked cards each (about 10,000px) become swipe rows */
  body #main .act-page :is(.act-city-grid,.act-trip-grid){display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:-16px;padding:0 16px 4px;scroll-padding-inline:16px}
  body #main .act-page :is(.act-city-grid,.act-trip-grid)::-webkit-scrollbar{display:none}
  body #main .act-page :is(.act-city-card,.act-trip-card){scroll-snap-align:start;margin:0;min-width:0}
}

/* ---- Phones: tap targets and the gig page -------------------------------------------- */
@media(max-width:759px){
  /* A gig row is one tap target. The venue name inside it was a separate 24px link that was easy to hit by mistake. */
  body #main .navigation-row .venue a{pointer-events:none;text-decoration:none;color:inherit}
  /* "Gigs in Brisbane / Queensland" links under the photo become 44px chips */
  .seo-area-links{flex-wrap:wrap;gap:8px}
  .seo-area-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--gg-border-strong);border-radius:var(--gg-radius);background:var(--gg-surface);color:var(--gg-text-1);text-decoration:none;font-size:14px}
  /* The start time / travel / leave-by box was only 204px wide; it now spans the screen like the Tickets box */
  body.page-gig #main>.event-detail-grid{grid-template-columns:minmax(0,1fr);align-items:stretch}
  body.page-gig .event-detail-grid>*,body.page-gig .event-story>*{grid-column:1/-1;min-width:0}
  /* Sticky ticket bar text was touching the screen edge */
  body.page-gig #main>.event-ticket-bar{padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;box-sizing:border-box}
}

/* ---- Area picker -------------------------------------------------------------------- */
/* Section labels and place names sat 8px in from the title and search box; now one edge */
#area-dialog .area-options{margin-inline:-8px;width:calc(100% + 16px);max-width:none;box-sizing:border-box}
#area-dialog .area-selection{align-items:center}
/* The chosen area ("Sale ×") was plain small text; now it looks like the chip it is */
#area-dialog .area-selected-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border:1px solid var(--gg-border-strong);border-radius:var(--gg-radius);background:var(--gg-surface-3);color:var(--gg-text);font:600 13.5px/1 var(--gg-font-body)}
#area-dialog .area-dialog-foot>a{display:inline-flex;align-items:center;gap:4px;min-height:44px}

/* ---- Top 10 on tablet and desktop ------------------------------------------------------ */
/* Two huge cards per row made the list 3,300px tall on desktop; three per row with 16:10 photos */
@media(min-width:1000px){body #main .whats-on-pick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:760px){
  body #main .whats-on-pick-grid .card-art{aspect-ratio:16/10;height:auto}
  body #main .whats-on-pick-grid .card-art .gig-photo,body #main .whats-on-pick-grid .card-art img{width:100%;height:100%;object-fit:cover}
}
/* Ten white buttons in a row of cards; outline buttons like Featured, and no second "See ticket info" */
body #main .whats-on-pick-grid .whats-on-ticket{background:transparent;color:var(--gg-text);border:1px solid var(--gg-border-strong)}
body #main .whats-on-pick-grid .whats-on-ticket:hover{background:var(--gg-surface-3);border-color:var(--gg-text-4)}
body #main .event-card:has(.whats-on-ticket) .card-meta>span:not(.event-type-tag){display:none}

/* ---- Filters panel ------------------------------------------------------------------------ */
/* On place, tonight and weekend pages the event-type ticks had no styles at all (results-filters.css
   only loads on /search), so boxes and names were scattered. Styled here for every page. */
#discovery-filters .event-type-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;border:0;margin:0;padding:12px 14px;min-width:0;background:var(--gg-surface);border-radius:var(--gg-radius)}
#discovery-filters .event-type-options legend{float:left;width:100%;grid-column:1/-1;font:600 14px/1.4 var(--gg-font-display);color:var(--gg-text-1);margin:0 0 2px;padding:0;display:flex;justify-content:space-between;align-items:center}
#discovery-filters .event-type-options>p{grid-column:1/-1;margin:0 0 6px;font-size:12.5px;color:var(--gg-text-3)}
#discovery-filters .event-type-options label{display:flex;align-items:center;gap:10px;min-height:44px;padding:0;margin:0;font-size:14px;color:var(--gg-text-1);cursor:pointer;min-width:0}
#discovery-filters .event-type-options label>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#discovery-filters .event-type-options input{width:18px;height:18px;min-height:0;padding:0;flex:none;margin:0;accent-color:var(--category-color,var(--gg-text-1))}
#discovery-filters .event-type-options label:has(input:checked){color:var(--category-color,var(--gg-text));font-weight:600}
#discovery-filters .event-type-options .type-live-music{--category-color:var(--gg-cat-live-bands)}
#discovery-filters .event-type-options .type-dj{--category-color:var(--gg-cat-djs)}
#discovery-filters .event-type-options .type-festival{--category-color:var(--gg-cat-festivals)}
#discovery-filters .event-type-options .type-concert{--category-color:var(--gg-cat-concerts)}
#discovery-filters .event-type-options .type-theatre{--category-color:var(--gg-cat-theatre)}
#discovery-filters .event-type-options .type-comedy{--category-color:var(--gg-cat-comedy)}
#discovery-filters .event-type-options .type-cabaret{--category-color:var(--gg-cat-cabaret)}
#discovery-filters .event-type-options .type-dance{--category-color:var(--gg-cat-dance)}
#discovery-filters .event-type-options .type-cultural{--category-color:var(--gg-cat-cultural)}
#discovery-filters .event-type-options .type-family{--category-color:var(--gg-cat-family)}
#discovery-filters .event-type-options .type-tribute{--category-color:var(--gg-cat-tribute)}
#discovery-filters .event-type-options .type-other-entertainment{--category-color:var(--gg-cat-other)}
@media(max-width:759px){
  /* The sheet stopped 120px short of the bottom with the page showing underneath; now full screen */
  #discovery-filters:popover-open{inset:0!important;height:100dvh!important;max-height:none!important;border-radius:0!important;z-index:1000}
  #discovery-filters .mobile-filter-date{padding-inline:0} /* date button lined up with everything else */
}

/* ---- Search box and suggestions ------------------------------------------------------------- */
/* "Add" sat in the middle of the location field after a chosen area; it now follows the chip */
.location-add{justify-content:flex-start;text-align:left}
/* Suggestions said "Artist" three times per row (group title, badge, and "Artist profile"); badge dropped */
.suggestion-kind{display:none}

@media(min-width:560px) and (max-width:999px){.site-header .header-main>nav :is(a,button){min-height:44px}}

/* ---- Festivals on phones --------------------------------------------------------------------- */
@media(max-width:759px){
  /* Line-ups wrapped to 5 rows of chips per card; now one row you can swipe, so the list is shorter */
  body #main .festival-card .festival-acts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:0 16px 2px;scroll-padding-inline:16px;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  body #main .festival-card .festival-acts::-webkit-scrollbar{display:none}
  body #main .festival-card .festival-acts>li{flex:none;white-space:nowrap}
  body #main .festival-card .festival-acts a,body #main .festival-card .festival-more{display:inline-flex;align-items:center;min-height:36px}
}
/* Standalone text links ("Places to stay nearby", "All tonight's gigs") get a 44px tap area */
body #main :is(.festival-stay,.section-link,.category-option){display:inline-flex;align-items:center;gap:4px;min-height:44px}
/* Tablets: Featured on place, gig and venue pages ran to the screen edge with no side margin */
@media(min-width:760px) and (max-width:999px){body:is(.page-place,.page-gig,.page-venue,.page-places,.page-saved) #main>.featured-strip .featured-inner{padding-inline:var(--gg-gutter)}}

/* ---- Things to do cards -------------------------------------------------------------------- */
/* Cards with a "Location data: Google Maps" credit put the credit beside the photo, so the photo
   shrank and the cards in a row no longer matched. The credit now sits small under the card. */
body #main .experience-card:has(>.experience-coordinate-credit){flex-direction:column}
body #main .experience-card>.experience-coordinate-credit{align-self:stretch;margin:0;padding:0 12px 10px;text-align:right;font-size:11px;color:var(--gg-text-3)}

/* ---- Artist dates table (tablet and desktop) ------------------------------------------------- */
/* "Upcoming" on every row is the default and said nothing; other statuses still show */
.act-table td .act-status-upcoming{visibility:hidden}
@media(max-width:759px){
  /* Phones: the map credit tucks into the card's bottom-right corner instead of adding a blank row */
  body #main .experience-card:has(>.experience-coordinate-credit){position:relative}
  body #main .experience-card>.experience-coordinate-credit{position:absolute;right:0;bottom:0;padding:0 12px 8px;line-height:1.2}
}
/* Search page sidebar: one column of ticks with the count on the right (two columns cut names to "L...") */
.results-sidebar #discovery-filters .event-type-options,.results-sidebar .event-type-options{grid-template-columns:minmax(0,1fr);padding:0;background:none}
#discovery-filters .event-type-options label>span{flex:1 1 auto;min-width:0}
#discovery-filters .event-type-options .category-count{flex:none;margin-left:auto;font-size:12px;color:var(--gg-text-3);font-variant-numeric:tabular-nums}
.results-sidebar .filter-panel-footer :is(a,button){white-space:nowrap}

/* ---- Tours month pages on phones ---------------------------------------------------------------- */
/* Each act card had 8 tiny underlined city links in a row. Now the card opens the act, and the
   cities are one quiet line, so every card is the same height. */
@media(max-width:759px){
  body #main .tour-acts tbody tr{position:relative}
  body #main .tour-acts tbody tr .row-primary::after{content:"";position:absolute;inset:0;z-index:1}
  body #main .tour-acts td[data-label=Cities]{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--gg-text-2);font-size:13.5px}
  body #main .tour-acts td[data-label=Cities] a{pointer-events:none;text-decoration:none;color:inherit}
}

/* ---- Date picker on phones ---------------------------------------------------------------------- */
/* The date options were one sideways-scrolling row, so the chosen one ("This weekend") was off the
   screen. Now all seven show as chips, with the chosen one in white. */
@media(max-width:759px){
  #date-dialog .date-presets{flex-wrap:wrap;overflow:visible;gap:8px;padding:4px 16px 12px;margin-inline:0;width:auto;box-sizing:border-box;border-bottom:1px solid var(--gg-border)}
  #date-dialog .date-presets>button{flex:0 0 auto;min-height:40px;padding:0 12px;border:1px solid var(--gg-border-strong);border-radius:var(--gg-radius);background:var(--gg-surface);gap:6px}
  #date-dialog .date-presets>button[aria-pressed=true]{background:var(--gg-primary);color:var(--gg-on-light);border-color:var(--gg-primary)}
  #date-dialog .date-presets>button::after{display:none}
}

/* ---- Tracking choices panel ---------------------------------------------------------------------- */
/* Was gold (not a GigGuide colour) with the three buttons wrapping unevenly. Now on-brand, and the
   three choices are equal weight, so rejecting is as easy as allowing. */
.gg-consent input[type=checkbox]{accent-color:var(--gg-text);width:20px;height:20px}
.gg-consent a{color:var(--gg-link)}
.gg-consent :focus-visible{outline:2px solid var(--gg-link);outline-offset:2px}
.gg-consent .gg-consent-actions{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px}
.gg-consent .gg-consent-actions>button{min-height:44px;padding:0 16px;border:1px solid var(--gg-border-strong);border-radius:var(--gg-radius);background:var(--gg-surface-3);color:var(--gg-text);font:600 14px/1 var(--gg-font-display)}
.gg-consent .gg-consent-actions>button:hover{background:var(--gg-surface-4);border-color:var(--gg-text-4)}
@media(max-width:559px){.gg-consent .gg-consent-actions{grid-template-columns:minmax(0,1fr)}}

/* ---- Things to do item page, tablet and desktop ------------------------------------------------- */
/* The photo gallery was 820px tall and the "Check dates and prices" button was hidden until far down
   the page. Gallery is now 420px plus a thumbnail row, and the button sits beside the title. */
@media(min-width:760px){
  body #main .experience-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end;max-width:none}
  body #main .experience-heading>:not(.experience-heading-action){grid-column:1}
  body #main .experience-heading>.experience-heading-action{display:block;grid-column:2;grid-row:1 / span 3}
}
@media(min-width:900px){
  body #main .experience-gallery{grid-template-rows:420px 140px}
  body #main .experience-gallery>.experience-gallery-item{min-height:0;height:100%;margin:0;display:flex;flex-direction:column;overflow:hidden}
  body #main .experience-gallery>.experience-gallery-item>.experience-gallery-open{flex:1 1 auto;min-height:0;height:auto}
  body #main .experience-gallery>.experience-gallery-item img{height:100%;width:100%;object-fit:cover}
}

/* ---- About, privacy, terms, cookies --------------------------------------------------------------- */
/* The text sits in a 720px reading column; the breadcrumb now starts where the text starts */
@media(min-width:1000px){body:has(#main .gg-report) .seo-breadcrumbs{max-width:672px}}
@media(min-width:760px) and (max-width:999px){body #main .gg-report{padding-inline:0}body:has(#main .gg-report) .seo-breadcrumbs{max-width:720px}}

/* ---- Things to do picks on tonight, weekend and holiday pages (tablet and desktop) -------------- */
/* Text touched the card edges, titles were underlined blue links and cards without a photo had
   nothing on top. Now they match the gig cards beside them. */
@media(min-width:760px){
  body #main .whats-on-experience-pick{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:16px;background:var(--gg-surface);border:1px solid var(--gg-border);border-radius:var(--gg-radius);overflow:hidden}
  body #main .whats-on-experience-pick>.whats-on-pick-photo{margin:-16px -16px 8px;aspect-ratio:16/10;overflow:hidden;border-radius:0}
  body #main .whats-on-experience-pick>.whats-on-pick-photo img{width:100%;height:100%;object-fit:cover;border-radius:0}
  body #main .whats-on-experience-pick:not(:has(.whats-on-pick-photo))::before{content:"";display:block;margin:-16px -16px 8px;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--gg-text-3) 14%,transparent) 0 14px,color-mix(in srgb,var(--gg-text-3) 5%,transparent) 14px 28px),var(--gg-bg-hero);border-bottom:1px solid var(--gg-border)}
  body #main .whats-on-experience-pick h3{margin:0;font:700 16px/1.3 var(--gg-font-display)}
  body #main .whats-on-experience-pick h3 a{color:var(--gg-text);text-decoration:none}
  body #main .whats-on-experience-pick>p{margin:0;font-size:13.5px;color:var(--gg-text-3)}
  body #main .whats-on-experience-pick>.whats-on-ticket{margin-top:auto;align-self:flex-start}
}

/* ---- Cards with no photo: a poster, not a lonely icon (Felix, 15 Oct) ------------------------------ */
/* A soft glow in the category colour, the GigGuide mark and the category name, like a gig poster. */
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-festival){--category-color:var(--gg-cat-festivals)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-concert){--category-color:var(--gg-cat-concerts)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-live-music){--category-color:var(--gg-cat-live-bands)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-dj){--category-color:var(--gg-cat-djs)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-theatre){--category-color:var(--gg-cat-theatre)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-comedy){--category-color:var(--gg-cat-comedy)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-cabaret){--category-color:var(--gg-cat-cabaret)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-dance){--category-color:var(--gg-cat-dance)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-cultural){--category-color:var(--gg-cat-cultural)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-family){--category-color:var(--gg-cat-family)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-tribute){--category-color:var(--gg-cat-tribute)}
body #main :is(.festival-cards,.whats-on-pick-grid) .event-card:has(.type-other-entertainment){--category-color:var(--gg-cat-other)}
body #main :is(.festival-cards,.whats-on-pick-grid) .card-art .event-art:not([hidden]){position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(120% 90% at 15% 10%,color-mix(in srgb,var(--category-color,var(--gg-text-3)) 38%,transparent),transparent 60%),radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--category-color,var(--gg-text-3)) 18%,transparent),transparent 70%),var(--gg-bg-hero)}
body #main :is(.festival-cards,.whats-on-pick-grid) .card-art .event-art img{width:28px;height:28px;opacity:.9}
body #main :is(.festival-cards,.whats-on-pick-grid) .card-art .event-art span{display:block;font:700 13px/1 var(--gg-font-display);letter-spacing:.18em;text-transform:uppercase;color:var(--gg-text)}
/* Gig page: belt and braces so nothing at the end of the left column adds space below the last row */
body.page-gig .event-story>:last-child{margin-bottom:0!important;padding-bottom:0!important}
body.page-gig .event-story>:last-child :last-child{margin-bottom:0!important}

/* ---- Category row only where people browse (Felix, 15 Oct) ------------------------------------------ */
/* Gig, venue and series pages already hid it. Artist, things-to-do item and the about and legal pages
   now hide it too, so the page starts with what the visitor came for. The top header stays everywhere. */
body:is(.page-artist,.page-experience,.page-about,.page-privacy,.page-terms,.page-cookies) .site-header .category-scroll-shell{display:none}
/* Desktop windows a little over 1000px wide: Featured and "Details checked" on full-width pages touched the screen edge */
@media(min-width:1000px){
  body:is(.page-place,.page-gig,.page-venue,.page-places,.page-saved) #main>.featured-strip .featured-inner{width:calc(100% - 2 * var(--gg-gutter));margin-inline:auto;box-sizing:border-box}
  body.page-gig #main>.event-source-wrap{width:calc(100% - 2 * var(--gg-gutter));margin-inline:auto;box-sizing:border-box}
}

/* ==== Audit fixes, 16 Oct 2026 ===================================================================== */
/* Photo credits on small pictures (Top 10, gig rows, things-to-do picks) covered the whole photo on
   phones. Now one short line along the top edge, cut off with "..." when it is long */
body #main :is(.card-art,.gig-result) .gig-photo>figcaption,
body #main .whats-on-pick-photo>figcaption{position:absolute;inset:0 0 auto 0;max-height:none;padding:3px 6px;font-size:11px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(rgba(0,0,0,.72),rgba(0,0,0,.5));color:rgba(255,255,255,.88);z-index:1}
body #main .whats-on-pick-photo{position:relative}

/* Category row also hidden on the contact, advertise and report pages (simple forms) */
body:is(.page-contact,.page-advertise,.page-report) .site-header .category-scroll-shell{display:none}

/* Report a problem: short intro, then the privacy notes in smaller print */
body.page-report .gg-report-lead{font-size:16px;color:var(--gg-text);margin-bottom:6px}
body.page-report .gg-form-small{font-size:13px;line-height:1.5;color:var(--gg-text-3)}

/* Gig page: "Report a problem" was a 15px tall link */
body.page-gig #main .report-event{display:inline-flex;align-items:center;min-height:44px}

/* Festivals on phones and tablets: date rows, place links, "Places to stay" and titles at 44px */
@media(max-width:999px){
  body #main .festival-card .festival-gigs li>a:first-child{min-height:44px;justify-content:center}
  body #main .festival-card .festival-gigs .festival-stay{min-height:44px}
  body #main .festival-card .festival-places a{display:inline-flex;align-items:center;min-height:44px}
  body #main .festival-card h3 a{display:inline-block;padding-block:11px;margin-block:-11px}
}

/* Tiny text: category tags were 10px and footer headings 10.5px. 11px is the smallest size we use */
body .event-type-tag{font-size:11px}
body .site-footer h2{font-size:11px}

/* Footer links on desktop: 22px rows were tight on touch laptops */
@media(min-width:760px){body .site-footer nav a,body .site-footer li a{display:inline-flex;align-items:center;min-height:32px}}

/* N1: a "Sold out" note must wrap on phones, not push the page sideways. */
@media (max-width: 759px) {
  body #main .gig-result.navigation-row .event-copy > p.gig-status {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

/* N5: the Message box uses the site font, like every other box. */
textarea {
  font: inherit;
}

/* N3, N6 and N7: retain the design with its approved text and tap minimums. */
body #main .discovery-form>.field>label,
body #main .discovery-form>.field>span:first-child,
.featured-eyebrow,.featured-multiple .featured-city,.event-stats dt,.event-date,
.area-columns h3,.area-option small,.act-photo figcaption,.city-category-grid small,
.ad-placeholder>span,.city-ad span,.reference-ad-space>span,.reference-ad-space>small {
  font-size:11px;
}
@media (max-width:759px) {
  .act-table td>a,.seo-breadcrumbs a,.venue-recent a,.experience-coordinate-credit a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .act-table td>a { display:flex; width:100%; }
  .mobile-discovery-ready .results-controls .active-filter-row { min-width:0; max-width:100%; }
}

/* N10: the existing tablet filter sheet uses the full short landscape viewport. */
@media (max-width:999px) and (orientation:landscape) {
  .filter-panel:popover-open,.mobile-discovery-ready .filter-panel:popover-open {
    inset:var(--gg-visual-top,0px) 0 auto;
    width:100%;
    max-width:100%;
    height:var(--gg-visual-height,100dvh);
    max-height:var(--gg-visual-height,100dvh);
    margin:0 auto;
    border-radius:0;
  }
}

/* N11 and N12: label the examples and keep a section link together. */
.quick-links-label { flex-basis:100%; font-size:11px; color:var(--gg-text-3); }
body #main .section-link { white-space:nowrap; }

/* N17: the page can't slide sideways on a phone, and a double tap doesn't
   zoom it (pinch zoom still works). It needs both html and body: with only
   one, a phone still widens the page to fit anything too wide. clip (not
   hidden) keeps the sticky header working. */
html,
body {
  overflow-x: clip;
}

html {
  touch-action: manipulation;
}

/* N18: phones. The artist photo fills its card, so it sits centred. */
@media (max-width: 759px) {
  .artist-heading .artist-photo {
    width: 100%;
  }

  .artist-heading .artist-photo img {
    max-height: 360px;
  }
}

/* N19: the page behind a search sheet stays still. */
#search-suggestions .suggestions-items {
  overscroll-behavior: contain;
}

@media (max-width: 999px) {
  html:has(#discovery-search:popover-open) {
    overflow: hidden;
  }
}

@media (max-width: 759px) {
  #search-suggestions :is(.suggestions-heading, .suggestions-mobile-input, .suggestions-status, .suggestions-footer) {
    touch-action: pinch-zoom;
  }
}

/* Homepage and search heroes: the gig count sits on a dark glass pill, so it
   reads clearly on any hero photo (Felix, 18 Oct). */
body .discovery-hero > .eyebrow {
  display: flex;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-inline: auto;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(11, 11, 11, 0.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--gg-text-1);
  font: 600 13.5px/1.35 var(--gg-font-body);
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: normal;
  text-wrap: balance;
}

body .discovery-hero > .eyebrow::before {
  flex: none;
  margin: 0;
}

@media (max-width: 759px) {
  body.page-home .discovery-hero > .eyebrow,
  body.mobile-discovery-ready .discovery-hero > .eyebrow,
  body .discovery-hero > .eyebrow {
    max-width: calc(100% - 8px);
    margin-inline: auto;
    padding: 7px 14px;
    border-radius: 16px;
    font-size: 13px;
    text-align: center;
  }
}

/* Bands Australia box on gig and place pages: the web address in gold under
   its line, the same as the artist page panel (Felix, 18 Oct). */
.booking-promotion .booking-promotion-site {
  display: block;
  margin-top: 4px;
  color: var(--bands-gold, #d8bd75);
  font: 600 12.5px/1.4 var(--gg-font-body);
  letter-spacing: 0.01em;
}