/* ==========================================================
   COMPANION V3
   style.css
   PART 1
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#111111;

    --card:#1b1b1d;

    --card-light:#242428;

    --text:#f4f4f4;

    --muted:#bdbdbd;

    --heading:#8f8f94;

    --border:rgba(255,255,255,.05);

    --radius:24px;

    --shadow:0 12px 30px rgba(0,0,0,.28);

}

html,
body{

    height:100%;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;

    overflow:hidden;

}

/* ==========================================================
   PAGE
========================================================== */

.container{

    /* The dedicated iMac display is 1,920 × 1,080.  Keep the three
       dashboard bands inside that viewport, with no page scrolling. */
    height:100dvh;

    padding:clamp(18px,1.35vw,26px);

    display:grid;

    grid-template-rows:

        156px
        minmax(0,1fr)
        270px;

    gap:18px;

}

/* ==========================================================
   HEADER
========================================================== */

.header{

    display:grid;

    grid-template-columns:

        1fr
        auto;

    gap:40px;

    align-items:center;
    min-height:0;

}

.header-left{

    display:flex;

    flex-direction:column;

}

.greeting{

    font-size:clamp(52px,4vw,74px);

    line-height:1;

    font-weight:700;

}

#date{

    margin-top:10px;

    font-size:clamp(24px,2vw,34px);

    color:#d8d8d8;

}

.message{

    display:none;

    margin-top:12px;

    font-size:clamp(20px,1.25vw,24px);

    color:#ababab;

}

.header-right{

    display:flex;

    align-items:center;

    gap:46px;

}

#clock{

    font-size:clamp(96px,7vw,132px);

    font-weight:300;

    letter-spacing:-4px;

    white-space:nowrap;

}

.weather{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:0;

}

.weather-icon{

    font-size:78px;

}

.weather-details{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

}

.weather-temp{

    font-size:52px;

    font-weight:700;

}

.weather-text{

    font-size:28px;

    color:var(--muted);

}

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

.dashboard{

    display:grid;

    grid-template-columns:

        minmax(0,2fr)
        minmax(0,1fr);

    gap:22px;

    min-height:0;

    overflow:hidden;

}

.left-column{

    display:grid;

    grid-template-rows:

        minmax(120px,.75fr)
        minmax(120px,.75fr)
        minmax(210px,1.5fr);

    gap:18px;

    min-height:0;

}

/* ==========================================================
   CARDS
========================================================== */

.section-card,
.today-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.section-card{

    padding:16px 26px;

    min-height:0;

    overflow:hidden;

}

/* Now and Next only need room for one reminder; keep them compact so the
   fuller Later Today list has more reading space. */
.left-column > .section-card:not(.later-card){

    padding:6px 20px;

}

.left-column > .section-card:not(.later-card) h2{

    margin-bottom:10px;

}

.today-card{

    padding:22px 26px;

    display:flex;

    flex-direction:column;

    min-height:0;

    overflow:hidden;

}

/* ==========================================================
   HEADINGS
========================================================== */

.section-card h2,
.today-card h2{

    margin-bottom:18px;

    font-size:22px;

    letter-spacing:4px;

    color:var(--heading);

    text-transform:uppercase;

}

/* ==========================================================
   NOW / NEXT
========================================================== */

.main-event{

    display:grid;

    grid-template-columns:

        74px
        1fr;

    gap:22px;

    align-items:center;

    min-height:0;

    height:calc(100% - 36px);

}

.icon{

    font-size:54px;

    text-align:center;

}

.event-icon-image{

    display:block;

    width:1em;

    height:1em;

    margin:auto;

    object-fit:contain;

    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff);

}

.next-event:has(.person-photos){

    grid-template-columns:92px minmax(0,1fr);

    gap:24px;

}

.next-event .icon{

    font-size:64px;

}

.next-event .person-photo{

    width:88px;

    height:88px;

    flex-basis:88px;

}

.person-photos{

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;

}

.person-photo{

    width:105.6px;

    height:105.6px;

    flex:0 0 105.6px;

    border:2px solid #666666;

    border-radius:50%;

    box-shadow:0 3px 10px rgba(0,0,0,.2);

    object-fit:cover;

}

.person-photo + .person-photo{

    margin-left:-33px;

}

.later-event:has(.person-photos),
.today-item:has(.person-photos){

    grid-template-columns:auto 1fr auto;

}

.today-item:has(.person-photos){

    column-gap:22px;

}

.event-details{

    display:grid;

    grid-template-columns:minmax(0,1fr) auto;

    gap:22px;

    align-items:center;

    min-width:0;

    overflow:hidden;

}

.left-column .title{

    display:block;

    white-space:nowrap;

    text-overflow:ellipsis;

}

.title{

    font-size:clamp(34px,2.35vw,44px);

    font-weight:600;

    line-height:1.08;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;

}

.time{

    margin-top:0;

    font-size:30px;

    color:var(--muted);

    white-space:nowrap;

}/* ==========================================================
   TODAY PANEL
========================================================== */

.today-card{
    height:100%;

}

.today-list{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:0;

    margin-top:8px;

    flex:1;

    min-height:0;

    overflow:hidden;

}

.today-item{

    display:flex;

    align-items:center;

    gap:22px;

    flex:0 0 auto;

    min-height:88px;

    padding:8px 0;

    border-top:1px solid rgba(255,255,255,.08);

}

