/* ========================
components/tw-linkboxes.css
ver.1.0  2026.04.20
========================= */

/* ---------------------------------
   Tea World Navigator Link Boxes
--------------------------------- */

.tw-linkboxes{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: .5rem 0 1rem;
}

.tw-linkbox{
  display: block;
  padding: 1rem;
  border: 1px solid #e6ded4;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  box-sizing: border-box;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    border-color .15s ease;
}

.tw-linkbox:hover{
  transform: translateY(-2px);
  background: #fdfaf6;
  box-shadow: 0 4px 14px rgba(0,0,0,.07);
  border-color: #d8cab9;
}

.tw-linkbox:focus-visible{
  outline: 2px solid var(--tea-accent, #8a4b2a);
  outline-offset: 2px;
}

.tw-linkbox-icon{
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: .35rem;
}

.tw-linkbox-title{
  margin-bottom: .15rem;
  color: #3b2b26;
  font-weight: 700;
  line-height: 1.45;
}

.tw-linkbox-desc{
  color: #6b5e57;
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------------------------------
   Variants
--------------------------------- */

/* 2カラム版が欲しいとき用 */
.tw-linkboxes--2col{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 1カラムで見せたいとき用 */
.tw-linkboxes--1col{
  grid-template-columns: 1fr;
}

/* コンパクト版 */
.tw-linkbox--compact{
  padding: .85rem .9rem;
}

.tw-linkbox--compact .tw-linkbox-icon{
  font-size: 1.3rem;
  margin-bottom: .25rem;
}

.tw-linkbox--compact .tw-linkbox-desc{
  font-size: .92rem;
}

/* ---------------------------------
   Responsive
--------------------------------- */
@media (max-width: 900px){
  .tw-linkboxes{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .tw-linkboxes,
  .tw-linkboxes--2col,
  .tw-linkboxes--1col{
    grid-template-columns: 1fr;
  }

  .tw-linkbox{
    padding: .9rem .95rem;
  }
}

/* ---------------------------------
   Environment
--------------------------------- */
@media (prefers-color-scheme: dark){
  .tw-linkbox{
    background: #161616;
    border-color: #3a3a3a;
  }

  .tw-linkbox:hover{
    background: #1d1d1d;
    border-color: #555;
    box-shadow: none;
  }

  .tw-linkbox-title{
    color: #eee3d8;
  }

  .tw-linkbox-desc{
    color: #c8beb5;
  }
}

@media (prefers-reduced-motion: reduce){
  .tw-linkbox{
    transition: none;
  }
}

@media print{
  .tw-linkboxes{
    display: block;
  }

  .tw-linkbox{
    margin-bottom: .75rem;
    box-shadow: none;
    background: #fff;
    break-inside: avoid;
  }
}