/*
 * Home page (components/page-layouts/page-home.html), as in the Home wireframe: Hook, Problem, Solution, Ask.
 *
 * In order: the hero with the hook statistics, the problem with three points, the plans and the Bespoke band,
 * the latest Insights, and the contact band. Each section runs the full width of the window,
 * with its content held to 1200px. The statistics, plan tiles and Insights cards are blocks with their own styles.
 */

/* Shared: the page's colours, serif headings, eyebrows and buttons */

.wpta-page--home {
  --home-cream: #f4f3ee;
  --home-deep: #0d3d39;
  --home-serif: "DM Serif Display", Georgia, "Times New Roman", serif;

  display: block;
  background: var(--white);
  color: var(--text);
}

.wpta-page--home h1,
.wpta-page--home h2,
.wpta-page--home h3 {
  text-transform: none;
}

.home-eyebrow {
  margin: 0;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-heading {
  margin: 0;
  color: var(--home-deep);
  font-family: var(--home-serif);
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 400;
  line-height: 1.15;
}

.home-summary {
  margin: 0;
  color: var(--text-muted);
  font-size: 17px;
  line-height: 1.55;
}

.home-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.home-button .wp-block-button__link {
  display: inline-block;
  padding: 15px 24px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.home-button--primary .wp-block-button__link {
  background: var(--teal-darker);
  color: var(--white);
}

.home-button--primary .wp-block-button__link:hover,
.home-button--primary .wp-block-button__link:focus-visible {
  background: var(--home-deep);
}

.home-button--outline .wp-block-button__link {
  border-color: var(--teal-darker);
  background: transparent;
  color: var(--teal-darker);
}

.home-button--outline .wp-block-button__link:hover,
.home-button--outline .wp-block-button__link:focus-visible {
  background: var(--teal-light);
}

.home-button--light .wp-block-button__link {
  background: var(--teal);
  color: var(--home-deep);
}

.home-button--light .wp-block-button__link:hover,
.home-button--light .wp-block-button__link:focus-visible {
  background: var(--teal-light);
}

.home-button--outline-light .wp-block-button__link {
  border-color: var(--white);
  background: transparent;
  color: var(--white);
}

.home-button--outline-light .wp-block-button__link:hover,
.home-button--outline-light .wp-block-button__link:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

/* Each section runs across the page, with the same side room as the other pages */

.home-hero__inner,
.home-problem__inner,
.home-plans__inner,
.home-insights__inner {
  margin: 0;
  padding: 64px clamp(24px, 5vw, 64px);
}

/* Hero: the tagline and buttons on the left, the hook statistics on the right */

.home-hero {
  background: var(--home-cream);
}

.home-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.home-hero__content {
  display: flex;
  flex: 1 1 520px;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.home-hero__heading {
  margin: 0;
  color: var(--home-deep);
  font-family: var(--home-serif);
  font-size: clamp(2.5rem, 5.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
}

.home-hero__summary {
  max-width: 540px;
  margin: 0;
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1.55;
}

/* No ">" here: WordPress puts a wrapper between the group and the card in a classic theme. */

.home-hero__inner .hook-stats {
  flex: 1 1 380px;
  min-width: 0;
}

/* Problem: the photo beside the heading, then three points with icons */

.home-problem__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.home-problem__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 48px;
}

.home-problem__image {
  flex: 1 1 440px;
  min-width: 0;
  height: 340px;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--teal-pale);
}

.home-problem__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-problem__text {
  display: flex;
  flex: 1 1 480px;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.home-problem__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Each point: an icon on the left, drawn from a line icon so it takes the theme's teal */

.home-problem__point {
  position: relative;
  padding: 24px 24px 24px 68px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--teal-pale);
}

.home-problem__point::before {
  position: absolute;
  top: 24px;
  left: 24px;
  width: 28px;
  height: 28px;
  background: var(--teal-darker);
  content: "";
  -webkit-mask: var(--home-icon) center / contain no-repeat;
  mask: var(--home-icon) center / contain no-repeat;
}

.home-problem__point--calendar {
  --home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
}

.home-problem__point--document {
  --home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

.home-problem__point--clock {
  --home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.home-problem__point h3 {
  margin: 0 0 6px;
  color: var(--home-deep);
  font-size: 18px;
}

.home-problem__point p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Plans: the introduction and the plan tiles, on pale teal */

.home-plans {
  background: var(--teal-pale);
}

.home-plans__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.home-plans__intro {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.home-insights__all a {
  color: var(--teal-darker);
  font-weight: 600;
}

/* Bespoke band: full width on the darkest teal, under the plans */

.home-bespoke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 18px clamp(24px, 5vw, 64px);
  border-top: 4px solid var(--teal);
  background: var(--home-deep);
  color: var(--white);
}

.home-bespoke__text,
.home-bespoke__link {
  margin: 0;
  font-size: 15px;
}

.home-bespoke__text {
  color: var(--teal-light);
}

.home-bespoke__text strong {
  margin-right: 12px;
  color: var(--white);
  font-family: var(--home-serif);
  font-size: 22px;
  font-weight: 400;
}

.home-bespoke__link a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.home-bespoke__link a:hover,
.home-bespoke__link a:focus-visible {
  text-decoration: underline;
}

/* Latest Insights: hidden whole when there are no articles, so the heading never stands alone */

.home-insights:not(:has(.insights-teaser)) {
  display: none;
}

.home-insights__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 56px;
  padding-bottom: 56px;
}

.home-insights__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.home-insights__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-insights__all {
  margin: 0;
}

/* Contact band: the photo beside the call to book, on deep teal */

.home-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--teal-darker);
  color: var(--white);
}

.home-contact__image {
  flex: 1 1 480px;
  min-width: 0;
  min-height: 380px;
  margin: 0;
  background: var(--teal-dark);
}

.home-contact__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-contact__content {
  display: flex;
  flex: 1 1 560px;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  min-width: 0;
  padding: 56px;
}

.home-contact__heading {
  margin: 0;
  color: var(--white);
  font-family: var(--home-serif);
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
}

.home-contact__summary {
  margin: -12px 0 0;
  color: var(--teal-light);
  font-size: 17px;
  line-height: 1.55;
}

/* Tablets: the problem points one above another, so their words have room */

@media (max-width: 899px) {
  .home-problem__points {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones */

@media (max-width: 700px) {
  .home-hero__inner,
  .home-problem__inner,
  .home-plans__inner,
  .home-insights__inner {
    padding: 44px 16px;
  }

  .home-hero__inner {
    gap: 32px;
  }

  .home-problem__image {
    height: 240px;
  }

  .home-bespoke {
    padding: 18px 16px;
  }

  .home-contact__image {
    min-height: 260px;
  }

  .home-contact__content {
    padding: 40px 16px;
  }
}

/*
 * Large screens: the wireframe is drawn for laptop widths, so on bigger monitors the whole page is drawn larger,
 * keeping its proportions instead of stretching thin. The same steps as the other pages.
 */

@media (min-width: 1800px) {
  .front-page {
    zoom: 1.2;
  }
}

@media (min-width: 2400px) {
  .front-page {
    zoom: 1.5;
  }
}

@media (min-width: 3400px) {
  .front-page {
    zoom: 2;
  }
}