/* =============================================================
   Tour Manager — tour-table.css
   
   STRUCTURE AND LAYOUT ONLY.
   This file ships with the plugin and should not be edited.
   
   All visual styling belongs in your theme's style.css.
   Copy the "Theme overrides" block below into your theme
   and customise from there.
   ============================================================= */


/* --- Tour table --- */

.tm-tour-wrap {
    width: 100%;
    overflow-x: auto;
}

.tm-tour-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column widths — adjust in your theme if needed */
.tm-col-date   { width: 100px; }
.tm-col-city   { width: 140px; }
.tm-col-venue  { /* fills remaining space */ }
.tm-col-more   { width: 72px; }
.tm-col-ticket { width: 115px; }

.tm-row-primary td {
    padding: 6px;
    border-top: 1px solid rgba(128,128,128,.12);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-tour-table tbody tr:first-child td {
    border-top: none;
}

/* Detail row — always in DOM, animated via inner div max-height */
.tm-row-detail              { display: table-row; }
.tm-row-detail.tm-open      { display: table-row; }

.tm-detail-cell {
    padding: 0 !important;
    border-top: none !important;
}

.tm-detail-inner {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: flex;
    flex-wrap: wrap;
    gap: 3px 18px;
    align-items: flex-start;
    /* padding animates with the content */
    padding: 0 6px;
}

.tm-row-detail.tm-open .tm-detail-inner {
    padding: 2px 6px 10px;
}

.tm-detail-desc, .tm-detail-times, .tm-detail-purchase {
    vertical-align: top;
    white-space: normal;
    overflow: visible;
}

.tm-detail-purchase {
    margin-left: auto;
    text-align: right;
}

/* Prevent wrapping on key cells */
.tm-date        { white-space: nowrap; }
.tm-city        { white-space: nowrap; }
.tm-more-info   { text-align: right; white-space: nowrap; }
.tm-ticket      { text-align: right; }

/* Venue link — inherits theme link colour */
.tm-venue a     { text-decoration: none; }
.tm-venue a:hover { text-decoration: underline; }

/* More info — inherits theme link colour, smaller than venue */
.tm-more-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.tm-more-link:hover { text-decoration: underline; }

/* Detail row layout */
.tm-detail-desc     { }
.tm-detail-times    { }
.tm-detail-purchase { text-align: right; }

/* Page link icon inside detail row */
.tm-page-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    vertical-align: middle;
    margin-left: 5px;
    opacity: .4;
    transition: opacity .15s;
}
.tm-page-link:hover { opacity: .8; }
.tm-page-link svg   { width: 11px; height: 11px; }

/* Ticket CTA button — layout only, all colours from theme */
.tm-ticket-btn {
    display: inline-block;
    width: 105px;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-no-dates { font-style: italic; padding: 20px 0; }


/* --- Mobile ≤560px --- */

@media (max-width: 560px) {

    .tm-col-date    { width: 72px; }
    .tm-col-venue   { display: none; }
    .tm-col-more    { width: 46px; }
    .tm-col-ticket  { width: 80px; }

    /* Hide standalone venue column */
    .tm-row-primary .tm-venue { display: none; }

    /* Show venue as sub-line under city via data-venue attribute */
    .tm-city::after {
        content: attr(data-venue);
        display: block;
        margin-top: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tm-row-detail td { padding: 2px 4px 8px; }
}


/* --- Single date page --- */

.tm-single-wrap { max-width: 860px; margin: 0 auto; }

/* Hero / banner */
.tm-single-hero {
    position: relative;
    width: 100%;
    min-height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.tm-single-hero--no-image { min-height: 180px; }

/* Gradient overlay — customise darkness/colour in your theme */
.tm-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
}

.tm-hero-content {
    position: relative;
    width: 100%;
    padding: 28px 32px 24px;
}

/* Text sits on top of the banner image — white by necessity */
.tm-hero-date  { color: #fff; opacity: .6; margin-bottom: 6px; }
.tm-hero-title { color: #fff; margin-bottom: 4px; line-height: 1.2; }
.tm-hero-sub   { color: #fff; opacity: .6; }

/* Ticket button — bottom right of banner */
.tm-hero-ticket {
    position: absolute;
    bottom: 24px;
    right: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.tm-single-ticket-btn {
    display: inline-block;
    text-decoration: none;
}
.tm-single-ticket-btn:hover { opacity: .88; }

/* Purchase note sits below ticket button on banner */
.tm-hero-purchase-note {
    color: #fff;
    opacity: .45;
    text-align: right;
}

/* Page body */
.tm-single-body { padding: 28px 32px 36px; }

/* Two-column layout: meta table left, description right */
.tm-single-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 32px;
    align-items: start;
    margin-bottom: 28px;
}

.tm-single-meta { min-width: 190px; }

.tm-single-meta-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    border-bottom: 1px solid rgba(128,128,128,.12);
}
.tm-single-meta-row:first-child { border-top: 1px solid rgba(128,128,128,.12); }

.tm-meta-label { padding: 9px 0; }
.tm-meta-value { padding: 9px 0 9px 12px; }
.tm-meta-value a { text-decoration: none; }
.tm-meta-value a:hover { text-decoration: underline; }

.tm-single-desc-col { display: flex; flex-direction: column; gap: 12px; padding-top: 2px; }

.tm-single-back a { text-decoration: none; transition: opacity .15s; }
.tm-single-back a:hover { opacity: .8; }


/* --- Mobile single page --- */

@media (max-width: 560px) {
    .tm-single-hero   { min-height: 220px; }
    .tm-hero-content  { padding: 20px 18px 80px; }
    .tm-hero-ticket   { bottom: 16px; right: 18px; }
    .tm-single-body   { padding: 20px 18px 28px; }
    .tm-single-info   { grid-template-columns: 1fr; gap: 20px 0; }
    .tm-single-meta   { min-width: 0; width: 100%; }
}


/* =============================================================
   Mini tour table — [tour_dates_mini]
   No expand/collapse. Optimised for ~720px and narrower.
   All colours from theme as with main table.
   ============================================================= */

.tm-mini-wrap {
    width: 100%;
    overflow-x: auto;
}

.tm-mini-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Column widths — adjust in theme if needed */
.tm-mini-col-date   { width: 88px; }
.tm-mini-col-city   { width: 120px; }
.tm-mini-col-venue  { /* fills remaining space */ }
.tm-mini-col-ticket { width: 100px; }

.tm-mini-row td {
    padding: 5px 5px;
    border-top: 1px solid rgba(128,128,128,.12);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-mini-table tbody tr:first-child td {
    border-top: none;
}

.tm-mini-date   { font-weight: 600; white-space: nowrap; }
.tm-mini-city   { white-space: nowrap; }
.tm-mini-venue a { text-decoration: none; }
.tm-mini-venue a:hover { text-decoration: underline; }
.tm-mini-ticket { text-align: right; }

/*
 * Mini CTA button — set background + color in your theme:
 *   .tm-mini-btn { background: var(--your-primary); color: #fff; }
 * Same variant classes apply as main table:
 *   .tm-ticket-btn--sold-out, .tm-ticket-btn--[suffix]
 */
.tm-mini-btn {
    display: inline-block;
    width: 90px;
    padding: 4px 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile — below 480px */
@media (max-width: 480px) {
    .tm-mini-col-date   { width: 70px; }
    .tm-mini-col-city   { width: 90px; }
    .tm-mini-col-ticket { width: 80px; }

    .tm-mini-row td     { font-size: 0.8em; padding: 4px 4px; }
    .tm-mini-btn        { width: 74px; }
}