/* ============================================================
   Medicaputare — homepage presentation layer
   Loaded only by index.hbs. The theme's own style.css stays
   untouched; this replaces the Tailwind Play CDN the previous
   hand-written root-files/index.html depended on.
   Palette: gold headings (--gold), crimson accent (--crimson).
   ============================================================ */

:root {
   --gold: #c9a227;
   --gold-dark: #a8851c;
   --crimson: #cc2b54;
   --ink: #1f2328;
   --muted: #55606b;
   --line: #e6e8eb;
   --bg-alt: #f6f7f8;
   --radius: 12px;
   --wrap: 1180px;
}

.home {
   color: var(--ink);
   font-size: 1rem;
   line-height: 1.65;
}

.home__wrap {
   max-width: var(--wrap);
   margin: 0 auto;
   padding: 0 1.25rem;
}

.home__section {
   padding: 3.5rem 0;
}

.home__section--alt {
   background: var(--bg-alt);
}

.home__title {
   font-family: inherit;
   font-size: 1.9rem;
   line-height: 1.2;
   color: var(--gold);
   margin: 0 0 1.25rem;
   text-align: center;
}

.home__subtitle {
   color: var(--muted);
   text-align: center;
   max-width: 46rem;
   margin: 0 auto 2.25rem;
}

/* ---------- hero ---------- */
.home-hero {
   position: relative;
   color: #fff;
   text-align: center;
   padding: 5rem 1.25rem 4.5rem;
   background: #0d1117 url("/assets/images/technology-integrated-everyday-life-small-1920x1384.webp") center/cover no-repeat;
}

.home-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(8, 12, 20, .82), rgba(8, 12, 20, .68));
}

.home-hero__inner {
   position: relative;
   max-width: 46rem;
   margin: 0 auto;
}

.home-hero__logo {
   display: block;
   width: 190px;
   margin: 0 auto 1.5rem;
   filter: brightness(0) invert(1);
   opacity: .95;
}

.home-hero__headline {
   font-size: 2.4rem;
   line-height: 1.15;
   margin: 0 0 1.75rem;
   color: #fff;
   font-weight: 700;
}

.home-hero__headline em {
   font-style: normal;
   color: var(--gold);
}

.home__actions {
   display: flex;
   gap: .85rem;
   justify-content: center;
   flex-wrap: wrap;
}

.home__btn {
   display: inline-block;
   padding: .8rem 1.6rem;
   border-radius: 999px;
   font-weight: 600;
   text-decoration: none;
   transition: transform .12s ease, background .15s ease, color .15s ease;
}

.home__btn--gold {
   background: var(--gold);
   color: #1a1408;
}

.home__btn--gold:hover {
   background: var(--gold-dark);
   color: #fff;
   transform: translateY(-1px);
}

/* The base rule sets color:#1a1408 to contrast against the light gold. On hover the
   background darkens to --gold-dark, and that inherited near-black ends up on the
   wrong side of the contrast — it reads as black text on a gold button. White on
   hover is the Director's ruling, applied to every gold-filled button. */

.home__btn--ghost {
   border: 1.5px solid rgba(255, 255, 255, .75);
   color: #fff;
}

.home__btn--ghost:hover {
   background: rgba(255, 255, 255, .12);
}

/* ---------- two-column blocks ---------- */
.home-cols {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 2.5rem;
   align-items: center;
}

.home-cols--flip .home-cols__media {
   order: -1;
}

.home-cols__media img {
   width: 100%;
   height: auto;
   border-radius: var(--radius);
   display: block;
}

.home-cols h2 {
   color: var(--gold);
   font-size: 1.75rem;
   margin: 0 0 1rem;
}

.home-cols h3 {
   color: var(--gold);
   font-size: 1.25rem;
   margin: 1.5rem 0 .6rem;
}

.home-cols p {
   margin: 0 0 1rem;
   color: var(--muted);
}

/* ---------- pillar cards ---------- */
.home-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
}

.home-card {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 1.5rem;
   box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
   display: flex;
   flex-direction: column;
}

.home-card img {
   width: 100%;
   height: 150px;
   object-fit: cover;
   border-radius: 8px;
   margin-bottom: 1rem;
}

.home-card h3 {
   color: var(--gold);
   font-size: 1.15rem;
   margin: 0 0 .5rem;
   /* Fixed height for up to three title lines, so image, date and preview text start
      on the same baseline whether the title runs to one line or three. */
   min-height: 4.05em;
   line-height: 1.35;
}

.home-card p {
   color: var(--muted);
   margin: 0 0 .75rem;
}

