/* Atomic CSS - Cibo Food Social Network */

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Spacing - Padding */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

.pt-4 { padding-top: 1rem; }
.pb-4 { padding-bottom: 1rem; }

/* Spacing - Margin */
.m-0 { margin: 0; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }

/* Display */
.flex { display: flex; }
.block { display: block; }
.inline-block { display: inline-block; }

/* Flex Properties */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.items-center { align-items: center; }

.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

.flex-1 { flex: 1; }

/* Width & Max Width */
.w-full { width: 100%; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }

/* Height */
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* Text Properties */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

.text-center { text-align: center; }
.text-gray-500 { color: #6B7280; }
.text-gray-600 { color: #4B5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1F2937; }
.text-white { color: #FFFFFF; }
.text-pink-600 { color: #FF7F11; }
.text-pink-700 { color: #D8690D; }
.text-blue-500 { color: #3B82F6; }
.text-blue-600 { color: #2563EB; }
.text-red-600 { color: #DC2626; }
.text-red-700 { color: #B91C1C; }

/* Background Colors */
.bg-white { background-color: #FFFFFF; }
.bg-pink-50 { background-color: #FFF2E6; }
.bg-pink-500 { background-color: #FF7F11; }
.bg-pink-600 { background-color: #D8690D; }
.bg-gray-100 { background-color: #F3F4F6; }
.bg-gray-300 { background-color: #D1D5DB; }
.bg-gray-400 { background-color: #9CA3AF; }
.bg-gray-500 { background-color: #6B7280; }
.bg-blue-500 { background-color: #3B82F6; }
.bg-blue-600 { background-color: #2563EB; }
.bg-red-100 { background-color: #FEE2E2; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-pink-50 { --tw-gradient-stops: #FFF2E6; }
.to-orange-50 { --tw-gradient-stops: #FFF2E6, #FFE6CC; }

/* Border */
.border { border: 1px solid #E5E7EB; }
.border-t { border-top: 1px solid #E5E7EB; }
.border-b { border-bottom: 1px solid #E5E7EB; }
.border-gray-100 { border-color: #F3F4F6; }
.border-gray-300 { border-color: #D1D5DB; }
.border-red-300 { border-color: #FCA5A5; }

/* Border Radius */
.rounded { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* Shadow */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }

/* Hover Effects */
.hover\:bg-pink-600:hover { background-color: #D8690D; }
.hover\:bg-blue-600:hover { background-color: #2563EB; }
.hover\:bg-gray-400:hover { background-color: #9CA3AF; }
.hover\:bg-gray-600:hover { background-color: #4B5563; }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.hover\:text-pink-700:hover { color: #D8690D; }

/* Transitions */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; }
.duration-200 { transition-duration: 200ms; }

/* Overflow */
.overflow-hidden { overflow: hidden; }

/* Object Fit */
.object-cover { object-fit: cover; }

/* Form Elements */
input[type="password"],
input[type="text"],
input[type="email"],
input[type="file"],
textarea,
select {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 0.5rem;
}

input[type="password"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #FF7F11;
  box-shadow: 0 0 0 3px rgba(255, 127, 17, 0.2);
}

textarea {
  resize: vertical;
}

/* Links */
a {
  color: #FF7F11;
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: #D8690D;
}

/* Lists */
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* Space */
.space-y-6 > * + * {
  margin-top: 1.5rem;
}

/* Prose */
.prose {
  max-width: 65ch;
}

/* Image */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Video */
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility for max-height */
.max-h-96 {
  max-height: 24rem;
}

/* Whitespace */
.whitespace-pre-wrap {
  white-space: pre-wrap;
}

/* Container */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Post card (semantic) */
.post {
  background-color: #FFFFFF;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.post__header {
  padding: 1.5rem;
  border-bottom: 1px solid #F3F4F6;
  background: linear-gradient(to right, #FFF2E6, #FFE6CC);
}

.post__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 0.5rem;
}

.post__meta {
  font-size: 0.875rem;
  color: #6B7280;
}

/* Title (main page title) */
.title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #FF7F11;
  margin-bottom: 0.5rem;
}

/* Cibo Post (post card on feed) */
.ciboPost {
  background-color: #FFFFFF;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 200ms;
}

.ciboPost:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ciboPost__media {
  position: relative;
  min-height: 22rem;
  background: #111827;
}

.ciboPost__mediaLink {
  display: block;
  cursor: pointer;
}

.ciboPost__image,
.ciboPost__video,
.ciboPost__placeholder {
  width: 100%;
  height: clamp(20rem, 54vh, 34rem);
  display: block;
}

.ciboPost__image,
.ciboPost__video {
  object-fit: cover;
}

.ciboPost__placeholder {
  background: linear-gradient(140deg, #FFB26B 0%, #FF7F11 55%, #D8690D 100%);
}

.ciboPost__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 1rem 1rem;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.ciboPost__title {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
  color: #FFFFFF;
}

.ciboPost__meta {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  opacity: 0.95;
  color: #FFFFFF;
}

.ciboPost__description {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  max-height: 4.4em;
  overflow: hidden;
  color: #FFFFFF;
}

.ciboPost__footer {
  padding: 0.75rem 1rem;
  background: #FFF2E6;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
}

.ciboPost__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Button */
.btn {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background-color: #FF7F11;
  color: #FFFFFF;
  border-radius: 9999px;
  font-weight: 600;
  transition: background-color 200ms;
}

.btn:hover {
  background-color: #D8690D;
}

/* Hero (empty state) */
.hero {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
  background-color: #FFFFFF;
  border-radius: 1rem;
  padding: 1em;
}

/* Auth */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #FFF2E6;
}

.auth__card {
  width: 100%;
  max-width: 24rem;
  background: #FFFFFF;
  border: 1px solid #F3F4F6;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.auth__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 0.25rem;
}

.auth__subtitle {
  color: #6B7280;
  margin-bottom: 1.5rem;
}

.auth__form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.auth__field {
  margin-bottom: 1rem;
}

.auth__actions {
  margin-top: 0.5rem;
}

.auth__button {
  width: 100%;
  background: #FF7F11;
  color: #FFFFFF;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

.auth__button:hover {
  background: #D8690D;
}

.auth__links {
  margin-top: 1rem;
  text-align: center;
}

.auth__alert {
  background: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.auth__notice {
  background: #ECFDF3;
  color: #067647;
  border: 1px solid #A7F3D0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.auth__footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #F3F4F6;
  text-align: center;
  font-size: 0.75rem;
  color: #6B7280;
}

.auth__footer a {
  margin: 0 0.5rem;
}

/* Page (for static pages like terms, privacy) */
.page {
  min-height: 100vh;
  background: #F9FAFB;
  padding: 2rem 1rem;
}

/* Desktop: Adjust for left sidebar menu */
@media (min-width: 1024px) {
  .page {
    margin-left: 200px;
    padding: 2rem;
  }
}

.page__container {
  max-width: 48rem;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.page__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 1.5rem;
}

.page__content {
  line-height: 1.75;
  color: #374151;
}

.page__content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1F2937;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.page__content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1F2937;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.page__content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #DC2626;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.page__content p {
  margin-bottom: 1rem;
}

.page__back {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #F3F4F6;
}

/* Account page */
.account-info {
  background: #FFF2E6;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 2rem;
}

.account-info p {
  margin-bottom: 0.5rem;
}

.account-actions {
  margin-top: 2rem;
}

.account-actions h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 1rem;
}

.account-button {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 200ms;
  margin-bottom: 1rem;
}

.account-button--logout {
  background: #FF7F11;
  color: #FFFFFF;
}

.account-button--logout:hover {
  background: #D8690D;
}

.account-button--delete {
  background: #DC2626;
  color: #FFFFFF;
}

.account-button--delete:hover {
  background: #B91C1C;
}

.account-danger {
  margin-top: 2rem;
  padding: 1.5rem;
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: 0.5rem;
}

.account-danger h4 {
  color: #DC2626;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.account-danger p {
  color: #7F1D1D;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

/* Site Footer (general footer for all pages) */
.site-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #E5E7EB;
  text-align: center;
  font-size: 0.875rem;
  color: #6B7280;
}

.site-footer a {
  margin: 0 0.5rem;
  color: #FF7F11;
}

.site-footer a:hover {
  color: #D8690D;
}

/* Post Action Buttons */
.post_see,
.post_edit,
.post_delete,
.post_follow,
.post_following {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: background-color 200ms;
}

.post_see {
  background-color: #3B82F6;
}

.post_see:hover {
  background-color: #2563EB;
}

.post_edit {
  background-color: #10B981;
}

.post_edit:hover {
  background-color: #059669;
}

.post_delete {
  background-color: #DC2626;
}

.post_delete:hover {
  background-color: #B91C1C;
}

.post_follow {
  background-color: #6B7280;
}

.post_follow:hover {
  background-color: #4B5563;
}

.post_following {
  background-color: #FF7F11;
}

.post_following:hover {
  background-color: #D8690D;
}

/* Media wrapper */
.media_box {
  margin-bottom: 1.5rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #F3F4F6;
}

/* Post footer */
.Post_footer {
  padding: 1.5rem;
  background: #FFF2E6;
  border-top: 1px solid #E5E7EB;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

/* Comments */
.comments {
  margin-top: 2rem;
  background: #FFFFFF;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
}

.comments__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1F2937;
  margin-bottom: 1rem;
}

.comments__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment {
  padding: 0.75rem 1rem;
  border: 1px solid #E5E7EB;
  border-radius: 0.75rem;
  background: #FFF7ED;
}

.comment__meta {
  font-size: 0.75rem;
  color: #6B7280;
  margin-bottom: 0.5rem;
}

.comment__author {
  font-weight: 700;
  color: #111827;
}

.comment__body {
  font-size: 0.95rem;
  color: #374151;
  white-space: pre-wrap;
}

.comment__actions {
  margin-top: 0.5rem;
}

.comment__delete {
  background: #DC2626;
  color: #FFFFFF;
  border: none;
  border-radius: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
}

.comment__delete:hover {
  background: #B91C1C;
}

.comments__empty {
  color: #6B7280;
  margin-bottom: 1rem;
}

.comment__form {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #F3F4F6;
}

.comment__form-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 0.75rem;
}

.comment__field {
  margin-bottom: 0.75rem;
}

.comments__login {
  margin-top: 1rem;
  color: #6B7280;
}

.my-cibo__actions {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.my-cibo__action-button {
  min-width: 10rem;
  padding: 0.85rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.my-cibo__action-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  color: #FFFFFF;
}

.my-cibo__action-button--ate {
  background-color: #FF7F11;
}

.my-cibo__action-button--ate:hover {
  background-color: #D8690D;
}

.my-cibo__action-button--recipes {
  background-color: #6B7280;
}

.my-cibo__action-button--recipes:hover {
  background-color: #4B5563;
}

.my-cibo__action-button--active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.my-cibo__filter-note {
  margin-top: 0.55rem;
  color: #4B5563;
  font-size: 0.875rem;
}

.cibo-trix {
  background: #FFFFFF;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  min-height: 12rem;
  padding: 0.5rem;
}

.cibo-rich-content p {
  margin-bottom: 0.75rem;
}

.cibo-rich-content ul,
.cibo-rich-content ol {
  margin: 0.5rem 0 0.9rem 1.2rem;
}

.new_post{
  padding: 1em 10px;
}

.my_cibo {
  background-color: #FFF2E6;
}

/* Desktop: Adjust main content areas for left sidebar menu */
@media (min-width: 1024px) {
  .new_post,
  .my_cibo {
    margin-left: 200px;
  }
  
  /* Utilities with Tailwind classes - adjust via padding */
  .p-8.bg-pink-50 {
    margin-left: 200px;
  }
}
}
/* Menu Navigation Styles */

/* Mobile: Top horizontal menu */
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 5px;
}

.miniHeader {
  margin-bottom: 2rem;
  text-align: center;
}

.miniHeader__nav {
  margin-top: 0.75rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.miniHeader__link {
  display: block;
  color: #FF7F11;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.miniHeader__link:hover {
  color: #D8690D;
  background-color: rgba(255, 127, 17, 0.1);
}

/* Desktop: Left sidebar menu */
@media (min-width: 1024px) {
  /* Position .menu as left sidebar */
  .menu {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 200px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2rem 0;
    background-color: #FFF2E6;
    border-right: 2px solid #FFE3C7;
    margin-bottom: 0;
    z-index: 100;
  }

  /* Position .miniHeader as left sidebar */
  .miniHeader {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 200px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2rem 0;
    background-color: #FFF2E6;
    border-right: 2px solid #FFE3C7;
    margin-bottom: 0;
    z-index: 100;
    text-align: left;
  }

  .miniHeader__nav {
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: 0;
  }

  .miniHeader__link {
    display: block;
    text-align: left;
    padding: 1rem 1.5rem;
    border-radius: 0;
    border-left: 4px solid transparent;
    transition: all 0.2s;
    width: 100%;
    justify-content: flex-start;
  }

  .miniHeader__link:hover {
    border-left-color: #FF7F11;
    background-color: rgba(255, 127, 17, 0.08);
  }
}
/* Page-specific styles for the food posts index feed */
.food-posts-index {
  min-height: 100vh;
  background-color: #FFF2E6;
  background-image: radial-gradient(circle at top right, rgba(255, 127, 17, 0.08), transparent 45%);
  padding: 0.75rem;
}

/* Desktop: Adjust for left sidebar menu */
@media (min-width: 1024px) {
  .food-posts-index {
    margin-left: 200px;
  }
}

.food-posts-index__container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.food-posts-index__search {
  margin-bottom: 1.5rem;
}

.food-posts-index__search-form,
.food-posts-index__search-field {
  position: relative;
}

.food-posts-index__search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.5rem;
  font-size: 1rem;
  background: #FFFFFF;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.food-posts-index__search-input:focus {
  outline: none;
  border-color: #FF7F11;
  box-shadow: 0 0 0 3px rgba(255, 127, 17, 0.18);
}

.food-posts-index__search-button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
}

.food-posts-index__search-results {
  margin-top: 0.5rem;
  color: #4B5563;
  font-size: 0.875rem;
}

.food-posts-index__clear-search {
  color: #FF7F11;
  font-weight: 600;
}

.food-posts-index__clear-search:hover {
  color: #D8690D;
}

.food-posts-index__feed {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0.75rem;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.4rem;
}

/* Desktop: Vertical scrolling */
@media (min-width: 1024px) {
  .food-posts-index__feed {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-block: 0.75rem;
    padding-bottom: 1rem;
    max-height: calc(100vh - 250px);
  }

  .food-posts-index .ciboPost__mediaLink{
    height: auto;
  }
}

@media (max-width: 1023px) {
.food-posts-index .ciboPost__mediaLink {
  display: block;
  cursor: pointer;
  height: 85vh;
}
}



.food-posts-index .ciboPost {
  border: 1px solid #FFE3C7;
  border-radius: 1rem;
  overflow: hidden;
  background: #FFFFFF;
  flex: 0 0 min(88vw, 64rem);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Desktop: Full-width posts with vertical scrolling */
@media (min-width: 1024px) {
  .food-posts-index .ciboPost {
    flex: 1 0 100%;
    width: 100%;
    max-height: 65vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

.food-posts-index__feed > .food-posts-index__empty-state {
  width: 100%;
}

.food-posts-index .ciboPost__media {
  position: relative;
  min-height: 22rem;
  background: #111827;
}


.food-posts-index .ciboPost__image,
.food-posts-index .ciboPost__video,
.food-posts-index .ciboPost__placeholder {
  width: 100%;
  height: clamp(20rem, 54vh, 34rem);
  display: block;
}

.food-posts-index .ciboPost__image,
.food-posts-index .ciboPost__video {
  object-fit: cover;
}

.food-posts-index .ciboPost__placeholder {
  background: linear-gradient(140deg, #FFB26B 0%, #FF7F11 55%, #D8690D 100%);
}

.food-posts-index .ciboPost__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem 1rem 1rem;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 45%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.food-posts-index .ciboPost__title {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.2;
}

.food-posts-index .ciboPost__meta {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  opacity: 0.95;
}

.food-posts-index .ciboPost__description {
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  max-height: 4.4em;
  overflow: hidden;
}

.food-posts-index .ciboPost__footer {
  padding: 0.75rem 1rem;
  background: #FFF2E6;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.food-posts-index .ciboPost__actions {
  display: flex;
  gap: 0.5rem;
}

.food-posts-index__empty-state {
  text-align: center;
  padding: 4rem 1rem;
  background: #FFFFFF;
  border-radius: 1rem;
  border: 1px solid #FFE3C7;
}

.food-posts-index__empty-icon {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.food-posts-index__empty-text {
  color: #6B7280;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
}

.food-posts-index__empty-action {
  margin-top: 0.75rem;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  background: #FF7F11;
  color: #FFFFFF;
  font-weight: 600;
}

.food-posts-index__empty-action:hover {
  background: #D8690D;
  color: #FFFFFF;
}

@media (max-width: 640px) {
  .food-posts-index {
    padding: 0.5rem;
  }

  .food-posts-index .ciboPost__overlay {
    padding: 1rem 0.85rem 0.85rem;
  }

  .food-posts-index .ciboPost__title {
    font-size: 1.2rem;
  }

  .food-posts-index .ciboPost__description {
    font-size: 0.88rem;
  }
}

/* Explicit styles for post type radios used in new/edit food post forms */
.foodPostForm__postTypeGroup {
  margin-bottom: 1.5rem;
}

.foodPostForm__postTypeLabel {
  display: block;
  margin-bottom: 0.5rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 700;
}

.foodPostForm__postTypeOptions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.foodPostForm__postTypeOption {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #374151;
  font-size: 0.875rem;
  cursor: pointer;
}

.foodPostForm__postTypeRadio {
  accent-color: #ec4899;
}

.foodPostForm__postTypeRadio:focus {
  outline: 2px solid rgba(236, 72, 153, 0.35);
  outline-offset: 2px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *





 */