/* ===========================================================================
   "The Best Hunting Grounds" - home page concessions section.

   Replaces the old "Why Kaiwhai Safaris - what sets us appart?" block.

   Everything is prefixed .kwg- so it cannot collide with the Huntar theme or
   with the .kwp- rules on the Hunting Packages page. Colours and shapes come
   from the Kaiwhai design system: khaki-gold #9F974F, olive #686242, warm grey
   #85847d, cream #F9F7E6, near-black #252323, pill buttons, 10/20px radii.

   The font is deliberately inherited rather than declared, so this picks up
   Farro from the theme and survives a future font change.
   =========================================================================== */

.kwg{
  --kwg-brand: #9F974F;
  --kwg-title: #686242;
  --kwg-body:  #85847d;
  --kwg-cream: #F9F7E6;
  --kwg-dark:  #252323;
  --kwg-line:  #eceade;

  font-family: inherit;
  color: var(--kwg-body);
  /* The bottom padding is not optional. The block this replaced ended in a
     divider widget; without one, the next section's "Our Professional Team"
     heading sits 3px INSIDE this section and the two collide. */
  padding: 110px 0 104px;
}

.kwg *{ box-sizing: border-box; }

.kwg-wrap{
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- heading ------------------------------------------------------------- */

.kwg-head{
  max-width: 780px;
  margin: 0 auto 44px;
  text-align: center;
}

.kwg-eyebrow{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kwg-brand);
}

/* The theme sets h2 to 36px. Stated here as well so the section reads the same
   if it is ever previewed outside the site's own stylesheet. */
.kwg-head h2{
  margin: 0 0 18px;
  font-size: 40px;
  line-height: 1.22;
  font-weight: 700;
  color: var(--kwg-title);
  text-wrap: balance;
}

.kwg-lead{
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
}

/* --- the numbers strip --------------------------------------------------- */

.kwg-stats{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0 0 54px;
  padding: 26px 0;
  background: var(--kwg-cream);
  border-radius: 20px;
  overflow: hidden;
}

.kwg-stat{
  position: relative;
  text-align: center;
  padding: 4px 18px;
}

.kwg-stat + .kwg-stat::before{
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 46px;
  margin-top: -23px;
  background: #e3dfc6;
}

.kwg-stat b{
  display: block;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--kwg-brand);
  font-variant-numeric: tabular-nums;
}

.kwg-stat span{
  display: block;
  margin-top: 7px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kwg-title);
  font-weight: 700;
}

/* --- the concession cards ------------------------------------------------ */

.kwg-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kwg-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.kwg-card:hover,
.kwg-card:focus-within{
  transform: translateY(-5px);
  border-color: #e6e2cd;
  box-shadow: 0 18px 40px rgba(37,35,35,.13);
}

/* photo ------------------------------------------------------------------ */

.kwg-shot{
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--kwg-dark);
  overflow: hidden;
}

.kwg-shot img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}

/* A 16:9 photograph in a 16:10 frame loses about 50px from each side. On the
   elephant that is exactly where the ivory sits, so this one is framed off its
   right-hand side instead of its middle. The whole point of the picture is the
   tusks. */
.kwg-shot--right img{ object-position: 72% center; }

.kwg-card:hover .kwg-shot img{ transform: scale(1.055); }

/* Zambia has no photograph in the library yet. Rather than borrow a picture
   from another country, the panel is drawn - so nothing on the page claims to
   be somewhere it is not. */
.kwg-shot--none{
  background:
    radial-gradient(120% 90% at 22% 12%, #6e6840 0%, rgba(110,104,64,0) 62%),
    linear-gradient(150deg, #4a462c 0%, #2b2a1e 58%, #1d1c16 100%);
}

.kwg-shot--none::after{
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(159,151,79,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,151,79,.16) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: .5;
}

/* the country tag and the acreage sit on the photo */
.kwg-flag{
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--kwg-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.kwg-acres{
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
  padding: 6px 14px;
  border-radius: 9999px;
  background: rgba(20,19,18,.72);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* body ------------------------------------------------------------------- */

.kwg-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 24px 26px;
}

.kwg-body h3{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--kwg-title);
}

.kwg-hook{
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.65;
}

.kwg-facts{
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kwg-line);
}

.kwg-facts li{
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--kwg-line);
  font-size: 14px;
  line-height: 1.55;
}

.kwg-facts dfn{
  flex: 0 0 96px;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kwg-brand);
  padding-top: 3px;
}

.kwg-facts b{ color: var(--kwg-title); font-weight: 700; }

/* species chips */
.kwg-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.kwg-chips li{
  padding: 5px 12px;
  border-radius: 9999px;
  background: var(--kwg-cream);
  color: var(--kwg-title);
  font-size: 12.5px;
  font-weight: 700;
}

/* the link is pushed to the bottom so every card's link lines up */
.kwg-more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--kwg-brand);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, gap .2s ease;
}

.kwg-more:hover,
.kwg-more:focus-visible{
  color: var(--kwg-brand);
  border-bottom-color: var(--kwg-brand);
  gap: 13px;
}

