/*
 * Inline Tile Elements — tiles.css  v1.4.0
 * =========================================
 * Edit the tokens in :root to retheme everything at once.
 */

/* ================================================================
   DESIGN TOKENS
   ================================================================ */
:root {
    /* Brand accent */
    --ibt-accent:           #c8f000;

    /* Type scale */
    --ibt-font-display:     'Bebas Neue', 'Arial Black', sans-serif;
    --ibt-font-body:        'DM Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Spacing */
    --ibt-padding:          28px;
    --ibt-padding-sm:       20px;
    --ibt-radius:           16px;

    /* Grid */
    --ibt-col-w:            300px;
    --ibt-row-h:            200px;
    --ibt-cols:             4;
    --ibt-gap:              10px;

    /* Preset backgrounds */
    --ibt-bg-light:         #ffffff;
    --ibt-bg-dark:          #111111;
    --ibt-bg-accent:        #c8f000;
    --ibt-bg-navy:          #0d1b38;
    --ibt-bg-slate:         #3a4a58;
    --ibt-bg-clay:          #c2581a;
    --ibt-bg-sand:          #f2e8d4;
    --ibt-bg-blush:         #f7d0d0;
    --ibt-bg-sky:           #c4e8f8;

    /* Preset foreground text (paired with backgrounds) */
    --ibt-text-light:       #111111;
    --ibt-text-dark:        #ffffff;
    --ibt-text-accent:      #111111;
    --ibt-text-navy:        #ffffff;
    --ibt-text-slate:       #ffffff;
    --ibt-text-clay:        #ffffff;
    --ibt-text-sand:        #111111;
    --ibt-text-blush:       #111111;
    --ibt-text-sky:         #111111;

    /* Muted text — 60% opacity of tile text */
    --ibt-text-muted:       rgba(0,0,0,0.5);
    --ibt-text-muted-inv:   rgba(255,255,255,0.55);
}


/* ================================================================
   GRID
   ================================================================ */

.ibt-grid {
    display:               grid;
    grid-template-columns: repeat( var(--ibt-cols), var(--ibt-col-w) );
    grid-auto-rows:        var(--ibt-row-h);
    gap:                   var(--ibt-gap);
    box-sizing:            border-box;
    margin-left:           auto;
    margin-right:          auto;
}

