/* DF Appearances Schedule — AdvisorShares typography with airy v15 spacing */
.df-appearances-wrap,
.df-appearances-wrap *{box-sizing:border-box}
.df-appearances-wrap{width:100%;margin:0 auto;font-family:Arial,sans-serif;color:#3b3838;font-size:15px;line-height:1.6}
.df-appearances-wrap p{margin:0;padding:0}

/* Topic filters */
.appearance-topic-filter-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 40px}
.appearance-topic-label{font-size:11px;font-weight:bold;color:#6b6868;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;margin-right:8px}
.appearance-topic-pill{display:inline-block;padding:8px 18px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid #e4e1e1;color:#6b6868;background:#fff;text-decoration:none;font-family:Arial,sans-serif;cursor:pointer;line-height:1.4;transition:.15s ease}
.appearance-topic-pill:hover,.appearance-topic-pill.is-active{border-color:#f47735;color:#3b3838;background:#fef6f1}

/* Section titles */
.appearances-main-title{font-size:18px!important;font-weight:bold!important;color:#3b3838!important;line-height:1.3!important;padding:0 0 12px!important;border-bottom:2px solid #e4e1e1!important;margin:0 0 22px!important}
.appearances-conference-title{margin-top:60px!important;margin-bottom:18px!important}
.appearance-week-heading{font-size:10px;font-weight:bold;letter-spacing:.12em;text-transform:uppercase;color:#6b6868;padding-bottom:12px;border-bottom:1px solid #e4e1e1;margin:28px 0 14px;line-height:1.4}

/* Cards — v15 airy spacing, v17 font sizing */
.appearance-card{position:relative;display:grid;grid-template-columns:76px 120px minmax(0,1fr) 190px;align-items:center;column-gap:28px;padding:30px;background:#fff;border:1px solid #e4e1e1;border-radius:7px;margin-bottom:8px;min-height:138px;transition:.15s ease;overflow:visible}
.appearance-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.06)}
.appearance-card.is-hidden-by-topic{display:none!important}

/* Today row — orange outline only, white background */
.appearance-card:has(.appearance-avatar-today){border-color:#e4e1e1!important;border-left-width:1px!important;background:#fff;box-shadow:none!important}

.appearance-avatar{width:76px;height:76px;min-width:76px;border-radius:50%;background:#3b3838;color:#f8dfce;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold;line-height:1;margin:0}
.appearance-avatar-today{background:#f47735;color:#fff;box-shadow:0 0 0 4px rgba(244,119,53,.12)}

.appearance-date{min-width:0;color:#6b6868}
.appearance-date .day{display:block;font-size:12px;font-weight:bold;color:#6b6868;line-height:1.25;margin:0}
.appearance-date .date{display:block;font-size:12px;color:#6b6868;line-height:1.25;margin-top:3px}
.appearance-date .time{display:block;font-size:11px;color:#6b6868;line-height:1.35;margin-top:8px}

.appearance-content{min-width:0}
.appearance-name{font-size:14px!important;font-weight:bold!important;color:#3b3838!important;line-height:1.25!important;margin:0!important;padding:0!important}
.appearance-title{font-size:12px;color:#6b6868;line-height:1.35;margin-top:4px;margin-bottom:0}
.appearance-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.appearance-tag{display:inline-block;font-size:10px;font-weight:bold;line-height:1.2;padding:3px 9px;border-radius:3px;background:#eaf5fb;color:#2278a8;border:1px solid rgba(52,153,204,.2)}

/* Calendar dropdown */
.appearance-calendar{position:relative;text-align:right;min-width:190px}
.appearance-calendar-toggle{font-size:11px;color:#6b6868;padding:8px 12px;border-radius:4px;border:1px solid #e4e1e1;text-decoration:none;white-space:nowrap;font-family:Arial,sans-serif;background:#fff;cursor:pointer;display:inline-block;line-height:1.2}
.appearance-calendar-toggle:after{content:' ▾';font-size:10px}
.appearance-calendar-toggle:hover{border-color:#f47735;color:#3b3838}
.appearance-calendar-menu{display:none;position:absolute;right:0;top:calc(100% + 7px);margin-top:4px;background:#fff;border:1px solid #e4e1e1;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.1);z-index:100;min-width:190px;overflow:hidden;text-align:left}
.appearance-calendar.is-open .appearance-calendar-menu{display:block}
.appearance-calendar-menu a{display:block;padding:10px 14px;font-size:12px;color:#3b3838;text-decoration:none;font-family:Arial,sans-serif;white-space:nowrap;border-bottom:0;line-height:1.3}
.appearance-calendar-menu a:hover{background:#fef6f1;color:#f47735}

.conference-empty{display:block;background:#fff;border:1px dashed #e4e1e1;border-radius:6px;padding:70px 32px;text-align:center;color:#6b6868;font-size:14px;line-height:1.7;margin-bottom:8px}
.conference-empty strong{color:#f47735;font-weight:bold;text-decoration:none}
.no-appearances,.appearance-no-topic-results{padding:25px;text-align:center;color:#6b6868;font-size:14px}
.appearance-debug{background:#f6f4f4;border:1px solid #e4e1e1;padding:15px;margin:0 0 25px;white-space:pre-wrap;font-size:12px;color:#3b3838}

/* Tablet */
@media(max-width:1200px){
  .appearance-card{grid-template-columns:68px 112px minmax(0,1fr) 170px;column-gap:22px;padding:24px;min-height:118px}
  .appearance-avatar{width:68px;height:68px;min-width:68px;font-size:12px}
  .appearance-calendar{min-width:170px}
  .appearance-calendar-toggle{font-size:11px;padding:7px 11px}
}

/* Divi tablet / mobile breakpoint — match supplied mobile HTML layout */
@media(max-width:980px){
  .df-appearances-wrap{font-size:14px}
  .appearance-topic-filter-wrap{gap:10px;margin-bottom:30px}
  .appearance-topic-label{width:100%;font-size:10px;margin-bottom:4px}
  .appearance-topic-pill{font-size:11px;padding:7px 14px}
  .appearances-main-title{font-size:18px!important;margin-bottom:18px!important}
  .appearance-week-heading{margin:24px 0 12px;padding-bottom:10px}

  /* Keep avatar/date/title in one compact row like the reference HTML table */
  .appearance-card{
    display:grid;
    grid-template-columns:58px 94px minmax(0,1fr);
    grid-template-areas:
      "avatar date content"
      "calendar calendar calendar";
    column-gap:18px;
    row-gap:12px;
    padding:18px 16px;
    min-height:0;
    align-items:center;
  }
  .appearance-avatar{grid-area:avatar;width:46px;height:46px;min-width:46px;font-size:13px;justify-self:start}
  .appearance-date{grid-area:date;align-self:center;min-width:0}
  .appearance-date .day,.appearance-date .date{font-size:12px;line-height:1.25}
  .appearance-date .time{font-size:10px;line-height:1.25;margin-top:5px}
  .appearance-content{grid-area:content;min-width:0;width:auto;padding-top:0}
  .appearance-name{font-size:14px!important;line-height:1.25!important}
  .appearance-title{font-size:12px;line-height:1.35;margin-top:2px}
  .appearance-tags{gap:5px;margin-top:5px}
  .appearance-tag{font-size:10px;padding:2px 8px}

  /* Calendar remains visible, but moves below the row to avoid cramping */
  .appearance-calendar{grid-area:calendar;display:block!important;width:100%;min-width:0;text-align:left;margin-top:0}
  .appearance-calendar-toggle{display:block!important;width:100%;text-align:center;font-size:11px;padding:9px 12px}
  .appearance-calendar-menu{left:0;right:auto;width:100%;min-width:0}
}

/* Mobile: keep same reference layout, tighter */
@media(max-width:860px){
  .appearance-card{grid-template-columns:54px 90px minmax(0,1fr);column-gap:14px;row-gap:10px;padding:16px 14px}
  .appearance-avatar{width:46px;height:46px;min-width:46px;font-size:13px}
  .appearance-date .day,.appearance-date .date{font-size:12px}
  .appearance-date .time{font-size:10px}
  .appearance-calendar{display:block!important;width:100%}
  .appearance-calendar-toggle{display:block!important;width:100%}
  .conference-empty{padding:48px 24px;font-size:14px}
}

/* Small mobile */
@media(max-width:480px){
  .appearance-topic-pill{font-size:11px;padding:6px 11px}
  .appearance-card{grid-template-columns:46px 72px minmax(0,1fr);column-gap:10px;row-gap:10px;padding:14px 12px}
  .appearance-avatar{width:42px;height:42px;min-width:42px;font-size:11px}
  .appearance-date .day,.appearance-date .date{font-size:11px}
  .appearance-date .time{font-size:9px;line-height:1.2}
  .appearance-name{font-size:13px!important}
  .appearance-title{font-size:11px}
  .appearance-tag{font-size:9px;padding:2px 6px}
  .appearance-week-heading{font-size:9px}
  .conference-empty{padding:40px 18px;font-size:13px}
}
