/**
 * All Listings directory — template_listing.php + sidebar-listing.php.
 * Added 2026-08-20. Enqueued on that page template only, from
 * admin/geocraft_functions.php, so no other page is affected.
 *
 * Built on the site's existing --dt-* tokens (css/desert-tokens.css);
 * nothing here introduces a second palette.
 *
 * The theme lays this page out with its old 24-column float grid
 * (.grid_16 = 66.7%, .grid_8 = 33.3%). Those two are re-proportioned to
 * 72/28 here rather than replaced, so the floats, clears and margins the
 * rest of the theme relies on keep behaving.
 */

.dir-wrapper{
    max-width:1220px;
    margin:0 auto;
    padding:0 clamp(16px,3vw,30px) 60px;
    box-sizing:border-box;
}
.dir-wrapper .dir-main,
.dir-wrapper .dir-aside{
    box-sizing:border-box;
    margin:0;
}
.dir-wrapper .dir-main{width:72%;float:left;padding-right:34px;}
.dir-wrapper .dir-aside{width:28%;float:left;}
.dir-wrapper .dir-content{overflow:visible;margin:0;}

/* ---------- page head ---------- */
.dir-head{
    padding:34px 0 24px;
    border-bottom:1px solid var(--dt-paper-line);
    margin-bottom:28px;
}
.dir-eyebrow{
    margin:0 0 8px;
    font-family:'Archivo',sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--dt-terracotta);
}
.dir-title{
    margin:0;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:clamp(28px,3.6vw,40px);
    line-height:1.08;
    color:var(--dt-ink-950);
}
.dir-count{
    margin:10px 0 0;
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    color:var(--dt-ink-800);
}
.dir-count strong{font-weight:700;color:var(--dt-ink-950);}

/* category-archive intro copy (taxonomy-listcat.php) */
.dir-intro{
    margin:16px 0 0;
    max-width:70ch;
}
.dir-intro p{
    margin:0 0 12px;
    font-family:'Archivo',sans-serif;
    font-size:14.5px;
    line-height:1.65;
    color:var(--dt-ink-800);
}
.dir-intro p:last-child{margin-bottom:0;}

/* ---------- card grid: 3 / 2 / 1 ---------- */
.dir-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    align-items:stretch;
}
.dir-card{
    display:flex;
    flex-direction:column;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:4px;
    overflow:hidden;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dir-card:hover{
    transform:translateY(-3px);
    border-color:var(--dt-terracotta-hi);
    box-shadow:0 6px 22px rgba(27,18,12,.10);
}

/* fixed ratio keeps every card's image the same height */
.dir-card-media{
    position:relative;
    display:block;
    aspect-ratio:3/2;
    background:var(--dt-ink-800);
    overflow:hidden;
}
.dir-card-media img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    display:block;
    transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.dir-card:hover .dir-card-media img{transform:scale(1.04);}
.dir-badge{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:4px 9px;
    border-radius:2px;
    background:var(--dt-gold);
    color:var(--dt-ink-950);
    font-family:'Archivo',sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

/* body grows, footer is pushed to the bottom, so cards in a row end
   level however long the descriptions are */
.dir-card-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:15px 16px 14px;
    font-family:'Archivo',sans-serif;
}
.dir-cat{margin:0 0 7px;display:flex;align-items:center;gap:6px;}
.dir-cat a{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--dt-zellige);
    text-decoration:none;
    border-bottom:1px solid transparent;
}
.dir-cat a:hover{border-bottom-color:var(--dt-zellige);}
.dir-cat-more{
    font-size:10.5px;
    font-weight:700;
    color:var(--dt-ink-800);
    opacity:.6;
}
.dir-card-title{
    margin:0 0 6px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:17.5px;
    line-height:1.22;
}
.dir-card-title a{color:var(--dt-ink-950);text-decoration:none;}
.dir-card-title a:hover{color:var(--dt-terracotta);}
.dir-loc{
    display:flex;
    align-items:flex-start;
    gap:5px;
    margin:0 0 9px;
    font-size:12.5px;
    line-height:1.35;
    color:var(--dt-terracotta);
    font-weight:600;
}
.dir-loc svg{flex:none;margin-top:2px;}
.dir-desc{
    margin:0 0 14px;
    font-size:13.5px;
    line-height:1.55;
    color:var(--dt-ink-800);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.dir-card-foot{
    margin-top:auto;
    padding-top:12px;
    border-top:1px solid var(--dt-paper-line);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:6px 10px;
}
.dir-rate{display:flex;align-items:center;gap:6px;font-size:12px;}
.dir-rate--none{color:var(--dt-ink-800);opacity:.55;font-style:italic;}
.dir-stars{display:inline-flex;gap:1px;}
.dir-stars i{font-style:normal;color:var(--dt-paper-line);font-size:13px;line-height:1;}
.dir-stars i.on{color:var(--dt-gold);}
.dir-rate-n{font-weight:700;color:var(--dt-ink-950);font-size:12px;}
.dir-rate-n span{font-weight:400;color:var(--dt-ink-800);opacity:.7;}
.dir-view{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--dt-terracotta);
    text-decoration:none;
    white-space:nowrap;
}
.dir-view:hover{color:var(--dt-ink-950);}
.dir-view span{transition:transform .15s ease;}
.dir-view:hover span{transform:translateX(3px);}