@media (max-width: 1260px) {
    .ibt-grid { grid-template-columns: repeat( min( var(--ibt-cols), 3 ), var(--ibt-col-w) ); }
}
@media (max-width: 960px) {
    .ibt-grid { grid-template-columns: repeat( 2, var(--ibt-col-w) ); }
}
@media (max-width: 640px) {
    .ibt-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* Column spans */
.ibt-col-1 { grid-column: span 1; }
.ibt-col-2 { grid-column: span 2; }
.ibt-col-3 { grid-column: span 3; }
.ibt-col-4 { grid-column: span 4; }

/* Row spans */
.ibt-row-1 { grid-row: span 1; }
.ibt-row-2 { grid-row: span 2; }
.ibt-row-3 { grid-row: span 3; }
.ibt-row-4 { grid-row: span 4; }

@media (max-width: 640px) {
    .ibt-col-1, .ibt-col-2, .ibt-col-3, .ibt-col-4 { grid-column: span 1; }
    .ibt-row-1, .ibt-row-2, .ibt-row-3, .ibt-row-4 { grid-row: span 1; }
}


/* ================================================================
   TILE BASE
   ================================================================ */

.ibt-tile {
    font-family:     var(--ibt-font-body);
    border-radius:   var(--ibt-radius);
    overflow:        hidden;
    position:        relative;
    box-sizing:      border-box;
    display:         flex;
    flex-direction:  column;
    padding:         var(--ibt-padding);
    /* Defaults — overridden by color preset classes */
    background:      var(--ibt-tile-bg,   var(--ibt-bg-light));
    color:           var(--ibt-tile-text, var(--ibt-text-light));
    /* Subtle inner shadow for depth */
    box-shadow:      inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* Internal layout helpers */
.ibt-tile-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.ibt-tile-foot { flex-shrink: 0; margin-top: 16px; display: flex; align-items: center; gap: 10px; }


/* ================================================================
   COLOR PRESETS
   ================================================================ */

.ibt-color-light  { --ibt-tile-bg: var(--ibt-bg-light);  --ibt-tile-text: var(--ibt-text-light);  background: var(--ibt-bg-light);  color: var(--ibt-text-light);  }
.ibt-color-dark   { --ibt-tile-bg: var(--ibt-bg-dark);   --ibt-tile-text: var(--ibt-text-dark);   background: var(--ibt-bg-dark);   color: var(--ibt-text-dark);   }
.ibt-color-accent { --ibt-tile-bg: var(--ibt-bg-accent); --ibt-tile-text: var(--ibt-text-accent); background: var(--ibt-bg-accent); color: var(--ibt-text-accent); }
.ibt-color-navy   { --ibt-tile-bg: var(--ibt-bg-navy);   --ibt-tile-text: var(--ibt-text-navy);   background: var(--ibt-bg-navy);   color: var(--ibt-text-navy);   }
.ibt-color-slate  { --ibt-tile-bg: var(--ibt-bg-slate);  --ibt-tile-text: var(--ibt-text-slate);  background: var(--ibt-bg-slate);  color: var(--ibt-text-slate);  }
.ibt-color-clay   { --ibt-tile-bg: var(--ibt-bg-clay);   --ibt-tile-text: var(--ibt-text-clay);   background: var(--ibt-bg-clay);   color: var(--ibt-text-clay);   }
.ibt-color-sand   { --ibt-tile-bg: var(--ibt-bg-sand);   --ibt-tile-text: var(--ibt-text-sand);   background: var(--ibt-bg-sand);   color: var(--ibt-text-sand);   }
.ibt-color-blush  { --ibt-tile-bg: var(--ibt-bg-blush);  --ibt-tile-text: var(--ibt-text-blush);  background: var(--ibt-bg-blush);  color: var(--ibt-text-blush);  }
.ibt-color-sky    { --ibt-tile-bg: var(--ibt-bg-sky);    --ibt-tile-text: var(--ibt-text-sky);    background: var(--ibt-bg-sky);    color: var(--ibt-text-sky);    }
.ibt-color-custom { background: var(--ibt-tile-bg); color: var(--ibt-tile-text); }


/* ================================================================
   TYPOGRAPHY — shared across all tile types
   ================================================================ */

.ibt-headline {
    font-family: var(--ibt-font-display);
    font-size:   clamp(28px, 3.5vw, 54px);
    line-height: 1;
    margin:      0 0 8px;
    color:       inherit;
    position:    relative;
    z-index:     1;
    letter-spacing: 0.5px;
}

.ibt-subtext {
    font-size:   13px;
    line-height: 1.55;
    margin:      0 0 8px;
    color:       inherit;
    opacity:     0.65;
    position:    relative;
    z-index:     1;
}

/* Generic p inside tiles (e.g. custom tile) */
.ibt-tile > p,
.ibt-tile-body > p {
    font-size:   14px;
    line-height: 1.55;
    margin:      0 0 12px;
    color:       inherit;
    opacity:     0.75;
}


/* ================================================================
   HERO TILE
   ================================================================ */

.ibt-tile-hero {
    /* Concentric circle decoration */
}
.ibt-tile-hero::before,
.ibt-tile-hero::after {
    content:       '';
    position:      absolute;
    border-radius: 50%;
    pointer-events: none;
}
.ibt-tile-hero::before {
    width: 240px; height: 240px;
    right: -60px; bottom: -60px;
    border: 1px solid rgba(255,255,255,0.08);
}
.ibt-tile-hero::after {
    width: 380px; height: 380px;
    right: -100px; bottom: -100px;
    border: 1px solid rgba(255,255,255,0.04);
}

/* Accent ball */
.ibt-accent-ball {
    width:         36px;
    height:        36px;
    border-radius: 50%;
    background:    var(--ibt-accent);
    flex-shrink:   0;
    position:      relative;
    z-index:       1;
    box-shadow:    0 2px 12px rgba(200,240,0,0.4);
}


/* ================================================================
   STATS TILE
   ================================================================ */

.ibt-tile-stats {}

.ibt-stat-number {
    font-family:   var(--ibt-font-display);
    font-size:     clamp(52px, 8vw, 84px);
    line-height:   1;
    color:         inherit;
    letter-spacing: -1px;
    margin-bottom: 2px;
}

.ibt-stat-label {
    font-size:     14px;
    font-weight:   600;
    color:         inherit;
    opacity:       0.7;
    line-height:   1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ================================================================
   IMAGE / VIDEO TILE
   ================================================================ */

.ibt-tile-image {
    padding: 0;
    box-shadow: none;
}

.ibt-tile-image img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.ibt-image-placeholder {
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, #2a3820 0%, #1a2410 100%);
}

/* Caption overlay — gradient from bottom */
.ibt-image-overlay {
    position:        absolute;
    inset:           0;
    background:      linear-gradient(to top,
                       rgba(0,0,0,0.82) 0%,
                       rgba(0,0,0,0.3)  40%,
                       transparent      70%);
    display:         flex;
    flex-direction:  column;
    justify-content: flex-end;
    padding:         22px;
    z-index:         2;
}
.ibt-image-overlay p {
    color:       #fff;
    font-size:   14px;
    font-weight: 500;
    line-height: 1.45;
    margin:      0;
    opacity:     1;
}

/* Tag pill */
.ibt-tag {
    display:        inline-flex;
    align-items:    center;
    background:     rgba(255,255,255,0.15);
    border:         1px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color:          #fff;
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 1.8px;
    border-radius:  100px;
    padding:        4px 11px;
    margin-bottom:  10px;
    width:          fit-content;
    text-transform: uppercase;
}

/* Play button */
.ibt-play-btn {
    position:        absolute;
    top:             18px;
    right:           18px;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.12);
    border:          1.5px solid rgba(255,255,255,0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    z-index:         3;
    text-decoration: none;
    transition:      background 0.2s, transform 0.15s;
}
.ibt-play-btn:hover  { background: rgba(255,255,255,0.25); transform: scale(1.08); }
.ibt-play-btn::after {
    content:      '';
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent rgba(255,255,255,0.95);
    margin-left:  3px;
}

/* Video embed */
.ibt-video-embed {
    position:   absolute;
    inset:      0;
    z-index:    1;
    overflow:   hidden;
    background: #000;
}
.ibt-video-embed iframe {
    position:   absolute;
    top:        50%;
    left:       50%;
    width:      100%;
    height:     100%;
    min-width:  100%;
    min-height: 100%;
    transform:  translate(-50%, -50%);
    border:     0;
}


/* ================================================================
   ACCENT TILE
   ================================================================ */

.ibt-tile-accent {
    /* Uses standard tile layout — color comes from preset */
}


/* ================================================================
   BUTTONS
   ================================================================ */

.ibt-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    border-radius:   100px;
    padding:         9px 20px;
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  0.4px;
    cursor:          pointer;
    text-decoration: none;
    width:           fit-content;
    font-family:     var(--ibt-font-body);
    transition:      opacity 0.15s, transform 0.12s;
    position:        relative;
    z-index:         1;
    flex-shrink:     0;
    white-space:     nowrap;
}
.ibt-btn:hover  { opacity: 0.82; }
.ibt-btn:active { transform: scale(0.96); }

/* Contrast button — inverts to be readable on any tile color */
.ibt-btn-contrast {
    background: var(--ibt-tile-text, #111);
    color:      var(--ibt-tile-bg,   #fff);
}

/* Outline button */
.ibt-btn-outline {
    background: transparent;
    border:     1.5px solid currentColor;
    color:      inherit;
    opacity:    0.85;
}
.ibt-btn-outline:hover { opacity: 1; }


/* ================================================================
   SPORTSPRESS TILES
   ================================================================ */

.ibt-tile-sp {
    padding:        0;
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    box-shadow:     inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* Header bar */
.ibt-sp-header {
    display:         flex;
    align-items:     center;
    padding:         10px 16px;
    flex-shrink:     0;
    border-bottom:   1px solid rgba(128,128,128,0.12);
    background:      rgba(0,0,0,0.03);
}
.ibt-color-dark  .ibt-sp-header,
.ibt-color-navy  .ibt-sp-header,
.ibt-color-slate .ibt-sp-header { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }

.ibt-sp-title {
    font-family:    var(--ibt-font-display);
    font-size:      16px;
    letter-spacing: 0.8px;
    color:          inherit;
    line-height:    1;
    text-transform: uppercase;
}

/* Scrollable content */
.ibt-sp-content {
    flex:       1;
    overflow-y: auto;
    min-height: 0;
    padding:    0;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(128,128,128,0.3) transparent;
}
.ibt-sp-content::-webkit-scrollbar { width: 4px; }
.ibt-sp-content::-webkit-scrollbar-track { background: transparent; }
.ibt-sp-content::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); border-radius: 2px; }

/* Table styles */
.ibt-sp-content table {
    width:           100% !important;
    border-collapse: collapse;
    font-size:       12px;
    font-family:     var(--ibt-font-body);
    color:           inherit;
}
.ibt-sp-content td,
.ibt-sp-content th {
    padding:    8px 14px !important;
    color:      inherit;
    border:     none !important;
    text-align: left;
}
.ibt-sp-content th:not(:first-child),
.ibt-sp-content td:not(:first-child) { text-align: center; }

.ibt-sp-content thead th {
    font-size:      9px;
    font-weight:    700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity:        0.5;
    border-bottom:  1px solid rgba(128,128,128,0.12) !important;
    padding-bottom: 10px !important;
}

.ibt-sp-content tbody tr {
    border-bottom: 1px solid rgba(128,128,128,0.06) !important;
    transition:    background 0.1s;
}
.ibt-sp-content tbody tr:last-child { border-bottom: none !important; }

/* Light tile hover row */
.ibt-color-light  .ibt-sp-content tbody tr:hover,
.ibt-color-sand   .ibt-sp-content tbody tr:hover,
.ibt-color-blush  .ibt-sp-content tbody tr:hover,
.ibt-color-sky    .ibt-sp-content tbody tr:hover,
.ibt-color-accent .ibt-sp-content tbody tr:hover { background: rgba(0,0,0,0.03); }

/* Dark tile hover row */
.ibt-color-dark  .ibt-sp-content tbody tr:hover,
.ibt-color-navy  .ibt-sp-content tbody tr:hover,
.ibt-color-slate .ibt-sp-content tbody tr:hover,
.ibt-color-clay  .ibt-sp-content tbody tr:hover { background: rgba(255,255,255,0.05); }

/* SP links */
.ibt-sp-content a { color: inherit; text-decoration: none; }
.ibt-sp-content a:hover { text-decoration: underline; }

/* Placeholder */
.ibt-sp-placeholder {
    padding:     24px 20px;
    font-size:   13px;
    line-height: 1.6;
    opacity:     0.6;
    color:       inherit;
}
.ibt-sp-placeholder p { margin: 0 0 6px; }
.ibt-sp-placeholder small { font-size: 11px; }


/* ================================================================
   GOOGLE CALENDAR TILE
   ================================================================ */

.ibt-tile-gcal {
    padding: 0;
}

.ibt-gcal-embed {
    flex:       1;
    overflow:   hidden;
    min-height: 0;
    position:   relative;
}
.ibt-gcal-embed iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}


/* ================================================================
   CUSTOM CONTENT TILE
   ================================================================ */

.ibt-tile-custom {
    /* padding, valign, align set via inline style from PHP */
}

.ibt-custom-content {
    width:    100%;
    overflow: hidden;
    color:    inherit;
}
.ibt-custom-content h1, .ibt-custom-content h2,
.ibt-custom-content h3, .ibt-custom-content h4 {
    color:      inherit;
    margin-top: 0;
}
.ibt-custom-content p  { color: inherit; font-size: 14px; line-height: 1.6; margin-top: 0; }
.ibt-custom-content a  { color: inherit; text-decoration: underline; }
.ibt-custom-content img { max-width: 100%; height: auto; display: block; }
.ibt-custom-content ul,
.ibt-custom-content ol { padding-left: 18px; color: inherit; font-size: 14px; line-height: 1.6; }