/*
    Theme Name: nagoya-sokei
    Theme URI: https://nagoya-sokei.com/
    Description: SWELLの子テーマ（名古屋鼠径ヘルニア情報サイト用）
    Author: grill
    Author URI: https://grill.co.jp/
    Template: swell
    Version: 1.0.0
    Text Domain: nagoya-sokei
*/

/* このファイルより下に子テーマ独自のCSSを追記してください */

/* MVスライドの白文字が明るい背景で読みにくい問題の対策（2026-08-13） */
.p-mainVisual__textLayer {
	background: radial-gradient(ellipse 60% 130% at 50% 50%, rgba(58, 44, 26, 0.42) 0%, rgba(58, 44, 26, 0.28) 55%, rgba(58, 44, 26, 0) 100%);
	padding: 2.5em 4em;
}
.p-mainVisual__slideTitle,
.p-mainVisual__slideText {
	text-shadow: 0 1px 4px rgba(45, 34, 20, 0.75), 0 2px 20px rgba(45, 34, 20, 0.55);
}

/* スマホ表示の崩れ修正（2026-08-13） */
/* ── MVテキスト層: width:100%+paddingで横溢れ・タイトルが画面幅を超えていた ── */
.p-mainVisual__textLayer {
	box-sizing: border-box !important;
}
@media (max-width: 959px) {
	.p-mainVisual__textLayer {
		padding: 1.4em 1.1em !important;
	}
	.p-mainVisual__slideTitle {
		font-size: clamp(17px, 4.6vw, 23px) !important;
		line-height: 1.4 !important;
	}
	/* サブコピー: break-allで「わかりやす／く」と単語途中改行していた→禁則で自然折返し */
	.p-mainVisual__slideText {
		font-size: clamp(11px, 3.1vw, 15px) !important;
		line-height: 1.6 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		line-break: strict;
	}
	/* ヘッダーのサイト名がはみ出て検索アイコンが隠れていた */
	.l-header__logo {
		min-width: 0 !important;
		overflow: hidden;
	}
	.c-headLogo,
	.c-headLogo__link {
		max-width: 100%;
	}
	.c-headLogo__link {
		font-size: clamp(13px, 3.9vw, 18px) !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ── 2段目 記事カルーセル: 1画面の枚数をレンジ別に固定して1枚を広く・見出しを読めるように ── */
/* SWELLのswiperはスライド幅(CSS)で表示枚数が決まる。!importantでキャッシュ由来の旧設定(5枚)も上書き */
/* スマホ(〜599px): 1枚を大きく＋隣が少し覗くpeek。見出しが切れず何の記事か分かる */
@media (max-width: 599px) {
	.p-postSlider .p-postList__item {
		width: 56% !important;
	}
	.p-postSlider .p-postList__title {
		font-size: 13px !important;
		line-height: 1.5 !important;
		max-height: 4.5em !important;
	}
	.p-postSlider .p-postList__times,
	.p-postSlider .c-postThumb__cat {
		font-size: 11px !important;
	}
}
/* タブレット(600〜959px): 3枚 */
@media (min-width: 600px) and (max-width: 959px) {
	.p-postSlider .p-postList__item {
		width: 33.333% !important;
	}
	.p-postSlider .p-postList__title {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
}
/* PC(960px〜): 5枚→3枚に減らして横幅を広げる */
@media (min-width: 960px) {
	.p-postSlider .p-postList__item {
		width: 33.333% !important;
	}
	.p-postSlider .p-postList__title {
		font-size: 16px !important;
	}
}

/* ── 2026-08-14 スマホ全機種対応の追補（360〜430px想定・Pixel/iPhone差の解消） ── */
/* ① MVタイトルが「情報サ／イト」と語中で折返す → 文字サイズを狭幅で1段落とし、禁則+balanceで自然な位置に折る */
@media (max-width: 959px) {
	.p-mainVisual__slideTitle {
		font-size: clamp(15px, 4.1vw, 22px) !important;
		line-height: 1.45 !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
		line-break: strict;
		text-wrap: balance;
	}
	.p-mainVisual__slideText {
		text-wrap: pretty;
	}
}

/* ② 記事カードの見出しが3行目の途中で上下に切れる → max-height方式をやめline-clampで行単位に揃える */
.p-postSlider .p-postList__title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden !important;
	max-height: none !important;
	text-overflow: ellipsis;
	word-break: normal;
	line-break: strict;
}

/* ③ カルーセルのpeek: スマホは1枚を大きく（左右の覗きを細く均等に） */
@media (max-width: 599px) {
	.p-postSlider .p-postList__item {
		width: 84% !important;
	}
	.p-postSlider .p-postList__title {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}
}