.dir-banner{
    margin-top:26px;
    padding:16px 18px;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:4px;
    font-family:'Archivo',sans-serif;
    font-size:14px;
    color:var(--dt-ink-800);
}
.dir-empty{
    padding:40px 0;
    font-family:'Archivo',sans-serif;
    font-size:15px;
    color:var(--dt-ink-800);
}

/* ---------- pagination ---------- */
.dir-paging{
    display:block;
    margin-top:32px;
    padding-top:20px;
    border-top:1px solid var(--dt-paper-line);
    font-family:'Archivo',sans-serif;
}
.dir-paging:empty{display:none;}
.dir-paging span{float:none !important;}
.dir-paging a,
.dir-paging .current,
.dir-paging .page-numbers{
    display:inline-block;
    min-width:36px;
    padding:8px 11px;
    margin:0 4px 6px 0;
    border:1px solid var(--dt-paper-line);
    border-radius:3px;
    background:var(--dt-paper-hi);
    color:var(--dt-ink-950);
    font-size:13px;
    font-weight:600;
    text-align:center;
    text-decoration:none;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.dir-paging a:hover{
    background:var(--dt-terracotta);
    border-color:var(--dt-terracotta);
    color:var(--dt-paper-hi);
}
.dir-paging .current,
.dir-paging .page-numbers.current{
    background:var(--dt-ink-950);
    border-color:var(--dt-ink-950);
    color:var(--dt-paper-hi);
}

/* ---------- sidebar ---------- */
.dir-sidebar{font-family:'Archivo',sans-serif;}
.dir-widget{
    margin:0 0 20px;
    padding:16px 17px 17px;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:4px;
}
.dir-widget:first-child{margin-top:34px;}
.dir-widget-title{
    margin:0 0 13px;
    padding-bottom:10px;
    border-bottom:1px solid var(--dt-paper-line);
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:16px;
    line-height:1.2;
    color:var(--dt-ink-950);
}
.dir-widget-more{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin-top:12px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--dt-terracotta);
    text-decoration:none;
}
.dir-widget-more:hover{color:var(--dt-ink-950);}

