/* =============================================================================
 * TASK-013 — home-page card redesign
 * Branch: feature/task-013-card-redesign
 *
 * Scope: ONLY the four captured card sections (#kegiatan, #destinasi,
 * #penginapan, #camping). Every selector starts with
 * :is(#kegiatan, #destinasi, #penginapan, #camping), so no other Divi section
 * on the page can be affected. Markup, module order, text, prices, units, CTA
 * labels and CTA destinations are untouched.
 *
 * Cascade: the styles that paint the captured cards live in pos-17.css /
 * pos-18.css, injected as <link> tags at the END of the body markup
 * (body.html line 196), i.e. they load AFTER the <head> stylesheets and use
 * single-class selectors (.et_pb_column_4, .et_pb_text_1, .et_pb_code_0, ...).
 * This file therefore wins on SPECIFICITY, not on load order: :is() with the
 * section IDs adds one ID (1,0,0) on top of the class selectors.
 *
 * !important is used only where the captured rules use !important (specificity
 * alone cannot win) or where an inline style must be beaten — each case is
 * marked "IMPORTANT ESCAPE" below and is narrowly scoped to the four IDs:
 *   a) pos-17 ".et_pb_text_1..34 { padding-top/padding-left !important }"
 *   b) pos-17 ".et_pb_text_2..35 { padding-left/right:10% !important }"
 *   c) pos-17 ".et_pb_button_0..14_wrapper { margin-left/bottom:5% !important }"
 *   d) markup inline style="color:#ff6d2f" on the price <span>
 * ========================================================================== */

/* Design tokens. Pine green #2F6B4F is the single primary card accent; the
 * captured orange #FF6D2F is removed from card pricing and is no longer used
 * in these sections (the captured metadata icons had no colour of their own). */
:is(#kegiatan, #destinasi, #penginapan, #camping) {
  --card-pine: #2f6b4f;
  --card-pine-dark: #24543d;
  --card-body: #5a665f;
  --card-muted: #7b8a81;
  --card-border: #e4eae6;
  --card-rule: #e7ede9;
  --card-pad: 20px;
  --card-font: "Source Sans 3", Poppins, Helvetica, Arial, Lucida, sans-serif;
}

