/* ==========================================================================
   AN EVENT CARD

   Shared by two pages: the gig guide at /gig-guide and the What's On This
   Weekend strip on /events. One definition, because two copies of a card
   drift apart within a month and then the same event looks like two
   different things depending on where you found it.

   Deliberately NOT scoped to a page id, unlike the rest of both
   stylesheets. That is the whole point of it - but it does mean the class
   names have to stay distinctive. Everything here is gg- prefixed and
   nothing else on the site uses that prefix.
   ========================================================================== */
/* ---------------------------------------------------------------------
   THE CARD ITSELF
   Photograph on top with the date over it, the words underneath on the
   panel. A card with no photo shows its tile, which is why an unphotographed
   listing still looks finished.
   ========================================================================== */
.gg-card{
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--sg-border);
    border-radius:14px;
    background:var(--sg-panel);
    transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.gg-card:hover{
    transform:translateY(-4px);
    border-color:#3a3a3a;
    box-shadow:0 18px 40px rgba(0,0,0,.5);
}

.gg-card-art{
    aspect-ratio:16 / 10;
    background-color:#161616;
    background-image:var(--gg-art);
    background-size:cover;
    background-position:center;
    filter:brightness(.8);
    transition:filter .25s ease;
}

.gg-card:hover .gg-card-art{ filter:brightness(1); }

.gg-chip{
    position:absolute;
    top:12px;
    left:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:52px;
    padding:8px 8px 7px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:10px;
    background:rgba(8,8,8,.88);
    line-height:1;
}

.gg-chip i{
    font-style:normal;
    font-family:var(--sg-font-accent);
    font-size:.58rem;
    letter-spacing:.12em;
    color:var(--sg-dim);
}

.gg-chip b{
    font-family:var(--sg-font-display);
    font-size:1.35rem;
    letter-spacing:-.5px;
    margin:3px 0 2px;
}

/*  An event with no date yet. The year goes in the chip on its own, so
    the card still has the same shape as the ones around it.            */
.gg-chip.is-tba b{
    font-size:.95rem;
    margin:0;
    color:var(--sg-gold);
}

.gg-card-body{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
    padding:16px 16px 18px;
    flex:1;
}

.gg-card-body h3{
    font-family:var(--sg-font-display);
    font-size:1.02rem;
    line-height:1.2;
    letter-spacing:-.3px;
    text-transform:uppercase;
    margin:0 0 2px;
}

/*  The pin and the clock are drawn here rather than sat in the markup on
    every card. Masks rather than images, so they take the colour of the
    text beside them.                                                    */
.gg-where,
.gg-when{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0;
    font-size:.82rem;
}

.gg-where{ color:#ddd; }
.gg-when{ color:var(--sg-gold); }

.gg-where::before,
.gg-when::before{
    content:"";
    width:12px;
    height:13px;
    flex-shrink:0;
    background-color:currentColor;
    -webkit-mask:var(--gg-icon) center / contain no-repeat;
    mask:var(--gg-icon) center / contain no-repeat;
}

.gg-where::before{
    --gg-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

.gg-when::before{
    --gg-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm1-13h-2v6l5 3 1-1.7-4-2.3z'/%3E%3C/svg%3E");
}

.gg-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    list-style:none;
    margin:8px 0 0;
    padding:0;
}

.gg-tags li{
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:999px;
    background:rgba(255,255,255,.05);
    color:#ccc;
    font-size:.6rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
}


/*  The link back to wherever an event was found, and the line saying when
    the guide last went looking. Both are quiet - they are the workings,
    not the listing.                                                      */
.gg-via{
    margin-top:10px;
    color:var(--sg-dim);
    font-size:.7rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-decoration:none;
    border-bottom:1px solid #333;
    transition:color .2s ease, border-color .2s ease;
}

.gg-via:hover{
    color:var(--sg-orange);
    border-color:var(--sg-orange);
}

.gg-updated{
    margin-top:20px;
    color:var(--sg-dim);
    font-size:.76rem;
    letter-spacing:.04em;
}

/*  Moved here with the card, so it travels with what it modifies rather
    than being left behind on one page.                                  */
@media (prefers-reduced-motion:reduce){
    .gg-card,
    .gg-card-art{ transition:none; }

    .gg-card:hover{ transform:none; }
}