.kwg-more span{ font-size: 17px; line-height: 1; }

/* The whole card is the click target. One link, stretched - not a second
   nested link, which would be unreachable by keyboard and read twice by a
   screen reader. */
.kwg-more::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.kwg-more:focus-visible{ outline: none; }
.kwg-card:focus-within{ outline: 3px solid var(--kwg-brand); outline-offset: 3px; }

/* --- tiger fishing ------------------------------------------------------- */

/* Deliberately not a seventh card. It is not a concession, and giving it the
   same shape as one would say it is. A wide cream band reads as "and also". */
.kwg-fish{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 38px;
  margin: 44px 0 0;
  padding: 26px;
  background: var(--kwg-cream);
  border-radius: 20px;
}

.kwg-fish-shot{
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--kwg-dark);
}

.kwg-fish-shot img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.kwg-fish-body{ padding: 6px 12px 6px 0; }

.kwg-fish-body .kwg-eyebrow{ font-size: 12px; margin-bottom: 9px; }

.kwg-fish-body h3{
  margin: 0 0 12px;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--kwg-title);
}

.kwg-fish-hook{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
}

/* the chips sit on cream here, so they need their own ground to stay visible */
.kwg-fish .kwg-chips li{ background: #fff; }

/* nothing to stretch a link across - this band is not a single click target */
.kwg-fish .kwg-more::after{ content: none; }

/* --- closing enquiry band ------------------------------------------------ */

/* Sunset over the bush rather than a flat black panel. The image is the site's
   own Background-Sunset-2.jpg, already used as a section background elsewhere,
   so it belongs here. The warm olive wash over it is what keeps white text
   readable - the photograph alone is far too bright at the horizon. */
.kwg-cta{
  position: relative;
  margin: 60px 0 0;
  padding: 58px 44px;
  border-radius: 20px;
  overflow: hidden;
  text-align: center;
  background-color: #2f2a1f;
  background-image:
    linear-gradient(rgba(38,34,24,.66), rgba(29,26,19,.84)),
    url("https://kaiwhaisafaris.com/wp-content/uploads/2025/08/Background-Sunset-2.jpg");
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
}

/* a thin gold hairline, the same accent the rest of the section uses */
.kwg-cta::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: 20px;
  border: 1px solid rgba(159,151,79,.34);
  pointer-events: none;
}

.kwg-cta > *{ position: relative; z-index: 1; }

.kwg-cta h3{
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}

.kwg-cta p{
  max-width: 660px;
  margin: 0 auto 30px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.76);
}

.kwg-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 30px;
}

.kwg-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 34px;
  border-radius: 9999px;
  background: var(--kwg-brand);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  transition: background .2s ease, transform .2s ease;
}

.kwg-btn:hover,
.kwg-btn:focus-visible{
  background: #b0a75a;
  color: #fff;
  transform: translateY(-2px);
}

.kwg-call{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  text-decoration: none;
}

.kwg-call small{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kwg-brand);
}

.kwg-call b{
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.kwg-call:hover b,
.kwg-call:focus-visible b{ color: var(--kwg-brand); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1100px){
  .kwg-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px){
  .kwg{ padding: 70px 0 72px; }
  .kwg-head h2{ font-size: 32px; }
  .kwg-stats{ grid-template-columns: repeat(2, 1fr); gap: 26px 1px; padding: 28px 0; }
  .kwg-stat:nth-child(3)::before{ display: none; }
  .kwg-fish{ grid-template-columns: 1fr; gap: 22px; }
  .kwg-fish-body{ padding: 0 4px 6px; }
}

@media (max-width: 640px){
  .kwg{ padding: 56px 0 58px; }
  .kwg-wrap{ padding: 0 18px; }
  .kwg-head{ margin-bottom: 32px; text-align: left; }
  .kwg-head h2{ font-size: 28px; }
  .kwg-lead{ font-size: 16px; }
  .kwg-stats{ margin-bottom: 34px; border-radius: 16px; }
  .kwg-stat b{ font-size: 28px; }
  .kwg-grid{ grid-template-columns: 1fr; gap: 22px; }
  .kwg-body{ padding: 21px 20px 23px; }
  .kwg-facts dfn{ flex-basis: 84px; }
  .kwg-fish{ margin-top: 30px; padding: 16px; border-radius: 16px; gap: 18px; }
  .kwg-fish-body h3{ font-size: 23px; }
  .kwg-fish-hook{ font-size: 15.5px; }
  .kwg-cta{ margin-top: 30px; padding: 40px 22px; border-radius: 16px; }
  .kwg-cta::after{ border-radius: 16px; }
  .kwg-cta h3{ font-size: 24px; }
  .kwg-actions{ flex-direction: column; gap: 22px; }
  .kwg-call{ align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  .kwg-card,
  .kwg-shot img,
  .kwg-btn,
  .kwg-more{ transition: none; }
  .kwg-card:hover{ transform: none; }
  .kwg-card:hover .kwg-shot img{ transform: none; }
}