/* 1. Card surface: the Divi column becomes the card (radius + border + soft
 * shadow); the captured per-module white boxes are flattened further down. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column.et_pb_column_1_3 {
  background-color: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;                 /* also clips the image to the radius */
  padding-bottom: 0;                /* captured padding-bottom:2% */
  box-shadow: 0 1px 2px rgba(23, 33, 28, 0.04), 0 18px 32px -26px rgba(23, 33, 28, 0.45);
  font-family: var(--card-font);
  color: var(--card-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column.et_pb_column_1_3:hover {
  border-color: #d3ded7;
  box-shadow: 0 1px 2px rgba(23, 33, 28, 0.05), 0 22px 38px -24px rgba(23, 33, 28, 0.5);
}

/* 2. Image treatment: full-bleed 8:5 crop, consistent across all twelve cards
 * while the imagery stays prominent. Beats the captured class-only
 * ".et_pb_image_N .et_pb_image_wrap img { width:auto }" in the 980/767 media
 * queries (0,3,1) because this is (1,2,1). */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_image {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_image .et_pb_image_wrap {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 0;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_image .et_pb_image_wrap img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* 3. Category / capacity badge: captured "floating box" (.et_pb_code_0/_6/_12/
 * _18 with white bg + shadow) becomes an inline pine metadata line.
 * ".et_pb_image + .et_pb_code" is the badge module of every card. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_image + .et_pb_code {
  width: 100%;
  max-width: none;                  /* captured max-width:90% */
  margin: 0;
  padding: 16px var(--card-pad) 0;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  font-family: var(--card-font) !important;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--card-pine);
  text-align: left;
}

/* The captured .kurungtengah/.kurungkiri/.segaris/.kata helpers are 0px-high
 * flex boxes with line-height:0 (pos-08..pos-15, loaded/ swapped per viewport).
 * Neutralised so the metadata rows stay readable at every width. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code .kurungtengah,
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code .kurungkiri {
  display: block;
  height: auto;
  padding: 0;
  text-align: left;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code .segaris,
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code .kata {
  display: inline;
  height: auto;
  line-height: 1.4;
  vertical-align: middle;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_image + .et_pb_code .material-icons {
  color: var(--card-pine);
  vertical-align: -3px;
}

/* 4. Location row (".et_pb_text + .et_pb_code"): second metadata line,
 * deliberately quieter than the category badge. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_text + .et_pb_code {
  width: 100%;
  margin: 0;
  padding: 6px var(--card-pad) 0;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  font-family: var(--card-font) !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--card-muted);
  text-align: left;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_text + .et_pb_code .material-icons {
  color: var(--card-muted);
  vertical-align: -3px;
}

/* 5. Title (".et_pb_code + .et_pb_text" = the h3 module). Captured: white
 * rounded box, shadow, z-index:10, 16px Poppins. Now flat and typographically
 * stronger. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code + .et_pb_text {
  width: 100%;
  margin: 0;
  /* IMPORTANT ESCAPE (a) */
  padding: 10px var(--card-pad) 2px !important;
  background-color: transparent;
  border-radius: 0;
  overflow: visible;
  position: static;
  z-index: auto;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code + .et_pb_text h3 {
  margin: 0;
  padding: 0;
  font-family: var(--card-font) !important;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: left;
}

/* 6. Description copy (".et_pb_divider + .et_pb_text") — IMPORTANT ESCAPE (b) */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_divider + .et_pb_text {
  width: 100%;
  margin: 0;
  padding: 8px var(--card-pad) 14px !important;
  font-family: var(--card-font) !important;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--card-body);
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_divider + .et_pb_text p {
  margin: 0;
}

/* 7. The two captured dividers become the card's internal rules
 * (metadata | description | footer), full width instead of 80% centred. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_divider {
  width: 100%;
  max-width: none;                  /* captured max-width:80% */
  height: 0;
  margin: 0;
  padding: 0;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_divider:before {
  border-top-color: var(--card-rule);
  border-top-width: 1px;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
}

/* 8. Footer: CTA and price sit side by side on one baseline.
 * IMPORTANT: every rule here is additionally scoped to `.et_pb_column_1_3`
 * (the actual card column). Each of the four sections ALSO contains one
 * section-level ".et_pb_button_module_wrapper" (the "… Lainnya" link in a
 * full-width .et_pb_column_4_4) which must keep its captured centred
 * treatment — it is not part of the card footer.
 * IMPORTANT ESCAPE (c) — the captured wrapper rule declares
 * margin-left/margin-bottom:5% !important. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column_1_3 .et_pb_button_module_wrapper {
  display: inline-block;
  width: 50%;
  margin: 0 !important;
  padding: 18px 6px 18px var(--card-pad);
  vertical-align: middle;
  text-align: left;
}

/* CTA: same label, same href; pine green instead of the captured
 * blue/lime/forest button colours (#00a2ea / #acce22 / #009b4d). */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column_1_3 .et_pb_button_module_wrapper .et_pb_button.et_pb_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  background-color: var(--card-pine);
  background-image: none;
  color: #ffffff;
  border-width: 0;
  border-radius: 8px;
  font-family: var(--card-font) !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  box-shadow: none;
  text-shadow: none;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column_1_3 .et_pb_button_module_wrapper .et_pb_button.et_pb_button:hover {
  background-color: var(--card-pine-dark);
  color: #ffffff;
  border-width: 0;
  box-shadow: none;
}

/* The captured CTAs carry a decorative WhatsApp/detail glyph in ::before
 * (content: attr(data-icon); position:absolute; margin-left:-18.2px;
 * font-family:FontAwesome/ETmodules !important) plus an empty ::after.
 * The absolute ::before lands on top of the centered label, so drop both.
 * Selector specificity (0,3,2) beats the captured (0,3,1) rules; no
 * !important needed. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column_1_3 .et_pb_button_module_wrapper .et_pb_button.et_pb_button:before {
  content: none;
}
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column_1_3 .et_pb_button_module_wrapper .et_pb_button.et_pb_button:after {
  content: none;
  display: none;
}

/* Price footer: every price and unit string is preserved verbatim.
 * IMPORTANT ESCAPE (d) — colour only, because the captured markup carries
 * style="color:#ff6d2f" inline on the price <span> and inline declarations can
 * only be beaten by an author !important declaration. */
:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_text.harga {
  display: inline-block;
  width: 46%;
  margin: 0;
  padding: 18px var(--card-pad) 18px 6px;
  vertical-align: middle;
  font-family: var(--card-font) !important;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--card-muted);
  text-align: right;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_text.harga p {
  margin: 0;
  line-height: 1.35;
  text-align: right;
}

:is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_text.harga p span {
  color: var(--card-pine) !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* 9. Responsive tuning. Desktop keeps the captured three-column Divi grid
 * untouched; the breakthrough points match the captured ones (<=980 tablet,
 * <=767 phone), where Divi stacks the columns. */
@media only screen and (max-width: 980px) {
  :is(#kegiatan, #destinasi, #penginapan, #camping) {
    --card-pad: 18px;
  }

  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column.et_pb_column_1_3 {
    margin-bottom: 24px;
  }

  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code + .et_pb_text h3 {
    font-size: 18px;
  }

  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_divider + .et_pb_text {
    font-size: 13px;
  }
}

@media only screen and (max-width: 767px) {
  :is(#kegiatan, #destinasi, #penginapan, #camping) {
    --card-pad: 16px;
  }

  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_code + .et_pb_text h3 {
    font-size: 17px;
  }

  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_divider + .et_pb_text {
    font-size: 12.5px;
    padding-bottom: 12px !important;
  }

  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column_1_3 .et_pb_button_module_wrapper {
    width: 52%;
  }

  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_text.harga {
    width: 44%;
  }

  /* Comfortable touch target on phones. */
  :is(#kegiatan, #destinasi, #penginapan, #camping) .et_pb_column_1_3 .et_pb_button_module_wrapper .et_pb_button.et_pb_button {
    min-height: 44px;
  }
}