.today-item:first-child{

    border-top:none;

}

.today-icon{

    font-size:58px;

    text-align:center;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:0 0 84px;

}

.today-icon.person-photos{

    flex-basis:105.6px;

}

.today-icon .event-icon-image{

    width:72px;

    height:72px;

}

.today-icon:has(.event-icon-image){

    flex-basis:72px;

}

.today-title{

    flex:1;

    min-width:0;

    font-size:clamp(34px,2.35vw,44px);

    font-weight:600;

    line-height:1.1;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;

}

.today-empty{

    margin:auto;

    font-size:34px;

    color:var(--muted);

}

.today-gallery{

    position:relative;

    flex:1;

    min-height:0;

    margin:0 -26px -22px;

    overflow:hidden;

    background:#000000;

}

.today-gallery-photo{

    display:block;

    position:absolute;

    top:0;

    right:0;

    bottom:0;

    left:0;

    width:100%;

    height:100%;

    background-repeat:no-repeat;

    background-position:center center;

    object-fit:cover;

    object-position:center center;

    -webkit-background-size:cover;

    background-size:cover;

    opacity:0;

    transition:opacity 1s ease-in-out;

    will-change:opacity;

    -webkit-backface-visibility:hidden;

    backface-visibility:hidden;

}

.today-gallery-photo.is-visible{

    opacity:1;

}

@media (prefers-reduced-motion: reduce){

    .today-gallery-photo{

        transition-duration:.01s;

    }

}

/* ==========================================================
   LATER TODAY
========================================================== */

.later-card{

    display:flex;

    flex-direction:column;

    padding-top:12px;

    padding-bottom:12px;

}

.later-card h2{

    margin-bottom:10px;

}

.later-list{

    display:flex;

    flex-direction:column;

    gap:0;

    overflow:hidden;

    flex:1;

    min-height:0;

}

.later-event{

    display:grid;

    grid-template-columns:

        58px
        1fr
        auto;

    gap:22px;

    align-items:center;

    min-height:0;

    flex:1;

}

.later-event + .later-event{

    border-top:1px solid rgba(255,255,255,.06);

}

.later-icon{

    font-size:42px;

    text-align:center;

    line-height:1;

}

.later-event:has(.person-photos){

    grid-template-columns:112px minmax(0,1fr) auto;

    min-height:116px;

    column-gap:24px;

}

.later-event .person-photo{

    width:108px;

    height:108px;

    flex-basis:108px;

}

.later-title{

    font-size:30px;

    line-height:1.25;

    min-width:0;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.later-time{

    font-size:30px;

    color:var(--muted);

    white-space:nowrap;

}

/* ==========================================================
   WEEK AHEAD
========================================================== */

.week-ahead{

    padding:22px 24px;

    min-height:0;

}

.coming-up-grid{

    display:grid;

    /* One tile for each of the next seven days.  Keeping the track count
       fixed prevents the seventh reminder from being pushed to a new row. */
    grid-template-columns:repeat(7,minmax(0,1fr));

    gap:18px;

    height:calc(100% - 40px);

}

.coming-card{

    background:var(--card-light);

    border-radius:18px;

    border:1px solid rgba(255,255,255,.05);

    min-height:0;

    padding:12px 14px;

    display:grid;

    grid-template-rows:auto 44px minmax(0,1fr);

    gap:6px;

    justify-items:center;

    align-items:center;

    text-align:center;

    transition:transform .18s ease;

}

.coming-card:hover{

    transform:translateY(-2px);

}

.coming-card:has(.person-photos){

    grid-template-rows:auto 105.6px minmax(0,1fr);

}

.coming-day{

    font-size:22px;

    font-weight:700;

}

.coming-icon{

    font-size:42px;

}

.coming-title{

    width:100%;

    min-width:0;

    overflow:hidden;

    font-size:22px;

    line-height:1.25;

    white-space:nowrap;

}

.coming-title-text{

    display:inline-flex;

    min-width:max-content;

    transform:translate3d(0, 0, 0);

    white-space:nowrap;

}

.coming-title-text.is-ticker .coming-title-copy:first-child{

    margin-right:44px;

}

.coming-title-text.is-ticker{

    animation-duration:var(--ticker-duration);

    animation-iteration-count:infinite;

    animation-name:week-ahead-ticker;

    animation-timing-function:linear;

    will-change:transform;

}

@keyframes week-ahead-ticker{

    from{

        transform:translate3d(0, 0, 0);

    }

    to{

        transform:translate3d(calc(-1 * var(--ticker-distance)), 0, 0);

    }

}

/* ==========================================================
   EMPTY STATES
========================================================== */

.empty{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100px;

    color:var(--muted);

    font-size:28px;

    text-align:center;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1600px){

    .container{

        grid-template-rows:auto minmax(0,1fr) auto;

    }

    .dashboard{

        grid-template-columns:minmax(0,2fr) minmax(0,1fr);

    }

}

@media (max-width:1400px){

    .coming-up-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:1100px){

    body{

        overflow:auto;

    }

    .dashboard{

        grid-template-columns:1fr;

    }

    .coming-up-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:700px){

    .header{

        grid-template-columns:1fr;

        gap:20px;

    }

    .header-right{

        justify-content:space-between;

    }

    #clock{

        font-size:56px;

    }

    .coming-up-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

    }

}