/*
 * おシゴトログ 個別画面スタイル（Phase 4：既存3画面 — 会社ページ・トップページ・投稿詳細）。
 * 承認済みモックアップ（指示書16.1節 oshigotolog-mobile-concept.html）の見た目に合わせて
 * 新規作成した。base.cssの共通コンポーネント（.bws-grid/.bws-card/.bws-disclaimer等）は
 * そのまま使い、このファイルには各画面固有のコンポーネントだけを置く。
 *
 * 注意（11章：テーマ停止時の安全対策）：ここで新設したクラス名（.bws-badge-industry、
 * .bws-qr-focus、.bws-contact-actions等）は、推奨テーマが無効な場合のプラグイン予備CSS
 * （bios-work-stock-core/assets/css/public.css）には反映していない。Phase 3で
 * head.php/foot.phpの予備表示を意図的に更新しなかったのと同じ方針で、予備表示は
 * 「見た目が古いままでも壊れず使える」ことを優先する（PHPエラーにならない・
 * 本文が読める状態を保つ。見た目の一致は保証しない）。
 */

/* -------------------- 共通：業種バッジ・セクション見出し行 -------------------- */

.bws-badge-industry {
	display: inline-flex;
	align-items: center;
	min-height: 25px;
	padding: 3px 10px;
	margin-bottom: 8px;
	border-radius: 999px;
	background: #e9f7fd;
	color: var(--bws-color-primary-text);
	font-size: 0.78rem;
	font-weight: 800;
	/* v0.35.0：company-page.php・single-work-item.phpでのみ<span>から<a>に変わった
	   （クリックで企業一覧の同業種絞り込みへ）。ブラウザ既定の下線を消し、代わりに
	   hover/focusで下線を出す（.bws-section-line aと同じ考え方。色は既にプライマリ色
	   なので、リンクだと分かるよう下線で操作可能性を示す）。 */
	text-decoration: none;
}
.bws-badge-industry:hover,
.bws-badge-industry:focus-visible {
	text-decoration: underline;
}

/* Phase 5拡張（v0.35.0）：企業一覧の業種絞り込み中の案内行。 */
.bws-list-filter-notice {
	margin: 0 0 16px;
	font-size: 0.82rem;
	color: var(--bws-color-body);
}
.bws-list-filter-notice a {
	margin-left: 8px;
	color: var(--bws-color-primary-text);
	font-weight: 800;
	text-decoration: none;
}
.bws-list-filter-notice a:hover,
.bws-list-filter-notice a:focus-visible {
	text-decoration: underline;
}

.bws-section-line {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	margin: 28px 0 12px;
}
.bws-section-line h2 { margin: 0; font-size: 1.1rem; }
.bws-section-line a {
	flex-shrink: 0;
	color: var(--bws-color-primary-text);
	font-size: 0.78rem;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}
.bws-section-line a:hover { text-decoration: underline; }

/* Phase 5（9章・10章）：投稿一覧・企業一覧の見出しと0件表示。両画面で共通のため、
   画面固有CSS（works.css）ではなく、この共通ファイル側に置く。 */
.bws-list-heading { margin: 0 0 20px; font-size: 1.25rem; color: var(--bws-color-heading); }
.bws-list-empty { padding: 32px 0; text-align: center; color: var(--bws-color-body); }

/* -------------------- 会社ページ（6章） -------------------- */

.bws-company-main { padding-top: 24px; }
.bws-company-logo {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	background: #eceeec;
	margin-bottom: 10px;
}
.bws-company-name { font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.02em; margin: 0 0 8px; }
.bws-company-intro { margin: 0 0 18px; font-size: 0.92rem; line-height: 1.7; color: var(--bws-color-body); }

/* v0.33.4：会社ページの「最近の仕事」カードは、トップページの横スクロール用カードより
   カード自体に余裕があるため、タイトル・メタ情報の文字サイズをbase.cssの共通値（0.7rem）
   より少し大きく戻す（本文抜粋は表示しないため、テンプレート側でrender_card()の
   第2引数をfalseにして省略している）。 */
.bws-company-main .bws-card__title { font-size: 1rem; }
.bws-company-main .bws-card__meta { font-size: 0.8rem; }

/* 6.2節：QRの大きな案内枠。会社ページで最も目立つ操作にするため、青系グラデーションの
   カード＋オレンジ（--bws-color-sub）の大きなボタンにする。 */