/* compact rows shared by the three list widgets */
.dir-mini{list-style:none;margin:0;padding:0;}
.dir-mini li{
    display:flex;
    gap:11px;
    align-items:flex-start;
    padding:10px 0;
    margin:0;
    list-style:none;
    border-bottom:1px solid var(--dt-paper-line);
}
.dir-mini li:first-child{padding-top:0;}
.dir-mini li:last-child{border-bottom:0;padding-bottom:0;}
.dir-mini-thumb{
    flex:none;
    width:52px;
    height:52px;
    border-radius:3px;
    overflow:hidden;
    background:var(--dt-ink-800);
    display:block;
}
.dir-mini-thumb img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    display:block;
}
.dir-mini-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.dir-mini-name{
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:14px;
    line-height:1.25;
    color:var(--dt-ink-950);
    text-decoration:none;
}
.dir-mini-name:hover{color:var(--dt-terracotta);}
.dir-mini-meta{
    font-size:11.5px;
    line-height:1.35;
    color:var(--dt-ink-800);
    opacity:.8;
}
.dir-mini-rate{display:flex;align-items:center;gap:5px;margin-top:2px;}
.dir-mini-rate .dir-stars i{font-size:11px;}
.dir-mini-rate .dir-rate-n{font-size:11px;}

.dir-cats{list-style:none;margin:0;padding:0;}
.dir-cats li{margin:0;padding:0;list-style:none;}
.dir-cats a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:9px 0;
    border-bottom:1px solid var(--dt-paper-line);
    font-size:13.5px;
    color:var(--dt-ink-950);
    text-decoration:none;
    transition:color .15s ease;
}
.dir-cats li:last-child a{border-bottom:0;}
.dir-cats a:hover{color:var(--dt-terracotta);}
.dir-cats em{
    flex:none;
    font-style:normal;
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--dt-ink-800);
    background:var(--dt-paper);
    border:1px solid var(--dt-paper-line);
    border-radius:999px;
    padding:2px 8px;
}

.dir-search{display:flex;flex-direction:column;gap:9px;}
.dir-search input[type="text"]{
    width:100%;
    height:42px;
    box-sizing:border-box;
    padding:0 12px;
    border:1.5px solid var(--dt-paper-line);
    border-radius:3px;
    background:#fff;
    font-family:'Archivo',sans-serif;
    font-size:14px;
    color:var(--dt-ink-950);
}
.dir-search input[type="text"]:focus{
    border-color:var(--dt-terracotta);
    outline:none;
    box-shadow:0 0 0 3px rgba(198,96,42,.14);
}
.dir-search button{
    height:42px;
    border:0;
    border-radius:3px;
    background:var(--dt-terracotta);
    color:var(--dt-paper-hi);
    font-family:'Archivo',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    cursor:pointer;
    transition:background .15s ease;
}
.dir-search button:hover{background:var(--dt-ink-950);}
.screen-reader-text{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.dir-wrapper a:focus-visible,
.dir-wrapper button:focus-visible,
.dir-wrapper input:focus-visible{outline:2.5px solid var(--dt-zellige);outline-offset:2px;}

/* ---------- responsive ---------- */
/*
 * 1260px, not 1040px: the theme's legacy 960-grid system
 * (css/960_24_col_responsive.css) caps .container_24/.grid_24 to a
 * fixed 950px between 960-1260px viewports (a pre-desert-redesign
 * breakpoint this file doesn't otherwise touch). .dir-main's 72% of
 * that fixed 950px leaves ~202px per 3-up card - just short of the
 * ~222px the un-shrinkable rating + "View Details" footer row needs,
 * so it used to spill past the card edge and get sliced off by
 * .dir-card's overflow:hidden. Dropping to 2 columns before that zone
 * avoids the squeeze; .dir-card-foot below also wraps instead of
 * clipping as a second line of defense.
 */
@media only screen and (max-width:1260px){
    .dir-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media only screen and (max-width:860px){
    .dir-wrapper .dir-main,
    .dir-wrapper .dir-aside{width:100%;float:none;padding-right:0;}
    .dir-wrapper .dir-aside{margin-top:36px;}
    .dir-widget:first-child{margin-top:0;}
}
@media only screen and (max-width:560px){
    .dir-grid{grid-template-columns:1fr;gap:16px;}
    .dir-head{padding-top:24px;}
}
@media (prefers-reduced-motion:reduce){
    .dir-card,
    .dir-card-media img,
    .dir-view span{transition:none;}
    .dir-card:hover{transform:none;}
    .dir-card:hover .dir-card-media img{transform:none;}
}