/* Common site-wide styles for 占いメディア - 星の窓 */

/* Google Fonts for brand logo */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&display=swap');

/* Brand logo font */
.brand-logo { font-family: 'Playfair Display', 'Noto Sans JP', serif; letter-spacing:.02em }

/* Hero KV */
.hero-kv { position: relative; overflow: hidden; }
.hero-kv img { width: 100%; object-fit: cover; object-position: center; display: block; }
.hero-content { position: absolute; top: 80px; left: 40px; z-index: 2; color: #fff; }
.hero-content h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: .5rem; text-shadow: 0 2px 4px rgba(0,0,0,.5) }
.hero-content p { font-size: 1.125rem; text-shadow: 0 1px 2px rgba(0,0,0,.5) }
@media (max-width: 768px) {
  .hero-content { left: 20px; top: 60px; }
  .hero-content h1 { font-size: 2rem; }
  .hero-content p { font-size: 1rem; }
}

/* Simple cards */
.card-simple { transition: all .2s ease; border: 1px solid #e5e7eb; }
.card-simple:hover { transform: translateY(-2px); box-shadow: 0 4px 12px -2px rgba(0,0,0,.1) }
.card-simple:active { transform: translateY(0) }

.tag-simple { display:inline-block; padding:.25rem .75rem; font-size:.75rem; font-weight:500; background:#f3f4f6; color:#374151; border-radius:9999px; margin-right:.5rem; margin-bottom:.25rem; transition:background-color .2s ease }
.tag-simple:hover { background:#e5e7eb }

.btn-primary { background:#374151; color:#fff; padding:12px 24px; border-radius:6px; font-weight:500; transition:all .2s ease }
.btn-primary:hover { background:#1f2937 }
.btn-secondary { background:transparent; color:#374151; border:1px solid #d1d5db; padding:12px 24px; border-radius:6px; font-weight:500; transition:all .2s ease }
.btn-secondary:hover { background:#f9fafb }

/* Search */
.search-section { background:#fff; padding:2rem 0; border-bottom:1px solid #e5e7eb }
.search-bar { max-width:600px; margin:0 auto; position:relative }
.search-input { width:100%; padding:16px 120px 16px 24px; border:2px solid #e5e7eb; border-radius:50px; font-size:16px; outline:none; transition:all .3s ease }
.search-input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.1) }

/* Hover card */
.card-hover { transition: all .3s ease }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04) }
.card-hover:active { transform: translateY(0) }

/* Tag badge used on lists */
.tag-badge { display:inline-flex; align-items:center; padding:.375rem .75rem; font-size:.75rem; font-weight:600; background:#fff; border:1px solid #fecdd3; color:#be185d; border-radius:9999px; margin-right:.375rem; margin-bottom:.375rem; transition:all .2s ease; box-shadow:0 1px 2px rgba(0,0,0,.04) }
.tag-badge:hover { background:#fff1f7; transform:scale(1.03) }

/* Gradient text */
.gradient-text { background:linear-gradient(135deg,#667eea 0%, #764ba2 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }

/* Line clamp helpers (no plugin build) */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }

/* Layout helpers */
.main-area { padding-top:30px }

/* Swiper tuning */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35) }
.hero-swiper .swiper-pagination-bullet { background:rgba(255,255,255,.6); opacity:1 }
.hero-swiper .swiper-pagination-bullet-active { background:#fff }
@media (min-width:1024px){
  .hero-swiper{ height:460px }
  .hero-swiper .swiper-slide img{ height:460px; object-fit:cover; width:100% }
}