.bws-qr-focus {
	overflow: hidden;
	padding: 17px;
	border-radius: 17px;
	background: linear-gradient(135deg, #006e9f 0%, #0078ad 100%);
	color: #ffffff;
	box-shadow: 0 10px 24px rgba(0, 160, 233, 0.22);
}
.bws-qr-focus__top { display: flex; align-items: center; gap: 13px; }
.bws-qr-focus__icon {
	width: 50px;
	height: 50px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: #ffffff;
	color: var(--bws-color-sub-text);
}
.bws-qr-focus__icon svg { width: 30px; height: 30px; }
.bws-qr-focus__copy strong { display: block; font-size: 1rem; color: #ffffff; }
.bws-qr-focus__copy span { display: block; margin-top: 2px; font-size: 0.72rem; color: #e8f8ff; }
/* テーマv1.2.6：ボタン文字色を#111111から#ffffffへ変更（オレンジ背景に対する視認性向上）。 */
.bws-show-qr {
	width: 100%;
	min-height: 47px;
	margin-top: 14px;
	border: 0;
	border-radius: 11px;
	background: var(--bws-color-sub);
	color: #ffffff;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 900;
	cursor: pointer;
	box-shadow: inset 0 -2px 0 rgba(120, 60, 0, 0.13);
}
.bws-show-qr:hover { opacity: 0.92; }

/* 6.2節：QRは重ね画面（オーバーレイ）で表示する。bws-lightboxと同じ「hidden属性で
   非表示・全画面固定」の設計に揃えた。 */
.bws-qr-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 22px;
	background: rgba(0, 25, 38, 0.64);
}
.bws-qr-overlay[hidden] { display: none; }
.bws-qr-dialog {
	width: 100%;
	max-width: 340px;
	padding: 22px;
	border-radius: 20px;
	background: #ffffff;
	text-align: center;
	box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}
.bws-qr-dialog h2 { margin: 0; font-size: 1.3rem; }
.bws-qr-dialog p { margin: 6px 0 15px; font-size: 0.8rem; color: var(--bws-color-body); }
.bws-qr-dialog__code { min-height: 200px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.bws-qr-dialog__code img { width: 100%; max-width: 260px; height: auto; }
.bws-qr-close {
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: 11px;
	background: var(--bws-color-primary);
	color: #ffffff;
	font: inherit;
	font-weight: 900;
	cursor: pointer;
}
.bws-qr-close:hover { opacity: 0.92; }

/* 6.3節：共有ボタン。QRの次に目立つ横幅いっぱいのボタン。Web Share API対応時は
   bws-share-buttonの1つだけ、非対応時はbws-share-mail-button/bws-share-copy-buttonの
   2つが横に並ぶ（company-share.jsがJSでどちらかのhidden属性を切り替える）。 */
.bws-company-share { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.bws-share-action {
	flex: 1 1 auto;
	min-height: 49px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 2px solid var(--bws-color-primary);
	border-radius: 12px;
	background: #ffffff;
	color: var(--bws-color-primary-text);
	font: inherit;
	font-size: 0.88rem;
	font-weight: 900;
	cursor: pointer;
}
.bws-share-action:hover { background: #eef8fc; }
.bws-share-action svg { width: 18px; height: 18px; flex-shrink: 0; }
.bws-share-action[hidden] { display: none; }

/* 6.4節：電話・地図・公式サイトの3ボタン。値が無い項目はPHP側で出力しないため、
   1〜3個どれでも均等幅に並ぶ。 */
.bws-contact-actions {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 12px;
}
.bws-contact-actions__item {
	min-height: 68px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border: 1px solid var(--bws-border);
	border-radius: 12px;
	background: #ffffff;
	color: #52646c;
	font: inherit;
	font-size: 0.68rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.bws-contact-actions__item svg { width: 22px; height: 22px; color: var(--bws-color-primary-text); }

/* 電話する：company-phone.jsがクリック時にこのボタンをbws-phone-reveal-linkへ
   置き換える（誤発信防止のため、タップして初めて番号を表示・発信可能にする既存の仕組み。
   3.3節：判定・保護処理は変更しない）。 */
.bws-phone-reveal-link {
	min-height: 68px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--bws-color-primary);
	border-radius: 12px;
	background: #eef8fc;
	color: var(--bws-color-primary-text);
	font-size: 0.82rem;
	font-weight: 800;
	text-decoration: none;
}

.bws-trial-grace-notice,
.bws-trial-active-notice,
.bws-trial-expired-notice {
	margin-top: 20px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #eef8fc;
	color: var(--bws-color-primary-text);
	font-size: 0.85rem;
	line-height: 1.7;
}

/* -------------------- トップページ（7章） -------------------- */

.bws-hero {
	padding: 26px 20px 24px;
	color: #ffffff;
	background: linear-gradient(145deg, rgba(0, 83, 123, 0.92), rgba(0, 160, 233, 0.76)), linear-gradient(35deg, #577782, #ccd8dc);
}
.bws-hero__eyebrow { display: block; font-size: 0.78rem; font-weight: 700; color: #dff6ff; }
.bws-hero__title { margin: 8px 0 0; color: #ffffff; font-size: 1.5rem; line-height: 1.5; }
.bws-hero__lead { margin: 10px 0 0; color: #effaff; font-size: 0.85rem; line-height: 1.7; }

.bws-home-main { padding-top: 20px; }
/* テーマv1.2.7：font-size/colorはbase.cssの.bws-disclaimer共通ルール（0.8rem）に統一し、
   ここでは配置固有のmargin/borderだけを持たせる。 */
.bws-home-disclaimer {
	margin: 0 0 6px;
	padding-bottom: 14px;
	border-bottom: 1px dashed var(--bws-border);
}

/* 7.2節：トップページの「最近の仕事実績」だけは横スクロールにしてよい
   （.bws-gridの通常時は常に2列固定だが、このページ限定で横スクロール用の
   1行レイアウトへ上書きする）。 */
.bws-grid--scroll {
	display: flex;
	grid-template-columns: none;
	gap: 11px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
/* v0.33.1：ユーザーフィードバックにより「2件と半分」が見える固定比率に変更
   （画面幅で切り替えず、常にこのカード幅にする。gapは上の11pxと合わせて計算）。 */
.bws-grid--scroll .bws-card {
	width: calc((100% - 11px * 2) / 2.5);
	min-width: 0;
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.bws-company-rows { background: #ffffff; border: 1px solid var(--bws-border); border-radius: 13px; overflow: hidden; }
.bws-company-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--bws-border);
	text-decoration: none;
	color: inherit;
}
.bws-company-row:last-child { border-bottom: 0; }
/* v0.35.1：企業一覧（companies-list.php）だけで使う内側リンク。トップページ「掲載企業」
   （front-top.php）は今回変更しておらず、従来どおり<a class="bws-company-row">1つが
   行全体を包む構造のまま（.bws-company-rowの共通ルールはそちらにもそのまま効く）。
   企業一覧側は、業種ラベルも独立してクリックできるようにするため<a>の入れ子ができず、
   行を<div class="bws-company-row">に変え、会社名・業種を2つの<a>に分けた。
   会社名側はflex:1で行の残り幅いっぱいに広がる（クリック領域は業種ラベル以外の行全体）。 */
.bws-company-row__link {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.bws-company-row strong {
	color: var(--bws-ink);
	font-size: 0.9rem;
	font-weight: 700;
	/* Phase 5（10.3節DIR-08「長い会社名 → はみ出さない」）：このstrongには元々
	   min-width指定が無く、flexアイテムの初期値（min-width:auto）のままだと、
	   長い会社名のときにjustify-content:space-betweenの右側（業種ラベル）を
	   押し出して320px幅で横あふれする恐れがあったため、明示的に切り詰める。
	   トップページ「掲載企業」（front-top.php）も同じクラスを使うため、そちらも合わせて安全になる。 */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bws-company-row span,
.bws-company-row__industry {
	flex-shrink: 0;
	color: var(--bws-color-sub-text);
	background: #fff4e4;
	border-radius: 999px;
	padding: 3px 9px;
	font-size: 0.7rem;
	font-weight: 800;
}
/* v0.35.1：企業一覧（companies-list.php）だけ、業種ラベルを<a>にしてクリックで
   同業種の絞り込みへ遷移できるようにした（トップページ「掲載企業」の<span>は変更していない）。
   リンクの既定下線を消し、hover/focusで下線を出す（.bws-badge-industryと同じ考え方）。 */
.bws-company-row__industry {
	text-decoration: none;
}
.bws-company-row__industry:hover,
.bws-company-row__industry:focus-visible {
	text-decoration: underline;
}

/* -------------------- 投稿詳細（8章） -------------------- */

.bws-detail-main { padding-top: 22px; }
.bws-detail-main .bws-badge-industry { display: block; width: fit-content; }
.bws-detail__mypage-link-button {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 7px 12px;
	border: 1px solid var(--bws-color-primary);
	border-radius: 999px;
	background: #ffffff;
	color: var(--bws-color-primary-text);
	font-size: 0.78rem;
	font-weight: 900;
	text-decoration: none;
}
.bws-detail__mypage-link-button:hover { background: #eef8fc; }