/*
 * Free tools: the home page tiles ([vd_tools_strip]) and the "Explore Vedic Wisdom"
 * directory page ([vd_free_tools]); see class-vt-tools.php. Brand colours as in
 * content-polish.css: orange #ff7e00, deep orange #b33a00, cream #fff7ec.
 */

/* ---- Home page tiles --------------------------------------------------- */
.vd-tools { max-width: 1200px; margin: 0 auto; padding: 36px 20px 12px; font-family: 'Work Sans', sans-serif; box-sizing: border-box; }
.vd-tools__head { text-align: center; margin: 0 0 22px; }
.vd-tools__head h2 { font-family: 'Philosopher', sans-serif; color: #b33a00; font-size: 32px; line-height: 1.2; margin: 0 0 8px; }
.vd-tools__head p { color: #4a3b32; font-size: 16px; line-height: 1.5; margin: 0 auto; max-width: 640px; }
.vd-tools__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vd-tools__grid > li { margin: 0; padding: 0; }
.vd-tile { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 18px 16px; background: #fff; border: 1px solid #f0d9bd; border-radius: 12px; box-shadow: 0 2px 8px rgba(120, 60, 0, .07); color: #3a2f29; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.vd-tile:hover, .vd-tile:focus-visible { border-color: #ff7e00; box-shadow: 0 6px 16px rgba(120, 60, 0, .15); transform: translateY(-2px); color: #3a2f29; }
.vd-tile:focus-visible { outline: 3px solid #1a5fb4; outline-offset: 2px; }
.vd-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 12px; border-radius: 50%; background: #fff3e6; color: #ff7e00; font-size: 19px; }
.vd-tile__title { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 700; line-height: 1.3; color: #2b211c; }
.vd-tile__desc { display: block; font-size: 14px; line-height: 1.45; color: #5a4a40; }

@media (max-width: 767px) {
	.vd-tools { padding: 26px 14px 8px; }
	.vd-tools__head h2 { font-size: 26px; }
	.vd-tools__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.vd-tile { padding: 14px 12px; }
	.vd-tile__icon { width: 38px; height: 38px; font-size: 16px; margin-bottom: 8px; }
	.vd-tile__title { font-size: 15px; }
	.vd-tile__desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.vd-tile { transition: none; }
	.vd-tile:hover, .vd-tile:focus-visible { transform: none; }
}

/* ---- Directory page (inside the guide-page reading layout) ------------- */
#vd-jyotish-panchang-content .vd-dir__intro { margin: 0 0 14px; color: #5a4a40; }
#vd-jyotish-panchang-content .vd-dir__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#vd-jyotish-panchang-content .vd-dir__item { margin: 0; padding: 14px 16px; background: #fff; border: 1px solid #f0d9bd; border-radius: 10px; line-height: 1.5; }
#vd-jyotish-panchang-content .vd-dir__item p { margin: 0 0 6px; }
#vd-jyotish-panchang-content .vd-dir__item p:last-child { margin-bottom: 0; }
#vd-jyotish-panchang-content .vd-dir__name { font-size: 18px; font-weight: 700; line-height: 1.3; }
#vd-jyotish-panchang-content .vd-dir__name a { color: #b33a00; text-decoration: none; }
#vd-jyotish-panchang-content .vd-dir__name a:hover { text-decoration: underline; }
#vd-jyotish-panchang-content .vd-dir__desc { font-size: 15px; color: #3a2f29; }
#vd-jyotish-panchang-content .vd-dir__meta { font-size: 14px; color: #6b5a50; }
#vd-jyotish-panchang-content .vd-dir__type { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle; }
#vd-jyotish-panchang-content .vd-dir__type--tool { background: #fff3e6; color: #8a3a00; }
#vd-jyotish-panchang-content .vd-dir__type--guide { background: #eaf1fb; color: #1f4d8f; }
#vd-jyotish-panchang-content .vd-dir__type--hub { background: #edf6ed; color: #2d5a2d; }
#vd-jyotish-panchang-content .vd-dir__type--service { background: #f3eefb; color: #5b3a8a; }

@media (max-width: 640px) {
	#vd-jyotish-panchang-content .vd-dir__list { grid-template-columns: minmax(0, 1fr); }
}