.home-card ul {
   margin: 0;
   padding-left: 1.1rem;
   color: var(--muted);
}

.home-card li {
   margin-bottom: .35rem;
}

/* ---------- insights (generated) ---------- */
.home-insights .home-card {
   min-height: 100%;
}

.home-insights .home-card h3 a {
   color: var(--gold);
   text-decoration: none;
}

.home-insights .home-card h3 a:hover {
   text-decoration: underline;
}

.home-card__excerpt p {
   margin: 0 0 .9rem;
}

.home-card__updated {
   font-size: .82rem;
   color: #7b8794;
   margin: .1rem 0 .9rem;
}

.home-card__more {
   margin-top: auto;
   color: var(--gold);
   font-weight: 600;
   text-decoration: none;
}

.home-card__more:hover {
   text-decoration: underline;
}

.home-insights__all {
   text-align: center;
   margin-top: 2rem;
}

/* ---------- partner bullets ---------- */
.home-bullets {
   list-style: none;
   margin: 1.25rem 0 0;
   padding: 0;
   display: grid;
   gap: .9rem;
}

.home-bullets li {
   background: #fff;
   border: 1px solid var(--line);
   border-left: 3px solid var(--gold);
   border-radius: 8px;
   padding: .9rem 1rem;
   color: var(--muted);
}

.home-bullets strong {
   color: var(--ink);
}

/* ---------- contact ---------- */
.home-contact {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2.5rem;
   align-items: start;
}

.home-contact img {
   width: 100%;
   border-radius: var(--radius);
   display: block;
   margin-bottom: 1rem;
}

.home-contact h3 {
   color: var(--gold);
   font-size: 1.2rem;
   margin: 0 0 .5rem;
}

@media (max-width: 900px) {
   .home-grid,
   .home-cols,
   .home-contact {
      grid-template-columns: 1fr;
   }

   .home-cols--flip .home-cols__media {
      order: 0;
   }

   .home-hero__headline {
      font-size: 1.85rem;
   }
}

/* Insight cards: fixed media block so cards align whether or not a post has an image */
.home-card__media {
   height: 120px;
   border-radius: 8px;
   background: linear-gradient(135deg, #eef1f3, #e3e8ec);
   margin-bottom: 1rem;
   overflow: hidden;
}

.home-card__media img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   margin: 0;
   border-radius: 0;
}

/* Clamp excerpts so seven posts of different lengths produce even cards */
.home-card__excerpt {
   display: -webkit-box;
   -webkit-line-clamp: 6;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* The homepage shows the three newest; "View All Insights" carries the rest */
.home-insights .home-grid > .home-card:nth-child(n + 4) {
   display: none;
}

@media (min-width: 901px) {
   .home-insights .home-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* ------------------------------------------------------------
   Contact form — markup and JS contract are the site's own
   (#contactForm, #sendMessageBtn, #captchaStatus, onSubmit).
   ------------------------------------------------------------ */
.home-form label {
   display: block;
   font-weight: 700;
   font-size: 0.85rem;
   color: #374151;
   margin-bottom: 0.5rem;
}

.home-form input[type="text"],
.home-form input[type="email"],
.home-form textarea {
   width: 100%;
   padding: 0.75rem 1rem;
   border: 1px solid #d1d5db;
   border-radius: 8px;
   background: #fff;
   color: #1f2937;
   font: inherit;
   line-height: 1.4;
   margin-bottom: 0.4rem;
}

.home-form input:focus,
.home-form textarea:focus {
   outline: none;
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.18);
}

.home-form .home-field {
   margin-bottom: 1.25rem;
}

.home-form .home-field__error {
   display: none;
   color: #c62828;
   font-size: 0.8rem;
}

.home-form .home-field__error.is-visible {
   display: block;
}

.home-form .sendmessage-btn {
   width: 100%;
   padding: 0.8rem 1.5rem;
   border: 0;
   border-radius: 999px;
   background: var(--gold);
   color: #fff;
   font-weight: 700;
   font-size: 0.95rem;
   cursor: pointer;
   transition: filter 0.15s ease;
}

.home-form .sendmessage-btn:hover {
   filter: brightness(1.06);
}

.home-form__note {
   font-size: 0.78rem;
   color: #6b7280;
   margin-top: 1.25rem;
}

.home-form__note a {
   color: var(--gold);
   text-decoration: underline;
}

.home-form__direct {
   text-align: center;
   color: #6b7280;
   margin-top: 1.75rem;
}

.home-form__direct a {
   color: var(--gold);
   text-decoration: underline;
}

#captchaStatus {
   display: block;
   font-size: 0.85rem;
   margin-top: 0.6rem;
}