/* ================================================================
   news-detail.css — ニュース詳細ページ専用
   source: docs/newsの詳細(single)画面参考/assets/css/style.css :845-1339
   scope: .srn-details / .srn-lightbox
   参考テーマ (静岡RN理研会) のスタイル体系を hama-ortho.jp に移植。
   icons は inline SVG (data URI) で自己完結、assets 追加不要。
================================================================ */

/* ── ラッパー ── */
.srn-details {
	display: block;
	color: #363636;
	font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}

/* ── パンくずリスト ── */
.srn-details .details-breadcrumb {
	background: #f8f8f8;
	border-bottom: 1px solid rgba(54, 54, 54, .1);
}
.srn-details .breadcrumb-inner {
	display: flex;
	align-items: center;
	gap: 4px;
	max-width: 968px;
	margin: 0 auto;
	padding: 10px 24px;
	overflow: hidden;
}
.srn-details .breadcrumb-item {
	font-weight: 300;
	font-size: 13px;
	color: #363636;
	white-space: nowrap;
}
.srn-details .breadcrumb-home {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.srn-details .breadcrumb-link {
	color: #3399CC;
	flex-shrink: 0;
	text-decoration: none;
}
.srn-details .breadcrumb-link:hover { opacity: .75; }
.srn-details .breadcrumb-sep {
	font-size: 11px;
	color: #bbb;
	flex-shrink: 0;
	margin: 0 4px;
}
.srn-details .breadcrumb-current {
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* ── メインコンテンツ ── */
.srn-details .details-main {
	background: #fff;
	padding: 48px 24px 80px;
}
.srn-details .details-inner {
	max-width: 920px;
	margin: 0 auto;
}

/* ── 記事ヘッダー ── */
.srn-details .article-header { margin-bottom: 36px; }
.srn-details .article-title {
	font-weight: 500;
	font-size: 26px;
	color: #363636;
	line-height: 1.6;
	letter-spacing: 0.04em;
	margin: 0 0 16px 0;
}
.srn-details .article-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 14px;
}
.srn-details .article-date {
	font-weight: 300;
	font-size: 15px;
	color: #363636;
}
.srn-details .article-tag {
	display: inline-block;
	background: #FF9966;
	font-weight: 300;
	font-size: 13px;
	color: #363636;
	padding: 4px 12px;
	border-radius: 3px;
}
.srn-details .article-divider {
	border: none;
	border-top: 1px solid rgba(54, 54, 54, .2);
	margin: 0;
}

/* ── 本文 ── */
.srn-details .article-body { margin-bottom: 48px; }
.srn-details .article-section {
	padding: 32px 0;
	border-bottom: 1px solid rgba(54, 54, 54, .08);
}
.srn-details .article-section:first-child { padding-top: 24px; }
.srn-details .article-section:last-child { border-bottom: none; }

.srn-details .article-text {
	font-weight: 300;
	font-size: 16px;
	color: #363636;
	line-height: 1.9;
	letter-spacing: 0.03em;
	margin-bottom: 20px;
}
.srn-details .article-text p { margin: 0 0 1em; }
.srn-details .article-text p:last-child { margin-bottom: 0; }
.srn-details .article-text a { color: #006FBD; }
.srn-details .article-text img { max-width: 100%; height: auto; }

/* ── URL リンク (外部リンク) ── */
.srn-details .article-links { margin: 16px 0; }
.srn-details .article-url-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 300;
	font-size: 15px;
	color: #006FBD;
	text-decoration: underline;
	line-height: 1.5;
	margin-right: 16px;
	margin-bottom: 8px;
}
.srn-details .article-url-link:hover { opacity: .75; }
.srn-details .url-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006FBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── ファイル添付 (PDF・Word) ── */
.srn-details .article-files {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 16px 0 20px;
}
.srn-details .article-file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 300;
	font-size: 16px;
	color: #006FBD;
	padding: 8px 16px 8px 12px;
	border: 1px solid rgba(54, 54, 54, .18);
	border-radius: 4px;
	background: #fff;
	text-decoration: none;
	transition: background .2s;
}
.srn-details .article-file:hover { background: #f5f5f5; opacity: 1; }
.srn-details .file-icon {
	display: inline-block;
	width: 24px;
	height: 28px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.srn-details .file-icon--pdf {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M4 2h11l5 5v17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='%23fff' stroke='%23D93025' stroke-width='1.5'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='%23D93025' stroke-width='1.5'/%3E%3Ctext x='12' y='21' text-anchor='middle' font-family='Arial, sans-serif' font-size='6' font-weight='700' fill='%23D93025'%3EPDF%3C/text%3E%3C/svg%3E");
}
.srn-details .file-icon--word {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 24 28' fill='none'%3E%3Cpath d='M4 2h11l5 5v17a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z' fill='%23fff' stroke='%232B579A' stroke-width='1.5'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='%232B579A' stroke-width='1.5'/%3E%3Ctext x='12' y='21' text-anchor='middle' font-family='Arial, sans-serif' font-size='6' font-weight='700' fill='%232B579A'%3EDOC%3C/text%3E%3C/svg%3E");
}

/* ── 写真1枚: テキスト左 + 写真右 ── */
.srn-details .section-with-photo {
	display: flex;
	gap: 28px;
	align-items: flex-start;
}
.srn-details .section-text { flex: 1; min-width: 0; }
.srn-details .section-with-photo > .article-photo {
	width: 36%;
	flex-shrink: 0;
}
.srn-details .section-with-photo > .article-photo img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ── 写真グリッド (2枚・3枚) ── */
.srn-details .article-photos {
	display: grid;
	gap: 14px;
	margin-top: 20px;
}
.srn-details .photos-2 { grid-template-columns: repeat(2, 1fr); }
.srn-details .photos-3 { grid-template-columns: repeat(3, 1fr); }

/* ── 写真共通 ── */
.srn-details .article-photo {
	position: relative;
	margin: 0;
	line-height: 0;
	overflow: hidden;
	border-radius: 3px;
	cursor: zoom-in;
}
.srn-details .article-photo img {
	width: 100%;
	display: block;
	object-fit: cover;
	transition: transform .3s ease;
}
.srn-details .article-photo:hover img { transform: scale(1.03); }
.srn-details .article-photos .article-photo img {
	aspect-ratio: 4 / 3;
	height: auto;
}

/* ── 拡大ボタン ── */
.srn-details .photo-zoom-btn {
	position: absolute;
	bottom: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	background: rgba(0, 0, 0, .45);
	border: none;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: background .2s;
	z-index: 1;
}
.srn-details .photo-zoom-btn:hover { background: rgba(0, 0, 0, .65); }
.srn-details .zoom-icon {
	display: block;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Ccircle cx='5.5' cy='5.5' r='4' stroke='white' stroke-width='1.4'/%3E%3Cline x1='8.5' y1='8.5' x2='13' y2='13' stroke='white' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── 前後記事ナビ ── */
.srn-details .paging {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(54, 54, 54, .12);
}
.srn-details .paging-prev,
.srn-details .paging-next {
	flex: 1;
	min-width: 0;
}
.srn-details .paging-next { text-align: right; }
.srn-details .paging a {
	display: inline;
	font-size: 13px;
	font-weight: 500;
	color: #3399CC;
	line-height: 1.7;
	text-decoration: none;
	transition: opacity .2s;
}
.srn-details .paging a:hover { opacity: .65; }

/* ── 一覧に戻るボタン ── */
.srn-details .article-back {
	text-align: center;
	padding-top: 40px;
	margin-top: 24px;
	border-top: 1px solid rgba(54, 54, 54, .1);
}
.srn-details .btn-back-list {
	display: inline-block;
	font-weight: 500;
	font-size: 15px;
	color: #fff;
	background: #3399CC;
	padding: 13px 44px;
	border-radius: 4px;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background .2s;
}
.srn-details .btn-back-list:hover { background: #2277AA; opacity: 1; }

/* ================================================================
   LIGHTBOX — .srn-lightbox (position:fixed のためスコープ外)
================================================================ */
.srn-lightbox {
	display: flex;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .88);
	z-index: 9999;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.srn-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}
.srn-lightbox-img {
	max-width: 92vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	border-radius: 3px;
	transform: scale(.94);
	transition: transform .25s ease;
	pointer-events: none;
	user-select: none;
}
.srn-lightbox.is-open .srn-lightbox-img { transform: scale(1); }
.srn-lightbox-close {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s;
	padding: 0;
	font-family: sans-serif;
}
.srn-lightbox-close:hover { background: rgba(255, 255, 255, .3); }

/* ================================================================
   RESPONSIVE
================================================================ */
@media screen and (max-width: 768px) {
	.srn-details .details-main { padding: 28px 16px 60px; }
	.srn-details .article-title { font-size: 20px; letter-spacing: 0.02em; }
	.srn-details .article-section { padding: 24px 0; }
	.srn-details .section-with-photo { flex-direction: column; }
	.srn-details .section-with-photo > .article-photo { width: 100%; }
	.srn-details .photos-3 { grid-template-columns: repeat(2, 1fr); }
	.srn-details .photos-2 { grid-template-columns: 1fr; }
	.srn-details .article-files { flex-direction: column; }
	.srn-details .btn-back-list { padding: 12px 32px; }
	.srn-details .paging { flex-direction: column; gap: 12px; }
	.srn-details .paging-next { text-align: left; }
}

@media screen and (max-width: 480px) {
	.srn-details .photos-3 { grid-template-columns: 1fr; }
}