/* =================================================
   site.css — GLOBAL BASE (Recode v2)
   Goals:
   - Cleaner + fewer moving parts
   - Mobile hero DOES NOT get “too tall”
   - Search filters are collapsible (CSS-ready)
   - No duplicate breakpoints / no redundant iOS rules
   ================================================= */

/* =========================
   1) Reset
   ========================= */
html, body { margin:0; padding:0; }
*{ box-sizing:border-box; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select { font: inherit; }
button{ background:none; border:0; padding:0; }

/* =========================
   2) Tokens
   ========================= */
:root{
  --kr-bg:#fafafa;
  --kr-card:#ffffff;
  --kr-text:#111827;
  --kr-muted:#6b7280;
  --kr-border:#e5e7eb;

  --kr-accent:#e86800;
  --kr-accent2:#c93c20;

  --kr-radius:20px;
  --kr-radius-sm:12px;

  --shadow-sm: 0 2px 10px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --shadow-accent: 0 10px 26px rgba(232,104,0,.16);

  --s-1:6px;
  --s-2:10px;
  --s-3:14px;
  --s-4:18px;
  --s-5:24px;
  --s-6:32px;

  --kr-container:1180px;
}

/* =========================
   3) Base
   ========================= */
.kr-page{
  background:var(--kr-bg);
  color:var(--kr-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  line-height:1.6;
}

.kr-main{
  width:100%;
  margin:0 auto;
  padding:16px 20px;
}

/* =========================
   4) Sections
   ========================= */
.kr-section{ margin-top: var(--s-6); }

.kr-section__head{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
}

.kr-section__title{
  margin:0;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.2px;
}

.kr-section__sub{
  margin:0;
  color:var(--kr-muted);
  font-size:14px;
  font-weight:500;
}

/* =========================
   5) HERO
   - Mobile: image + content (stack)
   - Desktop: split grid
   ========================= */
.kr-hero{
  position:relative;
  overflow:hidden;
}

.kr-hero__media{
  position:relative;
}

.kr-hero__media::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%);
  pointer-events:none;
}

.kr-hero__media img{
  width:100%;
  height: clamp(220px, 34vw, 380px);
  object-fit:cover;
}

.kr-hero__content{
  padding: var(--s-5);
  display:flex;
  flex-direction:column;
  gap: var(--s-3);
}

