/* Current Korea layout and consistency layer. Loaded after responsive-discovery.css
   (arabic-layout.css follows). Values follow docs/DESIGN.md: change tokens there first. */

/* 0. Design tokens */
:root{
  --ck-ink:#262622;--ck-ink-soft:#58665e;--ck-muted:#5d6a5c;
  --ck-forest:#183c33;--ck-forest-soft:#edf3ef;--ck-rust:#99402c;--ck-rust-strong:#b9442c;
  --ck-paper:#fffdf7;--ck-sage:#f2f3e9;--ck-mist:#eaf0e6;--ck-sand:#f6f4ef;--ck-skeleton:#eeece4;
  --ck-line:#d7ddcf;--ck-line-soft:#e5e0d8;
  --ck-radius-sm:8px;--ck-radius-md:12px;--ck-radius-lg:16px;--ck-radius-pill:999px;
  --ck-frame:1540px;--ck-gutter:48px;--ck-gutter-phone:16px;--ck-measure:72ch;--ck-tap:44px;
}

/* 0a. One primary green, one chip shape, one font for the language switch */
.home-search>button,.event-verification,.visit-primary-actions>a:first-child,.view-switch>span,.map-view-switch button[aria-pressed=true],.content-tabs a[aria-current=page],.chip.active,.trip-presets button[aria-pressed="true"]{background:var(--ck-forest)!important;border-color:var(--ck-forest)!important;color:#fff!important}
.category-row .chip{border-radius:var(--ck-radius-pill)!important}
.top .languages a{font-family:inherit;border-radius:var(--ck-radius-sm)}
.see-all{color:var(--ck-rust)}

/* Explore: date presets sat 22px inside the filter column at every width. */
.browse-filters + .trip-presets{margin-inline:0}

/* 1. Phones: filters take one compact band so results and the map start on the first screen. */
@media(max-width:680px){
  .explore-intro h1{font-size:26px;line-height:1.2;margin-bottom:8px}
  .explore-intro p,main:has(>.map-filter-panel)>h1+p{font-size:14px;line-height:1.55;margin-block:4px 10px}
  main:has(>.map-filter-panel)>a.map-list-link{display:none}
  .content-tabs,.browse-filters + .trip-presets,main:has(>.map-filter-panel) .map-view-switch{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-block:8px;gap:6px}
  .content-tabs::-webkit-scrollbar,.browse-filters + .trip-presets::-webkit-scrollbar{display:none}
  .content-tabs a,.browse-filters + .trip-presets button,.view-switch>a,.view-switch>span,.map-view-switch button{flex-shrink:0;min-height:40px;padding:8px 14px;font-size:14px;white-space:nowrap}
  .browse-filters>summary,.map-filter-panel>summary{padding:10px 14px;min-height:44px;line-height:1.5}
  .filter-summary,.map-filter-summary{display:inline;margin:0 0 0 8px;font-size:13px}
  html[dir=rtl] .filter-summary,html[dir=rtl] .map-filter-summary{margin:0 8px 0 0}
  .browse-filters:not([open]){margin-bottom:0}
  .map-filter-panel{margin-block:8px}
  .view-switch{margin-block:8px}
  .category-row{padding:4px 0 12px}
  #discover>.section-head{margin-bottom:8px}
}

/* 1b. Tablets: the map page uses the phone pattern (collapsed filters, map/list switch) up to 900px. */
@media(min-width:681px) and (max-width:900px){
  .map-view-switch{display:flex}
  .map-filter-panel>summary{display:list-item;padding:10px 14px;min-height:44px}
  .map-filter-summary{display:inline;margin:0 0 0 8px}
  .map-filter-panel .filter-actions{display:flex}
  .event-map-layout{grid-template-columns:minmax(0,1fr);min-height:0}
  .event-map-layout[data-display=map] .map-event-list,.event-map-layout[data-display=list] .event-map-canvas{display:none}
  .map-event-list{max-height:none}
  main:has(>.map-filter-panel)>a.map-list-link{display:none}
}

/* 2. Reading width: long paragraphs stay near 70 characters on wide screens. */
.detail-page p,.detail-page li,.detail-page dd{max-width:var(--ck-measure)}
.detail-page .notice,.detail-page .translation-note{max-width:var(--ck-measure)}

/* 3a. Tablets and small laptops: three result columns instead of two from 900px. */
@media(min-width:900px) and (max-width:1100px){
  html body .results{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body .redesign-home .results.compact-home-grid,html body[data-page=home] .home-section>.home-grid,html body .place-discovery-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px}
  html body .redesign-home .card h3,html body .place-discovery-card h3{font-size:18px}
  .neighborhood-grid,.neighborhood-directory .neighborhood-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 3b. Share actions size to their label instead of stretching across the page. */
@media(min-width:681px){
  .content-share>button{flex:0 0 auto;padding-inline:18px}
}

/* 4a. One page frame: inner pages use the same max width and side padding as the header. */
@media(min-width:681px){
  main.detail-page{max-width:var(--ck-frame)!important;padding-inline:var(--ck-gutter)!important;box-sizing:border-box}
  main.detail-page .neighborhood-directory,main.detail-page .neighborhood-profile{margin-inline:0}
}

/* 4b. Event detail: photo straight after the title at every width. Phones and tablets
   keep one column; the save and share actions share one row. */
main.detail-page:has(>.visit-summary){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:start}
main.detail-page:has(>.visit-summary)>*{grid-column:1/-1;order:5;min-width:0}
main.detail-page:has(>.visit-summary)>nav:first-child{order:0}
main.detail-page:has(>.visit-summary)>.detail-heading{order:1}
main.detail-page:has(>.visit-summary)>.event-image-detail{order:2;margin-block:4px 16px}
main.detail-page:has(>.visit-summary)>.trip-save{order:3;grid-column:1;justify-self:start;align-self:center;margin:0}
main.detail-page:has(>.visit-summary)>.event-share{order:3;grid-column:2;margin:0;align-self:center}
main.detail-page:has(>.visit-summary)>a,main.detail-page:has(>.visit-summary)>button{justify-self:start}
main.detail-page:has(>.visit-summary)>.detail-nav{order:4;margin-block:16px 8px}
@media(max-width:680px){
  main.detail-page:has(>.visit-summary)>.event-image-detail{padding:10px}
  main.detail-page:has(>.visit-summary)>.event-image-detail img{max-height:240px!important;width:auto;max-width:100%;margin-inline:auto;display:block}
}

/* 4c. Event detail on desktop: photo and story on the left, visit facts pinned on the right. */
@media(min-width:1180px){
  main.detail-page:has(>.visit-summary){grid-template-columns:auto minmax(0,1fr) minmax(340px,400px);column-gap:12px}
  main.detail-page:has(>.visit-summary)>*{grid-column:1/3}
  main.detail-page:has(>.visit-summary)>.trip-save{grid-column:1}
  main.detail-page:has(>.visit-summary)>.event-share{grid-column:2}
  main.detail-page:has(>.visit-summary)>.visit-summary{grid-column:3;grid-row:1/span 40;position:sticky;top:24px;margin:24px 0 0 36px}
  html[dir=rtl] main.detail-page:has(>.visit-summary)>.visit-summary{margin:24px 36px 0 0}
  main.detail-page:has(>.visit-summary)>.visit-summary dl{display:block}
  main.detail-page:has(>.visit-summary) .detail-nav a[href="#visit-heading"]{display:none}
}

/* 5. Home welcome: a seasonal location photo beside the title from 900px. Phones keep the
   compact search band; the photo would push events below the first screen. */
.home-hero-photo{display:none}
@media(min-width:900px){
  .redesign-home .home-welcome{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,42%);column-gap:48px;grid-template-rows:auto auto auto 1fr;align-items:start}
  .redesign-home .home-welcome>*{grid-column:1}
  .redesign-home .home-welcome>.home-hero-photo{display:block;grid-column:2;grid-row:1/span 4;margin:0;align-self:stretch}
  .home-hero-photo img{display:block;width:100%;height:100%;min-height:220px;max-height:340px;object-fit:cover;border-radius:var(--ck-radius-lg);background:var(--ck-skeleton)}
  .home-hero-photo figcaption{font-size:12px;line-height:1.5;color:var(--ck-muted);margin-top:6px;overflow-wrap:anywhere}
  .home-hero-photo figcaption a{color:inherit;text-decoration:underline}
}

/* 6. Home "this weekend": only multi-day events add a confirmed-date line; keep card tops aligned. */
.home-pick-reason{margin:0 0 8px;font-size:12px;line-height:18px;color:var(--ck-muted)}
.compact-home-grid:has(.home-pick-reason)>.home-confirmed-pick:not(:has(.home-pick-reason)){padding-top:26px}

/* 7. Loading states: partner widgets and lazy photos show a quiet placeholder, not blank space. */
.affiliate-widget-frame{background:var(--ck-skeleton) repeating-linear-gradient(90deg,transparent 0 calc(25% - 12px),#fffefb calc(25% - 12px) 25%);border-radius:var(--ck-radius-md)}
.discovery-image-frame,.card-visual,.place-discovery-card>.discovery-image-frame{background-color:var(--ck-skeleton)}

/* 8. Phones: list cards turn horizontal (image beside text), roughly halving long pages. */
@media(max-width:600px){
  main .results:not(.compact-home-grid)>.card{display:grid!important;grid-template-columns:104px minmax(0,1fr);align-items:stretch;min-height:0!important}
  main .results:not(.compact-home-grid)>.card>.card-visual{grid-row:1/span 2;height:auto!important;min-height:132px!important;max-height:none!important;border-radius:0}
  main .results:not(.compact-home-grid)>.card>.card-visual img{height:100%!important;width:100%;object-fit:cover}
  main .results:not(.compact-home-grid)>.card .event-poster{height:100%!important;min-height:132px!important;padding:10px}
  main .results:not(.compact-home-grid)>.card .poster-copy,main .results:not(.compact-home-grid)>.card .poster-top>span:first-child{display:none}
  main .results:not(.compact-home-grid)>.card>.card-content{padding:12px 14px}
  main .results:not(.compact-home-grid)>.card h3{font-size:17px;line-height:1.3;margin:4px 0 6px}
  main .results:not(.compact-home-grid)>.card .card-decision{margin:4px 0}
  main .results:not(.compact-home-grid)>.card .trip-save{min-height:40px;padding:6px 12px;font-size:13px}
}

/* 9. Empty trip: the way forward is a real button. */
.trip-page:has(.trip-empty)>p>a[href$="/explore/"]{display:inline-flex;align-items:center;min-height:var(--ck-tap);padding:10px 20px;border-radius:var(--ck-radius-sm);background:var(--ck-forest);color:#fff;font-weight:700;text-decoration:none}
.trip-actions:empty{display:none}

/* 10. Tap targets and small text on phones. */
@media(max-width:680px){
  .top .languages a{min-width:40px;min-height:var(--ck-tap);display:inline-flex;align-items:center;justify-content:center;padding:8px 4px;font-size:12px}
  .primary-nav.redesigned-nav a{font-size:12px}
}
@media(max-width:360px){.top .brand-logo{width:96px}.top .languages a{min-width:36px}}

/* 11. Contrast: provider dates and small notes meet 4.5:1 on paper backgrounds. */
.visit-provider,.photo-card-credit,.image-credit{color:var(--ck-muted)}

/* 12. Arabic: save buttons stay on one line. */
html[dir=rtl] .trip-save{white-space:nowrap}
@media(max-width:680px){.region-links{gap:4px 16px}.region-links a{display:inline-flex;align-items:center;min-height:40px}}