.kr-hero__title{
  margin:0;
  font-size: clamp(22px, 3.5vw, 36px);
  line-height:1.2;
  font-weight:900;
  background: linear-gradient(135deg, #111827 0%, var(--kr-accent) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.kr-hero__title span{ display:block; margin-top:4px; }

/* =========================
   6) SEARCH (keyword + filters)
   - Mobile first
   - iOS zoom prevention: enforce 16px on all inputs/selects
   ========================= */
.kr-search{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* keyword row */
.kr-search__box{
  display:flex;
  align-items:center;
  gap: 10px;
  background:#fff;
  border:2px solid transparent;
  border-radius:16px;
  padding:12px 14px;
  box-shadow: var(--shadow-md);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.kr-search__box:focus-within{
  border-color: var(--kr-accent);
  box-shadow: var(--shadow-accent);
}

.kr-search__box i{
  color: var(--kr-accent);
  font-size:18px;
  padding-left:2px;
}

.kr-search__box input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font-size:16px;
  line-height:1.2;
  color: var(--kr-text);
}

.kr-search__box input::placeholder{ color: var(--kr-muted); }

.kr-search__box button{
  cursor:pointer;
  background: linear-gradient(135deg, var(--kr-accent) 0%, var(--kr-accent2) 100%);
  color:#fff;
  font-weight:900;
  padding:12px 18px;
  border-radius:12px;
  box-shadow: 0 4px 14px rgba(232,104,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.kr-search__box button:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(232,104,0,.32);
}

/* filter toggle (works with your JS + hidden panel) */
.kr-filterToggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  background:#fff;
  border:1px solid var(--kr-border);
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  box-shadow: var(--shadow-sm);
  cursor:pointer;
}

.kr-filterToggle i{
  color: var(--kr-muted);
  transition: transform .18s ease;
}
.kr-filterToggle.is-open i{ transform: rotate(180deg); }

/* filters grid */
.kr-search__filters{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* each filter card */
.kr-filter{
  display:flex;
  flex-direction:column;
  gap:8px;
  background:#fff;
  border:1px solid var(--kr-border);
  border-radius:16px;
  padding:12px 14px;
  box-shadow: var(--shadow-sm);
}

.kr-filter__label{
  font-size:12px;
  font-weight:900;
  color: var(--kr-muted);
  letter-spacing:.2px;
}

.kr-filter select,
.kr-filter input{
  width:100%;
  border:1px solid var(--kr-border);
  border-radius:12px;
  padding:12px 12px;
  background:#fff;
  color: var(--kr-text);
  font-size:16px; /* iOS zoom prevention */
  line-height:1.2;
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.kr-filter input::placeholder{ color: rgba(107,114,128,.82); }

.kr-filter select:focus,
.kr-filter input:focus{
  border-color: var(--kr-accent);
  box-shadow: 0 8px 18px rgba(232,104,0,.14);
}

/* consistent select arrow */
.kr-filter select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--kr-muted) 50%),
    linear-gradient(135deg, var(--kr-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:34px;
}

/* chips (optional) */
.kr-search__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.kr-chip{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  border-radius:999px;
  border:2px solid var(--kr-border);
  background:#fff;
  color: var(--kr-text);
  font-size:13px;
  font-weight:800;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.kr-chip:hover{
  border-color: var(--kr-accent);
  color: var(--kr-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(232,104,0,.14);
}

/* =========================
   7) Components
   ========================= */

/* VALUE STRIP */
.kr-strip{ margin-top: var(--s-5); }

.kr-strip__inner{
  background: linear-gradient(135deg, rgba(232,104,0,.08) 0%, rgba(201,60,32,.04) 100%);
  border:2px solid rgba(232,104,0,.2);
  border-radius: var(--kr-radius);
  padding: var(--s-5);
  display:flex;
  align-items:center;
  gap: var(--s-4);
  box-shadow: 0 4px 16px rgba(232,104,0,.08);
  overflow:hidden;
}

.kr-strip__badge{
  display:inline-flex;
  padding:6px 14px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(232,104,0,.2) 0%, rgba(201,60,32,.15) 100%);
  color: var(--kr-accent2);
  font-weight:900;
  font-size:13px;
}

.kr-strip__text{
  margin:0;
  color: var(--kr-text);
  font-size:14px;
  line-height:1.5;
  flex:1;
}

/* GENRE GRID */
.kr-genre{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}

.kr-genre__card{
  background:#fff;
  border:2px solid var(--kr-border);
  border-radius: var(--kr-radius);
  padding:20px 14px;
  color: var(--kr-text);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.kr-genre__card:hover{
  border-color: var(--kr-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(232,104,0,.15);
}

.kr-genre__emoji{ font-size:32px; line-height:1; }
.kr-genre__label{ margin-top:10px; font-weight:900; font-size:14px; }

/* CARDS BASE (GLOBAL) */
.kr-cards{ position:relative; width:100%; }
.kr-cards--grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}

/* WARDS */
.kr-wardlist{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}

.kr-ward{
  background:#fff;
  border:2px solid var(--kr-border);
  border-radius:16px;
  padding:14px 16px;
  color: var(--kr-text);
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.kr-ward:hover{
  border-color: var(--kr-accent);
  box-shadow: 0 8px 24px rgba(232,104,0,.12);
  transform: translateY(-3px);
}

.kr-ward__name{ font-weight:900; font-size:14px; }

.kr-ward__count{
  min-width:42px;
  text-align:center;
  padding:6px 12px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(232,104,0,.12) 0%, rgba(201,60,32,.08) 100%);
  color: var(--kr-accent2);
  font-weight:900;
  font-size:13px;
}

/* =========================
   8) Responsive
   ========================= */

/* extra small phones */
@media (max-width: 420px){
  .kr-main{ padding:14px 16px; }
  .kr-hero__content{ padding: 18px; }
  .kr-search__box{ padding:10px 12px; border-radius:14px; }
  .kr-search__box button{ padding:11px 14px; border-radius:11px; }
  .kr-filter{ padding:11px 12px; border-radius:14px; }
  .kr-filter select, .kr-filter input{ padding:11px 11px; border-radius:11px; }
}

/* mobile tweaks */
@media (max-width: 767px){
  .kr-strip__inner{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* tablet: 2 filter columns */
@media (min-width: 760px){
  .kr-search__filters{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* desktop */
@media (min-width: 900px){
  .kr-main{
    max-width: var(--kr-container);
    padding: 32px 40px;
  }

  .kr-section{ margin-top: 48px; }
  .kr-section__head{ margin-bottom: 24px; }
  .kr-section__title{ font-size: 28px; }

  .kr-hero{
    display:grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap:0;
    background:transparent;
  }

  .kr-hero__media img{
    height:100%;
    min-height:420px;
    max-height:520px;
    border-radius: var(--kr-radius);
  }

  .kr-hero__content{
    padding:32px;
    align-self:center;
  }

  .kr-hero__title{
    font-size: clamp(32px, 2.5vw, 48px);
  }

  .kr-search__box{
    padding:14px 18px;
    border-radius:18px;
  }

  .kr-search__box button{
    padding:14px 24px;
    border-radius:14px;
    font-size:15px;
  }

  /* filters: 4 columns on desktop */
  .kr-search__filters{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kr-strip__inner{ padding:24px 28px; }
  .kr-strip__text{ font-size:15px; }

  .kr-genre{ gap:18px; }
  .kr-genre__card{ padding:24px 18px; }
  .kr-genre__emoji{ font-size:42px; }
  .kr-genre__label{ font-size:16px; }

  .kr-wardlist{ gap:16px; }
  .kr-ward{ padding:16px 18px; }
  .kr-ward__name{ font-size:15px; }

  /* desktop: always show filters panel, hide toggle */
  .kr-filterToggle{ display:none; }
  #krFilters{ display:grid !important; }
  #krFilters[hidden]{ display:grid !important; }
}
/* =================================================
   HERO SEARCH — HITOSARA STYLE (COMPACT)
   Paste at END of site.css (overrides v2)
   Requires markup:
   .kr-search.kr-search--compact
   .kr-search__kw (optional keyword row)
   .kr-searchCard + .kr-searchGrid + .kr-dd + .kr-searchBtn
   ================================================= */

/* Compact form container */
.kr-search--compact{
  gap: 10px;
}

/* OPTIONAL: small keyword row (keep or delete) */
.kr-search--compact .kr-search__kw{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.10);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.kr-search--compact .kr-search__kw i{
  color: rgba(17,24,39,.55);
  font-size:16px;
}

.kr-search--compact .kr-search__kw input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color: var(--kr-text);
  font-size:16px; /* prevent iOS zoom */
  line-height:1.2;
}

.kr-search--compact .kr-search__kw input::placeholder{
  color: rgba(107,114,128,.85);
}

/* Card */
.kr-search--compact .kr-searchCard{
  padding:14px;
  border-radius:16px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.10);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Small centered label like hitosara */
.kr-search--compact .kr-searchCard__title{
  text-align:center;
  font-size:13px;
  font-weight:900;
  color: rgba(107,114,128,.95);
  letter-spacing:.08em;
  margin: 2px 0 10px;
}

/* 2x2 grid */
.kr-search--compact .kr-searchGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

/* Inputs/selects unified */
.kr-search--compact .kr-dd{
  position:relative;
}

.kr-search--compact .kr-dd input,
.kr-search--compact .kr-dd select{
  width:100%;
  height:44px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  color: var(--kr-text);
  font-size:16px; /* prevent iOS zoom */
  line-height:1.2;
  outline:none;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.kr-search--compact .kr-dd input::placeholder{
  color: rgba(107,114,128,.85);
}

.kr-search--compact .kr-dd input:focus,
.kr-search--compact .kr-dd select:focus{
  border-color: var(--kr-accent);
  box-shadow: 0 8px 18px rgba(232,104,0,.14);
}

/* Clean select caret */
.kr-search--compact .kr-dd select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(107,114,128,.9) 50%),
    linear-gradient(135deg, rgba(107,114,128,.9) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* Search button inside card */
.kr-search--compact .kr-searchBtn{
  margin-top:12px;
  width:100%;
  height:48px;
  border:0;
  border-radius:12px;
  cursor:pointer;
  background: linear-gradient(135deg, var(--kr-accent) 0%, var(--kr-accent2) 100%);
  color:#fff;
  font-size:16px;
  font-weight:900;
  box-shadow: 0 6px 18px rgba(232,104,0,.22);
  transition: transform .16s ease, box-shadow .16s ease;
}

.kr-search--compact .kr-searchBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(232,104,0,.28);
}

.kr-search--compact .kr-searchBtn:active{
  transform: translateY(0);
}

/* Make hero content tighter so it doesn’t get tall */
@media (max-width: 767px){
  .kr-hero__content{
    padding: 16px;
    gap: 10px;
  }
  .kr-hero__title{
    font-size: 22px;
    text-align: center;
  }
}

/* Very small phones: stack to 1 column */
@media (max-width: 360px){
  .kr-search--compact .kr-searchGrid{
    grid-template-columns: 1fr;
  }
}

/* Desktop: slightly wider + keep 2 columns */
@media (min-width: 900px){
  .kr-search--compact{
    width: 520px;
  }
}